Send form data across html, js and python flask

Question

I have a simply HTML form like so:

  <form id="new_order" method="post" action="{{ url_for('summary') }}">
    <div class="form-group col-sm" id="fruit">
      <input type="number" class="form-control" name="fruit_quantity" id="fruit_quantity" required>fruit_quantity<br>
      <input type="text" class="form-control" name="fruit_name" id="fruit_name">fruit_name<br>
      <button type="submit" class="btn btn-primary" form="new_order" id="new_order_summary">Summarise</button>
      ( ... ) //more entries possible
  </form>

I use Python Flask to retrieve the form data and do stuff with it:

@app.route('/summary', methods=['GET', 'POST'])
def summary():
    summary = []

    fruit = request.form.get('fruit_name')
    summary.append({'fruit_name': fruit})

    quantity = request.form.get('fruit_quantity')
    summary.append({'fruit_quantity': fruit_quantity})

    summary = json.dumps(summary)

    return  render_template('fruit_summary.html'
                            , summary= summary
                            )

The idea was to open a second HTML page to display the summarised fruits using the jQuery plug-in DataTables.

// 2nd HTML file
<div>
  <table id="summary_table" class="responsive display">
  </table>
</div>

//JS file
$('#new_order').submit( function (data) {
    // check that the new page loaded
    $('#summary_table').ready( function () {

        // this won't show anything, unfortunately..
        console.log(data);

        $('#summary_table').DataTables({
        data: data
        , columns: [
                {data: 'fruit_name', title: 'fruit_name'},
                {data: 'fruit_quantity', title: 'fruit_quantity'}
        ]
        })
    })
});

When I now show the variable 'summary' in the HTML file Flask-style ({{ summary }}), it shows that the data is indeed sent over to the HTML file correctly.

My problem is that I need that information in the JS file, not the HTML file, to make it render nicely using DataTables.

I've tried to get the data with another AJAX call, but that would simply return the dict from Flask without any form data. I believe that I don't really understand how the data flows between files. It works in other examples where I use preventDefault() on submit, but it should be a separate /summary HTML file..

The following posts seem related but didn't help me:

madalinivascu · Answer 1 · 2018-10-31T13:49:14.313

0

Remove the submit event, pass the data from the php variable to the javascript variable

$('#summary_table').ready( function () {

        var data = JSON.parse('{{ summary }}');

        $('#summary_table').DataTables({
        data: data
        , columns: [
                {data: 'fruit_name', title: 'fruit_name'},
                {data: 'fruit_quantity', title: 'fruit_quantity'}
        ]
        })

edited Oct 31 '18 at 13:49

answered Oct 31 '18 at 13:43

madalinivascu

32,064
4
39
55

So are you saying `{{ summary }}` _is_ actually transferred to the JS file? The code you provided above returns `Uncaught SyntaxError: Unexpected token { in JSON at position 1 at JSON.parse`. – dennisdee Oct 31 '18 at 15:35
that means your `{{ summary }}` is not a valid json – madalinivascu Nov 01 '18 at 06:07
Mh sorry, are you sure? When I manually parse the content of the variable to JSON.parse(), it works. Seems like `JSON.parse('{{ summary }}')` wants to parse the string '{{summary}}' instead of what's in that variable. The double curly brackets just determine it's a Flask variable in the HTML code. – dennisdee Nov 02 '18 at 09:58
you use Flask in the server side, javascript doesn't about the server side language used because javascript works only with html generated by the Flask – madalinivascu Nov 02 '18 at 10:13
Exactly my issue. I run Flask server-side, two HTML files, and a JS file to do stuff like DataTables. What I'm struggling with here is that: 1) I want to keep the form at `/index` and the summary at `/summary` without the URL showing what was submitted. 2) I want to keep processing information server-side 3) I want to use DataTables to show the results in a pretty way, which is a JQuery plugin so I'll need to send data back-and-forth between Flask and the JS file. I _think_ – dennisdee Nov 02 '18 at 10:48
is the datatable initialization in another file different from `fruit_summary.html`? – madalinivascu Nov 02 '18 at 11:19
Yes, it's in the JS file, separate from the html file. – dennisdee Nov 02 '18 at 15:57
you need the js on the same page , or at list the variable initialization on the page – madalinivascu Nov 05 '18 at 11:22

Send form data across html, js and python flask

1 Answers1