Form submits 1st via jQuery, 2nd via PHP - php

Question

I have a form which when submitted is processed via jQuery ajax call to a PHP script.
The 1st time the form is submitted, jQuery catches the event, runs the ajax call and PHP script and returns the data from the PHP script putting it in the required HTML elements.
However, if the submit button is pressed a 2nd time, the form is submitted normally and jQuery is unable to "preventDefault" so to speak. So the whole page is reloaded.
the jQuery code
$(document).ready(function() {
// catch form submittion
$('#user_account_form').submit(function(ev) {
// prevent default action and propagation
ev.preventDefault();
ev.stopPropagation();
// pull data from the form attributes
var href = $(this).attr('action');
var postData = $(this).serializeArray();
// run the ajax call
var request = $.ajax({
url: "view/jquery/" + href,
type: "post",
data: postData,
dataType: "json"
});
// ajax call completed?
// -- echo returned data to elements
request.done(function(data) {
// put the refreshed form (provided by PHP script) in the #user_account element
$('#user_account').html(data.form);
// put the system message (provided by PHP script) in the #sysmsg element
$('#sysmsg').html(data.sysmsg).delay(2000).fadeOut(100);
});
// on fail, log to console
request.fail(function(jqXHR, textStatus, errorThrown) {
console.log('error processing form data: ' + textStatus + " [" + errorThrown + "]");
});
});
});
the PHP code
this is basically a simple script that checks the entered data from the form
against the data in the database. If the entered password equals the database
password the database is updated, otherwise it will only return a system message
to the user that the password was incorrect.
I believe the fault is that I'm missing something in my jQuery code that makes jQuery catch the 2nd, 3rd, 4th, etc. submission.

Answer 1

Try:
$('#user_account_form').on('submit', function(ev) {});
Instead of:
$('#user_account_form').submit(function(ev) {});
This is because as I understood, your submit button is in the data that is refresh from the back end, which means that the button is not bound to any events as it's a completely new button. jQuery on will bind the event to all instances of that element, even if they are created in the future.
Important: If you use jQuery < 1.7, instead of on() use live().

Answer 2

Maybe try to use a counter so you'll know how many time you've clicked on your submit btn
$(document).ready(function() {
var counter = 0;
// catch form submittion
$('#user_account_form').submit(function(ev) {
// If first click
if(counter === 0){
// Do the preventDefault and ajax thing
}
else{
// Do nothing or what you expect for a >2nd click
}
// Increment counter
counter++;
})
});

Answer 3

After reading your posts about the PHP script building a completely new form and therefore not binding the submit button preventing jQuery from catching subsequent submissions, I figured "Why build a whole new form if I only need to refresh 1 or 2 fields?".
So I changed my PHP script to return only the data from the database of the changed fields and send that in a json format to my jQuery script. Then adjusted my jQuery script to read the json object, and put the new values into the corresponding fields.
Now it works as intended.
changed jQuery code
....
request.done(function(data) {
$('#email').val(data.email);
$('#sysmsg').html(data.sysmsg).delay(2000).fadeOut(100);
});
changed PHP code
....
$email = $main->getUserDetails('email');
$array = array("sysmsg" => $msg, "email" => $email);
$data = json_encode($array);
echo $data;
Thanks for your input all, it helped me figuring out what to change to improve my code.