title: Flask POST request form data without refreshing page
body: <p>I am building a small web application that allows the user to enter a transaction through a couple form input fields (such as date, transaction amount, description, etc.). Each time the user clicks a "submit" button a new table row will be created with one column for each input field. In addition to building this table, I want the input data to be sent to my Flask app. </p>
  
  <p>The problem I have is that when the user clicks "submit", the page refreshes and all the table rows are gone. The solution I tried for this is to just have a <code>&lt;button type="button"&gt;&lt;/button&gt;</code> tag with an id, and when the user clicks it my Javascript code adds a table row without refreshing the page. However, this doesn't work because it doesn't send the data to my Flask app. I also tried using <code>sessionStorage.setItem</code> in Javascript but I don't know how to make that work with my specific code, as the user could click the button 3 times for 3 different transactions and each time the page would refresh.</p>
  
  <p>So my question is, how can I create and display the table rows on the page while ALSO sending the form input data to my Flask app?</p>
  
  <p>For simplification, I have only included 2 input fields here, but there are 8.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form method="POST"&gt;
    &lt;div class="list-group-item"&gt;
      &lt;label&gt;Date&lt;/label&gt;
      &lt;input class="form-control" id="datepicker" type="text" name=expDate value=""&gt;
    &lt;/div&gt;
    &lt;div class="list-group-item"&gt;
      &lt;label&gt;Amount Withdrawn&lt;/label&gt;
      &lt;input class="form-control" id="withAmount" type="text" name=expAmountWith value=""&gt;
    &lt;/div&gt;
    &lt;button id="submit-btn" type="submit" class="btn btn-light submit-btn"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>d3.selectAll('#submit-btn').on('click', buildTable);
  
  function buildTable() {
      var dateInput = d3.select('#datepicker').property('value');
      var withAmount = d3.select('#withAmount').property('value');
  
      var tableArray = []
      tableArray.push(dateInput, withAmount)
  
      var row = d3.select('tbody').append('tr');
  
      tableArray.forEach(function(x) {
  
          var cell = row.append('td');
          cell.text(x);
      });
  
  };
  </code></pre>
  
  <p>Python:</p>
  
  <pre><code>app = Flask(__name__)
  
  @app.route('/', methods=['GET', 'POST'])
  def record_transaction():
  
      form = request.form
  
      if request.method == 'POST':
          expDate = request.form['expDate']
          expAmountWith = request.form['expAmountWith']
  
      return render_template('index.html', form=form)
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>