I have a registration page that uses de JQuery Validation plugin in a website that uses CakePHP framework. The code for submitting with validation looks like this:
$("#ClienteRegistroForm").submit(function(event){
event.preventDefault();
console.log("try submit");
if($(this).valid())
{
$(this).submit();
console.log("submitting form");
}
});
The submit button in the page sends the data to a PHP file as a POST. The problem I'm having is that when it validates, and processes the line:
$(this).submit()
It continues to submit the form multiple times and gets stuck. The console log shows this behaviour, the following is what the console print looks like:
The page stays frozen on the act, the php script never executes. The script should only be used to validate the form and let it submit and send the POST data to the php file.
Any ideas as to why is this happening? Even though I include the
event.preventDefault()
You're doing a submit()
inside a submit()
, making the function recursive. Try make the initial event handler on #ClienteRegistroForm
a click()
on the submit button itself. Something like
$("#ClienteRegistroForm input[type='submit']").click(function(event){
// code here
})
You are doing a recursive call to submit, what is happening is what was supposed to happen, you must try another approach.
You calling sumbit within your submit, so it is an endless loop. Try using an onclick instead on the button.
$(document).on("click", "#ClienteRegistroForm input[type='submit']", function(event){
event.preventDefault();
var form = $(this).closest("form");
console.log("try submit");
if(form.valid())
{
form.submit();
console.log("submitting form");
}
});