没有页面重新加载的烧瓶表单提交

Question

我有一个显示数据表的简单烧瓶应用程序。其中一列有一个表格。

我尝试遵循this 教程，了解如何在不每次刷新页面的情况下提交表单。

当我让它工作时，它似乎只从第一行获取数据，无论我提交哪一行的表单。

如果没有不刷新尝试，这可以正常工作。具体来说，如果我提交了位于第二行的表单，它将获取第二行的数据点。

有什么想法吗？我应该对 javascript 函数应用某种索引吗？

<table id="customer_df">
        <thead class="text-primary">

          <tr>
            {% for col in column_names %}

            {% if loop.index == 13 %} 
            <th style="display:none;"></th>

            {% else %}
            <th class="text-center">
            
              {{col}}
             
            </th>
            {% endif %}
            {% endfor %}
          </tr>

        </thead>
        <tbody>
          {% for row in row_data %}
          <tr>
            {% for col, row_ in zip(column_names, row) %}

            {% if loop.index == 1 %} 
            <td><a href="{{ url_for('client_details_page', customer_name=row_) }}" target="_blank"> {{row_}}</a></td>

            {% elif loop.index == 12 %} 



            <td>
                  
              <form method="POST" id="reassign-form">
                <input type="hidden" name="mhh_key" id ='mhh_key_id' value="{{ row[12] }}"></input>
                <input type="hidden" name="mhh_name" id='mhh_name_id' value="{{ row[0] }}"></input>
                <input type="hidden" name="curr_initial" id='curr_initial_id' value="{{ row[11] }}"></input>
                <input type="text" name="reassigned_initial" id="reassigned_init" value="{{ row_ }}" size="3" maxlength="140"/>
                <input type="hidden" name="reassignment_dt" value="{{ reassignment_request_date }}"></input>
                <input type="submit" class="btn btn-success" value="Reassign"/>
                </form>


            </td>
            {% elif loop.index == 13 %} 

            <td style="display:none;">

            {% else %}

            <td>{{row_}}</td>
            {% endif %}

            {% endfor %}
          </tr>
          {% endfor %}

         
        </tbody>
  
      </table>

<!--- Prevent page refresh after form submitted-->
<script type="text/javascript">
  $(document).on('submit','#reassign-form',function(e)
                 {
    //console.log('hello');
    console.log($("#mhh_name_id").val())
    e.preventDefault();
    $.ajax({
      type:'POST',
      url:'/',
      data:{
         mhh_key:$("#mhh_key_id").val()
        ,mhh_name:$("#mhh_name_id").val()
        ,curr_initial:$("#curr_initial_id").val()
        ,reassigned_initial:$("#reassigned_init").val()
        //value_in_app.py:id_in_form.val()
      },
      success:function()
      {
        alert('Reassignment Submitted.');
      }
    })
  });
</script>

Answer 1

在循环内部，您不会更改输入 id。因此，当您从 JavaScript 中获取 id 时，它始终采用第一个值（即第一行）。在任何地方都使用相同的id 是个坏主意。您的id 应该是唯一的。

一种想法是将row_number 添加到每个id。并将此 row_no 传递给您的 javascript 函数。

首先在第一个循环之后创建row_no 变量。

<tbody>
{% for row in row_data %}
{% set row_no = loop.index %}
  <tr>
    {% for col, row_ in zip(column_names, row) %}

然后将其添加到您的所有id

<form method="POST" onsubmit="return new_fun(event, {{ row_no }})">
  <input type="hidden" name="mhh_key" id ='mhh_key_id_{{ row_no }}' value="{{ row[12] }}"></input>
  <input type="hidden" name="mhh_name" id='mhh_name_id_{{ row_no }}' value="{{ row[0] }}"></input>
  <input type="hidden" name="curr_initial" id='curr_initial_id_{{ row_no }}' value="{{ row[11] }}"></input>
  <input type="text" name="reassigned_initial" id="reassigned_init_{{ row_no }}" value="{{ row_ }}" size="3" maxlength="140"/>
  <input type="hidden" name="reassignment_dt" value="{{ reassignment_request_date }}"></input>
  <input type="submit" class="btn btn-success" value="Reassign"/>
</form>

我还稍微改变了 JS 函数，让它接受这个数字。

<script type="text/javascript">
  function new_fun(e, num){
    # console.log(num)
    # console.log($("#mhh_name_id_"+num).val())
    e.preventDefault();
    $.ajax({
      type:'POST',
      url:'/',
      data:{
         mhh_key:$("#mhh_key_id_"+num).val()
        ,mhh_name:$("#mhh_name_id_"+num).val()
        ,curr_initial:$("#curr_initial_id_"+num).val()
        ,reassigned_initial:$("#reassigned_init_"+num).val()
        //value_in_app.py:id_in_form.val()
      },
      success:function()
      {
        alert('Reassignment Submitted.');
      }
    })
  };
</script>