title: Sending submit data into Flask without page refresh
body: <p><strong>Intro:</strong>
  I'm making an app with many records that allows you to have a ranking/upvote system
  Pic attached:<a href="https://i.stack.imgur.com/dCig3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dCig3.png" alt="this is how UI looks like" /></a></p>
  <p><strong>The problem:</strong> I face is that each time I press 'Upvote +1', the page gets refreshed - and I want to solve it.</p>
  <p>Here is my <strong>Flask</strong> app:</p>
  <pre><code>def form():
     form = LoginForm()
     value = 0
     records = Row.query.order_by(Row.id.desc())
  
     if form.validate_on_submit(): #if we submit something -&gt; pick the ID of the item
        for i in dict(request.form):
          id_of_record_to_change = i
  
  
        item = Row.query.filter_by(id=id_of_record_to_change) #filter item by the ID
        new_value = item.first().rating + 1 #add +1 to the rating value
        item.first().rating = new_value
        db.session.commit() #record to database
  
     return render_template('form.html', records=records, form=form, value=value)
  </code></pre>
  <p>Here is my <strong>html:</strong></p>
  <pre><code>    {{form.csrf_token }}
      
      {% for item in records %}
      {{ item.rating }}
  
      &lt;input type=&quot;hidden&quot; id=&quot;intval&quot; name=&quot;intval&quot; value=&quot;{{ item.rating }}&quot;&gt; &lt;!-- rating we want to increase --&gt;
      &lt;input type=&quot;hidden&quot; id=&quot;id&quot; name=&quot;id&quot; value=&quot;{{ item.id }}&quot;&gt; &lt;!-- ID we want to pass --&gt;
      &lt;input type=&quot;submit&quot; id=&quot;target&quot; name = &quot;{{ item.id }}&quot; value=&quot;Upvote +1&quot;&gt; &lt;!-- submit action --&gt;            
      {% endfor %}
     &lt;/form&gt;
  </code></pre>
  <p>Thank you!</p>