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,2071 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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

10 Comments

Related