Question

I am trying to use jQuery for the first time, and my POST function using .ajax is giving me grief.
The POST is successful; my PHP page runs the MySQL query correctly and the newly created user ID is returned. The only problem is that instead of running the ‘success’ function; it simply loads the PHP page that I called, which simply echoes the user ID.

Here’s the jQuery function:

function register() {
$.ajax({
    type: "POST",
    url: 'sendRegistration.php',
    data: dataString,
    datatype: 'html',
    success: function(response){alert(response);},
    complete: function(response,textStatus){console.log(textStatus);},
    error: function(response){alert(response);}
});
}

… and the PHP return stuff:

    // Create a new send & recieve object to store and retrieve the data
    $sender = new sendRecieve();
    $custId = $sender->submitUser($userVars);
    if ($custId != 0) {
        echo $custId;
    } else {
        echo "Database connection problems...";
    }

The database object is created, and then the php page from the ‘url’ parameter loads, displaying the id that the $sender->submitUser() function returns.

Ideally, I would like it to never display the ‘sendRegistration.php’ page, but run another js function.

I’m sure there’s a simple solution, but I’ve not been able to find it after hours of searching.

Thanks for your help.

Answer 1

You are likely handling this from a form. If you don’t prevent the default form submittal process of the browser, the page will redirect to the action url of the form. If there is no action in form, the current page will reload, which is most likely what is happening in your case.

To prevent this use either of the following methods

$('form').submit(function(event){
    /* this method before AJAX code*/
    event.preventDefault()    

        /* OR*/

      /* this method after all other code in handler*/
      return false;
})

The same methods apply if you are sending the AJAX from a click handler on the form submit button