I have a form generated by PHP:
<form id="change_status_form" name="change_status_form">
<input name="booking_int" type="hidden" value="'.$upcoming_bookings[$x]['booking_int'].'"> <select name="booking_status" onchange="change_status();">
<option selected value="0">
Not Yet Arrived
</option>
<option value="1">
Seated
</option>
<option value="4">
Cancelled
</option>
<option value="5">
No Show
</option>
</select>
this will submit the data onchange to ajax:
function change_status() {
$.post('dash_includes/dash_change_booking_status.php', {
booking_status: change_status_form.booking_status.value,
booking_int: change_status_form.booking_int.value
}, function(output) {
$('#all_bookings_div').load('dash_includes/dash_display_all_bookings.php').fadeIn("slow");
});
}
Once it is submitted it'll post the data to dash_change_booking_status.php. This works great once, but I need to repeat the form multiple times, without knowing how many times. When I do this then the ajax will only work on the first one.
I believe that this is to do with the id of the form and that I should change it to class. Can anyone tell me how to a) change the class of the forms, and b) how to then post the data?
On a sidenote, if I add to the bottom of my form, it stops posting it!!
Based on your question, it seems you are generating contents dynamically and it works only first time. Below code should do the trick without getting involved in class or id.
Can you replace <select name="booking_status" onchange="change_status();"> with <select name="booking_status" class = 'booking_status'>
$(document).on("change", "select.booking_status", function(){
var $form = $(this).parents('form:first');
$.post('dash_includes/dash_change_booking_status.php', {
booking_status: $form.find("select[name='booking_status']").val(),
booking_int: $form.find("input[name='booking_int']").val()
}, function(output) {
$('#all_bookings_div').load('dash_includes/dash_display_all_bookings.php').fadeIn("slow");
});
});
You could just change the $('#booking_status') to $('.booking_status') but then you will have multiple values to your query, You need to wrap each individual form in a unique wrapper class or id
<form id="form1">
<input type="text" class="booking_status">
</form>
And then get the data by using:
$('#form1 .booking_status').val()
You can pass the id of the form to your onchange function.