so ive an HTML page that have multiple generated forms:
{% for row in data %}
<form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
<input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_{{ row[0][1] }}" value="{{ row[0][1] }}"></input>
<button type="submit" class="btn btn-success aggiorna_app">
<i class="fa fa-check"></i>
</button>
</form>
{% endfor %}
row[0][1] contains the id of the row.
Im trying to send ajax requests from every single one of them, but i get the same ID of the frist row from every row.
This is the Javascript
$(document).ready(function() { $(".aggiorna_app").click(function(event) {
//prevent submit
event.preventDefault(); //Thx @alex
//do things on submit
$.ajax({
data : {
tipo_richiesta : "inserisci_intervento",
id : $('#id_pratica').val(),
data_int : $('#data_int').val(),
ora_int : $('#ora_int').val()
},
type: "POST",
url: "/aggiorna_pratica",
beforeSend: function(){
//Before send data
},
success: function(data){
console.log(data);
}
});
}); });
I know im a newbie but i could really use some help
Here is a working example to test your click event. The click event is on .aggoriorna_app
buttons inside each form, but the id being passed into the ajax call looks to be grabbing the .val()
every time, eg, $('#id_pratica').val()
. You'll see in my example that when a button is clicked, find the nearest input value and set the ajax id to that value. I assume that's what you need.
$(document).ready(function() { $(".aggiorna_app").click(function(event) { //prevent submit event.preventDefault(); //Thx @alex var id = $(this).parent().find('input').val(); alert(id); }); });
form { margin-bottom: 3rem; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}"> <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_1" value="input_1"></input> <button type="submit" class="btn btn-success aggiorna_app"> <i class="fa fa-check"></i>CLICK ME </button> </form> <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}"> <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_2" value="input_2"></input> <button type="submit" class="btn btn-success aggiorna_app"> <i class="fa fa-check"></i>CLICK ME </button> </form> <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}"> <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_3" value="input_3"></input> <button type="submit" class="btn btn-success aggiorna_app"> <i class="fa fa-check"></i>CLICK ME </button> </form> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.