How to use jquery ajax with a form submission

Question

Changed the code to this now. Form is located in subscribe.php which in included into the index page.

<form class="subscribe" id="email" method="get">
    <input class="email" id="emailaddress" name="email" type="text" placeholder="[email protected]" required>
    <input class="button" type="submit" id="emailSub" value="Subscribe">
</form>
<div id="subResult"></div>

Jquery is at bottom of the index page

$(document).ready(function() {
    $('#emailSub').click(function() {
        var email = $('#emailaddress').val();
        alert(email);
        $.ajax({
            type: "GET",
            dataType: 'script', //<-Data Type for AJAX Requests(xml | html | script | json)
            url: 'checksub.php',
            data: {
                'e': email
            },
            success: function(result) {
                $("#subResult").html(result);
            }
        });
    })
});

Checksub page is this now for testing.

<?php include 'admin/includes/db_connection.php'; ?>
<?php 
$email = mysqli_real_escape_string($db, $_GET['e']);
echo "test string:";
echo $email;
?>

Zach · Accepted Answer · 2013-04-02 19:44:50Z

3

Are you preventing the default click event from firing submit?

$('#emailSub').click(function(e){
    e.preventDefault();
    var email = $('#emailaddress').val();
    $.ajax({url:"checkemail.php?e="+email,success:function(result){
        $("#subResult").html(result);
    }});
})

answered Apr 2, 2013 at 19:44

Zach

3,2171 gold badge23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pierce McGeough Over a year ago

I now have this $('#emailSub').click(function(e){ e.preventDefault(); var email = $('#emailaddress').val(); $.post({url:"checksub.php", {e:email},function(result){ $("#subResult").html(result); }}); })

Zach Over a year ago

Great! I didn't catch that. You can use $.post or alternatively you can manually serialize the form $.ajax({url:"checksub.php", data:$('#email').serialize(),type: 'POST',success:function(result){ $("#subResult").html(result); }});

Zach Over a year ago

Are you using checkemail.php or checksub.php? Your form shows it uses action="subscribe.php"

Hauke Ingmar Schmidt · Accepted Answer · 2013-04-03 04:32:39Z

2

maybe you should to change dataType? try it:

$.ajax({
    type: "GET",
    dataType: 'html', //<-Data Type for AJAX Requests(xml | html | script | json)
    url: 'checkemail.php',
    data: {
        'e': email
    },
    success: function(data) {
        $("#subResult").html(result);
    }
});

and

<input class="button" type="submit" id="emailSub" value="Subscribe">
                              ^ HERE

should be :

<input class="button" type="button" id="emailSub" value="Subscribe">

because of submit is submiting form and refreshing the page.. so jquery not work..

Specifying the Data Type for AJAX Requests

edited Apr 3, 2013 at 4:32

Hauke Ingmar Schmidt

11.6k1 gold badge44 silver badges51 bronze badges

answered Apr 2, 2013 at 20:04

mehdi

1,7552 gold badges15 silver badges21 bronze badges

10 Comments

Pierce McGeough Over a year ago

Can i test the ajax itself first. I have checkemail.php echoing 'test' and nothing is showing up

mehdi Over a year ago

your jquery code is correct.. i guess the problem is in php file, test the php file..

Pierce McGeough Over a year ago

Its all changed im using checksub.php but I have everything changed appropriatly

Pierce McGeough Over a year ago

Yes jquery is linked in. I edited the code so you can see all the pages with code now. I can alert the email I enter successfully so jquery is working

mehdi Over a year ago

so change the php file to <?php echo "test"; ?> and try again, if error : then error is in your included file..

|

Collectives™ on Stack Overflow

How to use jquery ajax with a form submission

2 Answers 2

3 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related