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 · Accepted Answer · 2018-10-31 13:49:14Z

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, 2018 at 13:49

answered Oct 31, 2018 at 13:43

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

8 Comments

dennisdee Over a year ago

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.

madalinivascu Over a year ago

that means your {{ summary }} is not a valid json

dennisdee Over a year ago

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.

madalinivascu Over a year ago

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

dennisdee Over a year ago

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

|

Collectives™ on Stack Overflow

Send form data across html, js and python flask

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related