I have a table in html, which is filled with data that the user adds, so the table can have an infinite number of rows.
this window with the table is started using flask with python, from main.py
table.html
<div class="row">
<div class="col-md-12">
<table class="table" id="table-est_perd">
<thead>
<tr>
<th scope="col">dato 1</th>
<th scope="col">dato 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-warning btn-lg float-right" id="send-data">Siguiente</button>
</div>
</div>
main.py
@app.route('/table', methods=['POST'])
def table():
return render_template("table.html")
I use a script to add rows to the table according to the user's wishes, but now I need to send all the information from the table to another template.
Although using a script and successfully complete the entire table and get the data, I could not send it to another layout.
main.py
@app.route('/sub_form2', methods=['POST'])
def submitted_form2():
dataset = request.get_json(force=True)
d1 = dataset['d1']
d2 = dataset['d2']
return render_template(
"submitted_form2.html",
d1=d1,
d2=d2,
)
in table.html and tried to use a script that allows the button id=send-data to send data from the table but nothing seems to work.
here my script:
table.js
$("#send-data").click(function(){
var c1 = new Array();
var c2 = new Array();
$("#table-est_perd tbody tr").each(function(index){
$(this).children("td").each(function(index2){
switch(index2){
case 0:
var x = $(this).text();
c1.push(x);
break;
case 1:
var x = $(this).text();
c2.push(x);
break;
}
});
});
alert(c1 + ' - ' + c2);
$.ajax({
type : "POST",
url : "/sub_form2",
contentType : "application/json; charset=utf-8",
data : JSON.stringify({"d1": c1, "d2": c2}),
dataType: "json",
success: function(data) {
alert('data: ' + data);
}
});
});
submitted_form2.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Submitted form</title>
</head>
<body>
<p>Datos enviados:</p>
<p>
<strong>datos 1: </strong> {{d1}} <br>
<strong>datos 2: </strong> {{d2}} <br>
</p>
</body>
</html>
such that, what I need is to visualize the data of the table in another layout, but ajax does not seem to do anything, by pressing the button with id="send-data" nothing happens, the layout submitted_form2.html does not appear, never changes the layout of the current table, but in the script part alert(c1 + ' - ' + c2); works perfect and shows me an array of data.
Is there a way to pass information from one layout to another in Flask without using inputs or forms ?
I have also used postman to post to /submitted_form2 sending a json and if it works, return the page I need and show the data I require.
thanks in advance.