How to read a custom html table information from client side into flask backend

Question

What i exactly want to do is as follows: I want to allow the user to add the number of rows he desires and fill information in them. After he clicks the submit button the data entered in the table should be processed by flask. How do i fetch the custom table from client side into my server . Answers with code demo appreciated( I am beginner hence).

Answer 1

Here is an example of a table with three columns, and the user can dynamically adds as many rows as needed, and then when submit button gets clicked we collect the data and send them to the server, here is the client side code, I made some styles to make it look well.

$("#add_rows").click(function() {
      // each click on the `+` button adds a row to the table
      $("#data_container tbody").append(`<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>`);
    });
    $("#submit_rows").click(function() {
      // `obj` for storing the inputs, and the `n` to make unrepeated keys
      var obj = {}, n = 0;
      // loop over the rows
      $("#data_container tbody tr").each(function(ind, tr) {
        // add an array to the object
        obj[`r${n}`] = [];
        // loop over the inputs of this row
        $(this).find("input").each(function(ind, input) {
          // add the value of the input to the array and make sure to remove any semicolon since
          // we will use it to separate the inputs
          var val = input.value.replace(/;/g, "");
          obj[`r${n}`].push(val);
        });
        // no need for the array, just join it to a string of values separated by semicolons
        obj[`r${n}`] = obj[`r${n}`].join(";");
        // increase the value of `n`
        n++;
      });
      // log the object to the console so you can see what we are sending
      console.log(obj);
      // send the data to the server, see the console for a logging message for success
      $.post("http://127.0.0.1:3000", obj, (data, status) => console.log("Status: " + status));
    });

* {
  box-sizing: border-box;
}
#data_container {
  border: 1px solid green;
  width: 500px;
  border-radius: 5px;
  padding: 3px;
  background: radial-gradient(lightgreen, green);
  position: relative;
  font-family: monospace;
  font-size: 24px;
}
#data_container th {
  background-color: lightgreen;
  color: white;
  border-radius: 5px 5px 0 0;
}
#data_container td, th {
  width: 33%;
  height: 40px;
  border: 1px solid green;
}
#data_container input {
  width: 100%;
  height: 100%;
  border-color: #aaa;
  font-size: 24px;
}
#add_rows, #submit_rows {
  height: 50px;
  position: absolute;
  background-color: lightgreen;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: yellow;
}
#add_rows {
  width: 50px;
  bottom: -25px;
  right: -25px;
  border-radius: 50%;
  font-size: 48px;
}
#submit_rows {
  width: 100%;
  bottom: -30px;
  left: 0;
  border-bottom-left-radius: 50%;
  z-index: -1;
  font-variant: small-caps;
  letter-spacing: 10px;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data_container">
  <form>
    <table>
      <thead>
        <tr><th>Name</th><th>Job</th><th>Country</th></tr>
      </thead>
      <tbody>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
      </tbody>
    </table>
  </form>
  <button id="submit_rows">Submit</button>
  <button id="add_rows">+</button>
</div>

And here is the backend code, since you use Flask, I did the same

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def get_table_data():
  # if the method is POST then the user is submitting a form otherwise he's just requesting the rendered document page
  if request.method == "POST":
    print("Posting data")
    for input in request.form:
      row = request.form[input].split(";")
      print("--------------------------")
      print("Name: " + row[0]);
      print("Job: " + row[1]);
      print("Country " + row[2]);
      # I'm just printing it but you can do whatever you want with the data
  # always the same page only for testing
  return render_template("Table_send.html")

app.run(host = '127.0.0.1', port = 3000, debug = False)

If you are not familiar with Flask then you need to know these:

1. create a folder named "templates" in the same directory with the python script for server
2. run the script normally for example python server.py no need for Flask run ... and environment variable adding...
3. keep learning and happy coding :)

---

Test with three rows on client side

Getting data on backend side and printing'em out

Posting data
--------------------------
Name: Bobby
Job: Programmer
Country Canada
--------------------------
Name: Maria
Job: Designer
Country USA
--------------------------
Name: Michael
Job: Instructor
Country Germany