CODEWITHSUNDEEP
phpjavascriptjqueryajax
Dustin James
Dustin James

Reputation: 571

Jquery Ajax Request and PHP

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?

Upvotes: -1

Views: 446

Answers (4)

Undefined
Undefined

Reputation: 11429

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.

Upvotes: 3

user1418338
user1418338

Reputation: 254

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

Upvotes: 0

Sam Dufel
Sam Dufel

Reputation: 17608

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

Upvotes: 1

Hamza Waqas
Hamza Waqas

Reputation: 244

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

Upvotes: -1

Related Questions