Flask AJAX Form Variable
Flask AJAX Form Variable
Joseph_Dougal
Posts: 2Questions: 1Answers: 0
I'm not able to retrieve the form variable in my flask app. Any thoughts?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datatables Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" class="text-center border border-dark p-5">
<p class="h4 mb-4">Info...</p>
<input type="text" id="html_to_ajax_id" class="form-control mb-4" placeholder="Users Full Name">
<button type="submit" class="btn btn-primary btn-block">Send</button>
</form>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
$('#example').DataTable({
"ajax": {
"data" : {"form_data_to_flask" : $("#html_to_ajax_id").val() },
"url": "/index_get_data",
"dataSrc": "data",
"type": 'POST',
"contentType":"application/json"
},
"columns": [
{"data": "name"},
{"data": "position"},
{"data": "office"},
{"data": "extn"},
{"data": "start_date"},
{"data": "salary"}
]
});
});
</script>
</body>
</html>
Flask:
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/index_get_data', methods=['POST'])
def index_get_data_function():
submitted = request.form['form_data_to_flask']
print(submitted)
data = {
"data": [
{
"id": "1",
"name": "John Q Public",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Larry Bird",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}]
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
Error:
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.HTTPException.wrap.<locals>.newcls: 400 Bad Request: KeyError: 'form_data_to_flask'
This discussion has been closed.
Answers
Thats a Flask error not a Datatables error. Not sure why the error is occurring without seeing it. I would start by using the browser's dev tools to see the request being sent from the browser. It looks like the ajax request should have the parameter
form_data_to_flask.Kevin
Hi Kevin -
Thanks for getting back to me. Understood that its a flask error but it appears the "data" value is not being passed into the post. A similar function works with AJAX outside of datatables.
Do you know how to send form data in the AJAX datatable post request?
The
ajax.datadocs have some examples. Maybe the third example is what you need to get the$("#html_to_ajax_id").val()value.Kevin