I have a Jquery that needs to capture form submission on the form submit and redirect to an AJAX call.
It also needs to capture data and redirect to an AJAX call on certain anchor presses:
The HTML anchor detection and functionality works perfectly, running on repeated anchor presses by the user, which triggers the AJAX correctly.
However, on the form submit is only catches the first form submission and does not capture later form submissions.
Both the anchors and forms are refreshed by the output from the AJAX call. The refreshed form has the same id as the original form on page load.
FIRST:
Anchors (works just fine)
$(document).on('click','table.picker a',function (e) {
e.preventDefault();
$.ajax({
type: "GET",
url: "calendar.php",
data: "date="+ encodeURIComponent($(this).data('dest')),
dataType: 'text',
success: function (response) {
$('#calendarZone').html(response);
calDates();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table class='picker'>
<tr>
<td><a href='/blahblah/#calendarZone' data-dest='2024-02-04' rel='nofollow' title='Last Month'><<<<</a></td>
<td class='calChoice'><form action='/somewhere' method='post' enctype='multipart/form-data' name='form1' id='form1'>
<select name='mm' id='mm'>
<option value='01'>January</option>
<option value='02' >February</option>
<option value='03'>March</option>
<option value='04' >April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08' >August</option>
<option value='09' >September</option>
<option value='10' >October</option>
<option value='11' >November</option>
<option value='12' >December</option>
</select>
<select name='yy' id='yy'>
<option value='2024'>2024</option>
<option value='2025'>2025</option>
<option value='2026'>2026</option>
</select>
<input name='submit' type='submit' value='Go' >
</form></td>
<td><a href='/blahblah/#calendarZone' data-dest='2024-04-04' rel='nofollow' title='Next Month'>>>>></a></td>
</tr>
</table>SECOND:
Form submit (only works on first usage)
$('#form1').on("submit", function (event) {
event.preventDefault();
console.log('caught');
var dated = $('#yy').val() + '-' + $('#mm').val() + '-01';
console.log('posted:' + dated);
$.ajax({
type: "GET",
url: "/calendar.php",
data: "date="+ encodeURIComponent(dated),
dataType: 'text',
success: function (response) {
$('#calendarZone').html(response);
calDates();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table class='picker'>
<tr>
<td><a href='/blahblah/#calendarZone' data-dest='2024-02-04' rel='nofollow' title='Last Month'><<<<</a></td>
<td class='calChoice'><form action='/somewhere' method='post' enctype='multipart/form-data' name='form1' id='form1'>
<select name='mm' id='mm'>
<option value='01'>January</option>
<option value='02' >February</option>
<option value='03'>March</option>
<option value='04' >April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08' >August</option>
<option value='09' >September</option>
<option value='10' >October</option>
<option value='11' >November</option>
<option value='12' >December</option>
</select>
<select name='yy' id='yy'>
<option value='2024'>2024</option>
<option value='2025'>2025</option>
<option value='2026'>2026</option>
</select>
<input name='submit' type='submit' value='Go' >
</form></td>
<td><a href='/blahblah/#calendarZone' data-dest='2024-04-04' rel='nofollow' title='Next Month'>>>>></a></td>
</tr>
</table>AJAX file output:
/calendar.php
<table class='picker'>
<tr>
<td><a href='/blahblah/#calendarZone' data-dest='2024-01-04' rel='nofollow' title='Last Month'><<<<</a></td>
<td class='calChoice'><form action='/somewhere' method='post' enctype='multipart/form-data' name='form1' id='form1'>
<select name='mm' id='mm'>
<option value='01'>January</option>
<option value='02' >February</option>
<option value='03'>March</option>
<option value='04' >April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08' >August</option>
<option value='09' >September</option>
<option value='10' >October</option>
<option value='11' >November</option>
<option value='12' >December</option>
</select>
<select name='yy' id='yy'>
<option value='2024'>2024</option>
<option value='2025'>2025</option>
<option value='2026'>2026</option>
</select>
<input name='submit' type='submit' value='Go' >
</form></td>
<td><a href='/blahblah/#calendarZone' data-dest='2024-03-04' rel='nofollow' title='Next Month'>>>>></a></td>
</tr>
</table>
I am suspecting that the form loaded from the AJAX doesn’t actually have the same id but I am unclear how to make the JQuery code detect the new ajax content and “find” the values within?
1