Solved

Submit form (methd post) with jQuery/AJAX

Posted on 2009-07-13
1
932 Views
Last Modified: 2012-05-07
How can I submit my form with AJAX using jQuery?  It must be sent method=post.

This code submits NO data. I want to submit the data in my form using jQuery.  This code submits blank.  While it connects to submit.php, no data is submitted.
<form action="submit.php" method="post">

<p><label for="name"><strong>Name</strong><em class="required"></em></label><span class="transInput"><input type="text" name="name" id="name" class="i1" /></span></p>

<p><label for="email"><strong>Email</strong><em class="required"></em></label><span class="transInput"><input type="text" name="email" id="email" class="i1" /></span><input type="text" name="spmchk" class="spmchk" /></p>

<p><label for="website"><strong>Website</strong></label><span class="transInput"><input type="text" name="website" id="website" class="i1" /></span></p>

<p><label for="comments"><strong>Message</strong><em class="required"></em></p></div><textarea rows="6" cols="55" name="comments" id="comments"></textarea></p>

<p class="submitLeft"><input type="submit" value="submit" class="submitLeftInput" id="submitButton" /></p>

</form> 
 

<script type="text/javascript">

$(document).ready(function() { 

    //if submit button is clicked   

    $('#submitButton').click(function () {           

     $.post('/submit.php');         

    return false; //cancel the submit button default behaviours

    });   

});

</script>

Open in new window

0
Comment
Question by:hankknight
1 Comment
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 24838923
Implement the submit method of the form.
In the code snippet I added the id attribute on the form (just to get it via jquery)
You might want to implement a callback function (hide the form, display some results)
<form id="myForm" action="submit.php" method="post">

<p><label for="name"><strong>Name</strong><em class="required"></em></label><span class="transInput"><input type="text" name="name" id="name" class="i1" /></span></p>

<p><label for="email"><strong>Email</strong><em class="required"></em></label><span class="transInput"><input type="text" name="email" id="email" class="i1" /></span><input type="text" name="spmchk" class="spmchk" /></p>

<p><label for="website"><strong>Website</strong></label><span class="transInput"><input type="text" name="website" id="website" class="i1" /></span></p>

<p><label for="comments"><strong>Message</strong><em class="required"></em></p></div><textarea rows="6" cols="55" name="comments" id="comments"></textarea></p>

<p class="submitLeft"><input type="submit" value="submit" class="submitLeftInput" id="submitButton" /></p>

</form> 

 

<script type="text/javascript">

$(document).ready(function() { 

    $('#myForm').submit(function () {

        var myForm = $("#myForm");

        $.post("submit.php", myForm.serialize(), [yourCallbackFunction]);

        return false;

    });

});

</script>

Open in new window

0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now