submit event, which fires when the form data is to be sent to the server. Here's the general syntax:
$(form).submit(function(e) {
Submit code goes here
});
form: A selector that specifies the form you want to monitor for the submit event.e: This argument represents the event object.
submit so that you can gather the data and then send it to the server yourself using an Ajax call. Handling the submit event yourself gives you much more control over both what gets sent to the server and how what gets sent back from the server gets processed.
Triggering the submit event
Here's a list of the various ways that thesubmit event gets triggered:
- When the user clicks a
buttonorinputelement that resides within a<form>tag and has itstypeattribute set tosubmit - When the user clicks a
buttonelement that resides within a<form>tag and has notypeattribute - When the user presses Enter or Return while a form element has the focus, and either a
buttonorinputelement resides within the<form>tag and has itstypeattribute set tosubmit, or abuttonelement resides within the<form>tag and has notypeattribute - When your code runs jQuery's .
submit()method:
$(<em>form</em>).submit();
form: A selector that specifies the form you want to submit
Preventing the default form submission
You control the form submission yourself by sending the data to the server with an Ajax call. Thesubmit event doesn't know that, however, and it will try to submit the form data anyway. That’s a no-no, so you need to prevent the default form submission by using the event object’s preventDefault() method:
$('form').submit(function(e) {
e.preventDefault();
});
Preparing the data for submission
Before you can submit your form data, you need to convert it to a format that your server's PHP script can work with. The format depends on the Ajax request method you want to use:- GET: This format requires a string of name=value pairs, separated by ampersands (
&). To convert your form data to this format, use jQuery’sserialize()function:
$(<em>form</em>).serialize();
form: A selector that specifies the form you want to work with- POST: This format requires an array of key: value pairs, separated by commas (
,). To convert your form data to this format, use jQuery'sserializeArray()function:
$(<em>form</em>).serializeArray();
- form: A selector that specifies the form you want to work with
var formData = $('form').serialize();
Most commonly, your code stores the result of the serialize() or serializeArray() function in a variable, and that variable gets submitted to the server.
Submitting the form data
Now you're almost ready to submit the data. As an example, here’s some HTML code for a form anddiv that you can use to output the form results:
<form>
<div>
<label for="first">First name:</label>
<input id="first" type="text" name="first-name">
</div>
<div>
<label for="last">Last name:</label>
<input id="last" type="text" name="last-name">
</div>
<div>
<label for="nick">Nickname:</label>
<input id="nick" type="text" name="nickname">
</div>
<button type="submit">Submit</button>
</form>
<div class="output">
</div>
Now here’s the JavaScript/jQuery code that submits the form (using .get() in this case) and processes the result (which just echoes back the form data):
$('form').submit(function(e) {
// Prevent the default form submission
e.preventDefault(); // Convert the data to GET format
var formData = $(this).serialize();
// Submit the data using an Ajax GET request
$.get('php/echo-form-fields-get.php', formData, function(data) {
// Show the data returned by the server
$('.output').html(data);
});
});
An example form submission.Don’t forget to validate your form!