表單提交時觸發onchange事件

Question

我希望用戶能夠記錄他們執行的操作。 我按類別對操作進行分組，然后使用兩個 select 菜單和 JS，用戶只顯示他們選擇的類別中的操作。 還有一個根據選擇的動作生成的數量輸入。

我的問題是，當我提交表單時，出現錯誤：

未捕獲的類型錯誤：無法設置 null 的屬性“onchange”

select 框和 JS 實現的功能一直工作到提交表單為止。

索引.js

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);
};

視圖.py

@login_required
def record(request):

    if request.method == 'POST':
        form = NewPostForm(request.POST)

        if form.is_valid():
            post = form.save(commit=False)
            post.poster = request.user

            if request.POST.get('id_post_quantity'):
                post.post_quantity = request.POST.get('id_post_quantity')
            
            post.save()

        return HttpResponseRedirect(reverse('index'))

    return render(request, 'my_app/record.html', {
        'form': NewPostForm
    })

記錄.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>

非常感謝指向正確方向的指針謝謝。

Answer 1

似乎在加載的每個頁面上都調用了 onchange。 這意味着，當重定向到索引頁面（select 框不存在）時，getElementById 將返回 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);
  }
});

有沒有更優雅/正確的方法來解決同樣的問題？

Answer 2

對我來說，當我將提交事件更改為 btn 單擊事件時，它得到了修復。