Clash Royale CLAN TAG#URR8PPP

how to run an ajax request on onchange event in select box of flask app

I have a flask app which have many select boxes. Each select box needs to be populated with data based on selection in previous select box. I am planning to use ajax for this. Every select box has to be submitted based on onchange event. And there is a final form submit button which will be submitted once all select boxes have some value selected.

onchange

javascript :

$(function()
$('select1').select(function()
$.ajax(
url: '/getdata',
data: $('form').serialize(),
type: 'POST',
success: function(response)
console.log(response);
,
error: function(error)
console.log(error);

);
);
);

</script>


html :

<form method="post" action="/getdata">
Project : <select name="select1" required>
<option></option>
% for p in project %
% for i in p %
<option> i </option>
% endfor %
% endfor %
</select>
</div>
<div class="col-md-6">
Task : <select name="category" required>
<option>----</option>
% for p in task %
% for i in p %
<option> i </option>
% endfor %
% endfor %
</select></div></div>
<div class="row p-t-20">
<div class="col-md-6">
Subtask : <select name="category" required>
<option>----</option>
</select></div>
<div class="col-md-6">
Category : <select name="category" required>
<option>----</option>
</select></div></div></from>


flask view :

@tt.route('/ti',methods = ['POST', 'GET'])
def report():
return render_template('ti.html')
@tt.route('/getdata',methods = ['POST', 'GET'])
def report():
project = request.form['select1']
~~~ Database codes ~~~~
return render_template(task=data)


How to populate, the database query result into next select box? I also need to do a final submit once all select boxes are selected with some data.

1 Answer
1

Fistly, make your second and third selectbox have no option.

Then do something likes:

$(document).on('onchange', '.select1', funtion()
$.ajax(
type:"POST",
url:"/sample.file.name",
data:$(this).val();
,
success:function (res)
console.log(res); //append this to next selectbox.
,
);
});

$(document).on('onchange', '.select1', funtion()
$.ajax(
type:"POST",
url:"/sample.file.name",
data:$(this).val();
,
success:function (res)
console.log(res); //append this to next selectbox.
,
);
});

In the /sample.file.name file:

#Select Project with post param named data

#Select Project with post param named data

#Then print it with the <option> tags

#Then print it with the <option> tags

=> Do this twice to apply it for the second selectbox.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.