Flask form submission without Page Reload

Question

I have a simple flask app that displays a table of data. One of the columns has a form.

I tried to follow this tutorial on how to submit the form without it refreshing the page each time.

While I got it to work, it only seems to grab the data from the first row, regardless which row's form I submit.

This was working fine without the no-refresh attempt. Concretely, if I submitted the form that resides in the second row, it would pick up the second rows data point.

Any ideas? Am I supposed to apply some sort of indexing to the javascript function?

<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

Inside the loop you're not changing the input id. So when you are taking the id from the JavaScript, it always takes the first value (i.e first row). And it is a bad idea to use same id everywhere. Your id should be unique.

One thought is to add row_number to each id. and pass this row_no to your javascript function.

First create the row_no variable right after the first loop.

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

Then add it to all your 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>

Also I changed the JS function little bit so that it will take this number.

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