Jquery Ajax Request and PHP

Question

New to Jquery, even newer to Jquery Ajax calls - here is my problem:

I have a small form - email address submit - that fires to a PHP file which inserts the email into a table.

I want to do the following:

1. Handle the form submission through Ajax so there is no refresh
2. After successfully writing to the table I want to change the submit button's text to "Success!" for 3 seconds and then back to "Sign Up" with fadeIn and fadeOut effects.

Here is my code for the form:

<form action="" id="registerform" name="registerform" method="post" >
    <input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
    <button id="join" type="submit" name="join" onClick="validate()">Sign Up</button>
</form>

Here is my terrible attempt at handling the POST request through Jquery:

$('form').on('submit', function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});

Can anyone comment on how to make the Ajax request work (doesn't seem to be)?

Thanks in advance!

Update

Alright, the following block of Jquery adds the data to the table, however, my button text does not change:

 $('form').on('submit', function(e) {
        $.post('register.php', $("#registerform").serialize(), function() {
            $('#join').html('Success!')             
        });        
    //disable default action
    e.preventDefault();
    });

Any ideas now?

Answer 1

Here is an example of one of my ajax calls

details = "sendEmail=true&" + $("form").serialise();

$.ajax({
    url: "yourphppage.php",
    type: "post",
    data: details,
    success: function (data, textStatus, jqXHR) {
        if (data == "false") {
            console.log("There is a problem on the server, please try again later");    
        } else {
                //Do something with what is returned
        }
    }
})          

And on the server side

if (isset($_POST['sendEmail'])) {
  //Do something with the data
}

Of course this is only an example, and you may need to alter this to suit your needs :)

One thing to note is what if (data == "false") does. Well on the server side i can echo "false" to tell the ajax call it was not successful.

Answer 2

You're not actually sending any data to the server. You need to use the 'data' parameter of $.post to send your data.

$('form').on('submit', function(e) {
    $.post('register.php', $(this).serialize(), function() {
        $('#join').html('Success!');             
    });        
    //disable default action
    e.preventDefault();
});

Answer 3

Not sure, but does the POST request send anything at all? Try adding the data in the POST request.

$('form#registerform').submit(function() {
  var email = $(this).find('input[name=email]').val();
  $.post('register.php', {email: email}, function() {
    $('#join').html('Success!');             
  }); 

  return false;
});

Answer 4

Where you're pushing your form data to server in ajax call? change code to this.

var data = {$("#email").val()};
$('form').submit(data ,function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});