How to Code Form Submission

There’s one form event that you need to know about when coding dynamic web forms with HTML5 forms and it’s a biggie: the 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.

You'll rarely, if ever, allow the submit event to occur directly. Instead, you’ll want to intercept the 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 the submit event gets triggered:

• When the user clicks a button or input element that resides within a <form> tag and has its type attribute set to submit
• When the user clicks a button element that resides within a <form> tag and has no type attribute
• When the user presses Enter or Return while a form element has the focus, and either a button or input element resides within the <form> tag and has its type attribute set to submit, or a button element resides within the <form> tag and has no type attribute
• 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. The submit 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’s serialize() 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's serializeArray() function:

$(<em>form</em>).serializeArray();

• form: A selector that specifies the form you want to work with

For example:

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 and div 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);
  });
});

Don’t forget to validate your form!