CODEWITHSUNDEEP
phpjqueryajax
Dusty
Dusty

Reputation: 173

Form submits 1st via jQuery, 2nd via PHP

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.

Upvotes: 0

Views: 52

Answers (3)

Dusty
Dusty

Reputation: 173

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.

Upvotes: 0

Thanasis Pap
Thanasis Pap

Reputation: 2051

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().

Upvotes: 1

jibe
jibe

Reputation: 645

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++;
    })
});

Upvotes: 0

Related Questions