I'm having issues handling the submission of similar forms using the same submit function. My website imports event-data from Google cal, and depending on how many events there are, it creates similar forms for each event, using a foreach-loop. But I can't get the submission to work properly, giving the feedback message intended. Instead the page gets reloaded. This is the foreach-loop (php):
foreach ($feed->entry as $entry) {
$eventdetail = ...
$when_atr = ...
$title = ...
...
echo '<form method="post" class="formClass" action="" >
<fieldset>
<table>
<tr>
<td><label for="header"><b><font face="georgia, garamond" color="#303030">Header:</font></b></label>
<input type="text" name="header" id ="header" class="input" value="'.$title.'" /></td>
...
...
</tr>
</table>
</fieldset>
<input type="submit" value="Add!" class="button" id="submit" name="submit" />
</form>';
}
And this is my Submit-function:
$(document).ready(function(){
$("form.formclass").submit( function (event) {
event.preventDefault();
if(checkdate(this.date)){
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "add_event.php",
data: formdata,
success: function() {
$('#form').html("<div id='message'></div>");
$('#message').html("<h2>Event added!</h2>")
.append("<p>See you there.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='onewebmedia/message-512.png' />");
});
}
});
}
return false;
});
});
I've thought about giving every form their own ID, but can I use that approach without having to write different functions for all forms? Or is there another approach that is better? It seems like the communication between the forms and the function doesn't work at all at the moment, when I click the submit-button, the page gets reloaded and not even the checkdate-function is called, which implies that there is something wrong with the communication between the form and the function.