how do I pass a html table to my flask app

Question

I am making a flask app, where the user inputs data, and a javascript function adds that data to a html table and diplays it to the user. I now want to take that table, and send it to my flask app, so it can be added to a database and the sorts. How do I send an html table to my flask app?

here is my code so far:

newroster.html

{% extends "layout.html" %}
<form method="post" id="myform" onsubmit="return false;" name="myform">
    <table id="people" class="tablex">
        <tr>
            <th> People </th>
            <th>   </th>
        </tr>
    </table>
    <label for="people"> Participants</label>
    <br>
    <input type="text" name="people" id="inputpeople" maxlength="15"
        placeholder="Name"
        value="{{ request.form['people']}}"></input>
    <button type="button" id="addButton" class="button" name="add" onclick="addPeopleFunc()">
        Add
    </button>
    <button id="button1" class="button" type="button" name="submitx" value="Submit form" 
    onclick="submitForm()">Submit</button>
</form>

javascript:

function addPeopleFunc() {
    var input = document.getElementById("inputpeople").value;
    const inputA = document.getElementById("inputpeople");
    if (input) {
        var table = document.getElementById("people");
        var newrow = table.insertRow(1);
        var cell0 = newrow.insertCell(0);
        var cell1 = newrow.insertCell(1);
        cell0.innerHTML = input;
        cell1.innerHTML = '<button class="button" type="button" name="dellrow" onclick="dellListFunc(this)">Delete';
        inputA.value = '';
    }
}

function submitForm() {
    people = document.getElementById("people");
    data = tableToJson(people);
    console.log(data);

}

flask:

@app.route('/new-roster', methods=('GET', 'POST'))
def newroster():
    return render_template('newroster.html')

any help would be much appreciated

Add a POST route to send the data to and make a fetch request to that endpoint with your JSON. — ggorlen, Aug 13 '22 at 23:20
@ggorlen could I get a bit more info on this? or could you piont me in the right direction to find out more about this? — Ezra, Aug 13 '22 at 23:48
Ass a general rule, is not a good idea. Is better to have o javascript object with the people data, modify that and create your html table based on that. When you want to send the data to flask, just send the javascript object as json. — Gonzalo Odiard, Aug 14 '22 at 04:02
@GonzaloOdiard how would one send the javascript object as json — Ezra, Aug 14 '22 at 04:26
There are multiple ways, see https://stackoverflow.com/questions/20001229/how-to-get-posted-json-in-flask , https://stackoverflow.com/questions/6418220/javascript-send-json-object-with-ajax , https://stackoverflow.com/questions/24468459/sending-a-json-to-server-and-retrieving-a-json-in-return-without-jquery and https://stackoverflow.com/questions/6418220/javascript-send-json-object-with-ajax. Flask documentation would be useful too https://flask.palletsprojects.com/en/2.2.x/patterns/javascript/ — Gonzalo Odiard, Aug 14 '22 at 04:52

how do I pass a html table to my flask app

0 Answers0