之間的任何區別 <input type=“submit”> 按鈕和javascripts .submit（）

Question

我正在嘗試使用隱藏值（這是循環的當前迭代）將表單提交到Web服務器。

<form id="question_id_to_delete" action = "{{url_for('delete_question')}}" method="post">
          <input type="hidden" name=id value={{entry.id}}>
          <input type="submit">
</form>

當我使用提交按鈕時，一切正常。 我試圖通過單擊包含希望用戶能夠單擊的字符串的div來模仿此行為。

<div id="question" onclick="document.getElementById('question_id_to_delete').submit()"> {{entry.question}} </div>

此onclick事件始終發送帶有最后迭代ID的表單（如果我的頁面上有五個元素，則entry.id將始終作為五個元素發送）。

我可以通過使用div click事件或某種不涉及按鈕的jQuery事件來模擬Submit按鈕的行為的任何方式都很好。 我正在使用Jinja 2模板（Flask框架）。 謝謝！

Answer 1

我循環瀏覽“條目”以發布到主頁上。

 {% for entry in entries %}
      <form id="delete_question" ...>
 {% endfor %}

我更改了表單ID，以將循環的當前迭代附加到每個表單的ID。

<form id="delete_question_{{entry.id}}" ...>

這是更正后的來源，包括具有click事件的div。

{% for entry in entries %}
      <form id="delete_question_{{entry.id}}" action ="{{url_for('delete_question')}}" method="post">
          <input type="hidden" name="id_to_delete" value={{entry.id}}>
      </form>
      <div id="question" onclick=document.getElementById("delete_question_{{entry.id}}").submit() >
          <li><h2>{{entry.question}}</h2>
      </div> {% endfor %}}

Answer 2

<form id="question_id_to_delete" action="{{url_for('delete_question')}}" method="post">
  <input type="hidden" name=id value={{entry.id}}>
  <div class="special-submit-button"></div>
</form>

<script>
  // include jQuery before this script tag
  $('.special-submit-button').on('click', function(e) {
    // DIV button livs inside the form. so find the form and submit it
    // doing it this way, makes this code more universal. you can now port this 
    // to OTHER FORMS that use the same idea, without having to change it
    // simply by applying the special-submit-button class to the submitter div.
    // this IS an answer.
    $(this).closest('form').submit();
  });
</script>