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事件，我可以模仿提交按钮的行为的任何方式都会很棒。我正在使用Jinja 2模板（Flask Framework）。谢谢！

Answer 1

我有一个循环通过“条目”在主页上发布。

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

我更改了表单ID，将循环的当前迭代附加到每个表单的ID。

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

这是更正后的来源，包括具有点击事件的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>

<input type =“submit”/>按钮和javascripts之间的任何区别.submit（）

2 个答案: