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>

NavaneethaKrishnan · Accepted Answer · 2021-07-28 17:51:40Z

2

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>

edited Jul 28, 2021 at 17:51

answered Jul 28, 2021 at 7:25

NavaneethaKrishnan

1,3561 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikelowry Over a year ago

Amazing, thank you that worked. Just one change needed, when creating the row_no I had to change it to {% set row_no = loop.index %}, you had it reversed, index.loop. Other than that works like a charm!

NavaneethaKrishnan Over a year ago

yup. sorry for that. i will change now.

Collectives™ on Stack Overflow

Flask form submission without Page Reload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related