<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>

当我使用submit按钮时，一切都正常工作。我试图通过单击包含我希望用户能够单击的字符串的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>