Question

I am using the following code. Which is submitting fine with php and it appears success ajax action…after of implement AJAX and submitted an email… but in the email doesn’t show the email data, it’s blank….

HTML

<form id="sForm" action="submit.php" method="get">
<label>your e-mail: </label>
<input type="text" name="email"></input>
<input id="sub" type="submit" />

</form>
<div id="message_ajax"></div>
<div id="error"></div>

jQuery

$("#sub").click(function(){


var datastr = 'email'

$.ajax({
    type: 'GET',
    url: 'submit.php',
    data: datastr,
    beforeSend:function(){
            $('#message_ajax_wait').append('Loading...');
    },
    success:function(data){
            $('#message_ajax_wait').fadeOut(400);
            $("#message_ajax_done").append('done!');
    },
    error:function(){
            $('#error').append('sigh... lets fix... or its server fault');
    }
});

return false;

});

Look i removed “return false;” it can show the email data in e-mail inbox, BUT AJAX response didn’t work and redirected to ugly php page as submit.php which is coded to send email.

Can anyone help me?

Answer 1

You can use the .serialize() method to easily post all the fields within the form. So in your case:

var datastr = $("#sForm").serialize();

Or without adding it to a string first:

$.ajax({
    type: 'GET',
    url: 'submit.php',
    data: $("#sForm").serialize(),
    beforeSend:function(){
    ....
};