Javascript 表单提交时触发的onchange事件
我希望用户能够记录他们执行的操作。我按类别对动作进行分组,然后使用两个选择菜单和JS,用户只会看到他们选择的类别中的动作。还有一个数量输入,根据选择的操作生成 我的问题是,当我提交表单时,会出现以下错误: 未捕获的TypeError:无法将属性“onchange”设置为null 选择框和JS实现的功能将一直工作到表单提交为止 index.jsJavascript 表单提交时触发的onchange事件,javascript,django,forms,Javascript,Django,Forms,我希望用户能够记录他们执行的操作。我按类别对动作进行分组,然后使用两个选择菜单和JS,用户只会看到他们选择的类别中的动作。还有一个数量输入,根据选择的操作生成 我的问题是,当我提交表单时,会出现以下错误: 未捕获的TypeError:无法将属性“onchange”设置为null 选择框和JS实现的功能将一直工作到表单提交为止 index.js document.addEventListener("DOMContentLoaded", () => { // Firs
document.addEventListener("DOMContentLoaded", () => {
// First select
let cat_select = document.getElementById("id_post_cat");
cat_select.onchange = () => handleCatChange(cat_select.value);
// Second select
let desc_select = document.getElementById("id_post_action");
desc_select.onchange = () => handleDescChange(desc_select.value);
});
const handleCatChange = (cat) => {
let quantity_div = document.getElementById("quantity_div");
quantity_div.innerHTML = "";
// Fetching the actions in the category selected and populating second select
fetch(`/action/${cat}`)
.then((response) => response.json())
.then((data) => {
let desc_select = document.getElementById("id_post_action");
let optionHTML = "<option>---------</option>";
data.actions.forEach((action) => {
optionHTML +=
'<option value"' + action.id + '">' + action.desc + "</option>";
});
desc_select.innerHTML = optionHTML;
})
.catch((err) => console.log(err));
};
const handleDescChange = (desc) => {
let quantity_div = document.getElementById("quantity_div");
quantity_div.innerHTML = "";
let time_actions = [
"Public transport instead of driving",
"Walk/cycle instead of drive",
];
let quant_actions = [
"Unplug unused electrical items",
"Repurpose a waste object",
"Use a reusable bag",
"Buy an unpackaged item",
"Buy a locally produced item",
"Buy a second hand item",
"Buy an object in bulk",
"Use a refillable bottle/to-go mug",
"Drink a tap beer instead of bottled beer",
];
if (time_actions.includes(desc)) {
formAdder("Distance* (km)");
} else if (quant_actions.includes(desc)) {
formAdder("Quantity*");
}
};
const formAdder = (label_content) => {
let quantity_div = document.getElementById("quantity_div");
// Label
let label = document.createElement("label");
label.innerHTML = `${label_content}`;
label.setAttribute("for", "id_post_quantity");
label.classList += "requiredField";
// Input
let input = document.createElement("input");
input.setAttribute("id", "id_post_quantity");
input.setAttribute("name", "post_quantity");
input.setAttribute("required", "");
input.classList += "form-control";
quantity_div.append(label, input);
};
record.html
<form action="{% url 'record' %}" method="post">
{% csrf_token %}
{{form.post_cat|as_crispy_field}}
{{form.post_action|as_crispy_field}}
<div class="form-group" id="quantity_div">
</div>
<button class="btn btn-success" type="submit">Post</button>
</form>
{%csrf_令牌%}
{form.post|cat|as|crispy|u field}
{form.post|u action|as_crispy_field}
邮递
如果指针指向正确的方向,我们将不胜感激。谢谢。似乎在加载的每个页面上都调用了onchange。这意味着,当重定向到索引页面(其中不存在选择框)时,getElementById返回空值等 我通过添加条件来检查元素是否出现在页面上,从而对此进行了更改:
document.addEventListener("DOMContentLoaded", () => {
// First select
let cat_select = document.getElementById("id_post_cat");
if (!!cat_select) {
cat_select.onchange = () => handleCatChange(cat_select.value);
}
// Second select
let desc_select = document.getElementById("id_post_action");
if (!!desc_select) {
desc_select.onchange = () => handleDescChange(desc_select.value);
}
});
有没有更优雅/正确的方法来解决相同的问题?您知道哪个“onchange”会触发错误吗?听起来您正在设置它的元素不存在。在设置元素的onchange事件之前,我会先记录该元素,看看哪个是空的。谢谢您的评论。这是触发错误的第一个选择。在提交表单之前,两个onchange函数工作正常。由于某种原因提交表单时,会再次调用第一个onchange,并出现第一个select为null的错误
document.addEventListener("DOMContentLoaded", () => {
// First select
let cat_select = document.getElementById("id_post_cat");
if (!!cat_select) {
cat_select.onchange = () => handleCatChange(cat_select.value);
}
// Second select
let desc_select = document.getElementById("id_post_action");
if (!!desc_select) {
desc_select.onchange = () => handleDescChange(desc_select.value);
}
});