Submit Form With JavaScript

Recently I was asked how submit a form with JavaScript… and I didn’t have a solid answer for them. The shame! So, like a teacher having the class write ‘I will not talk in class’ over and over as punishment, here are a few various ways to submit a basic form in JavaScript.

The Standard Form Submit

Here is the basic form we’re working with:

Standard Form Submit
1
2
3
4
5
6
7
8
9
10
11

<html><body>
<form name="submit_with_button" action="success.html">
  <fieldset>
      <legend>Submit form with button</legend>
      <label for="email">Email Address</label>
      <input type="text" id="email" name="email" />
      <input type="submit" value="Submit" />
      <p>Standard method with a submit button</p>
  </fieldset>
</form>
</body></html>

Submit with a JavaScript Function

In this example we call a JavaScript function from the link, and that function submits the form. This method is fine, but it’s generally bad form to put JavaScript functions in a link’s href.

Submit with a JavaScript Function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html><body>
<form name="submit_with_js" action="success.html">
  <fieldset>
      <legend>Submit form with JavaScript</legend>
      <label for="email">Email Address</label>
      <input type="text" id="email" name="email_js" />
      <a id="submit_js" href="javascript: submitform()">Submit</a>
  </fieldset>
  <script>
      function submitform() {
          document.submit_with_js.submit();
      };
  </script>
</form>
</body></html>

Submit with jQuery

This method still depends on the action tag, but just triggers the submit() function. Use return false to stop the link being executed.

Submit with jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html><body>
<form name="submit_with_jquery" action="success.html">
  <fieldset>
      <legend>Submit form with jQuery</legend>
      <label for="email">Email Address</label>
      <input type="text" id="email" name="email_jquery" />
      <a id="submit_jquery" href="#">Submit</a>
  </fieldset>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
      $('#submit_jquery').click(function(){
          $('form[name="submit_with_jquery"]').submit();
          return false;
      });
  </script>
</form>
</body></html>

Submit with jQuery AJAX

Using the jQuery post function here (a subset of $.ajax()), we submit the form asynchronously and return back any resulting data. In this example I’m returning back the success message in an alert. I’m also using javascript:void(0) in the submit link href rather than a #. This way, even if the link is executed, the URL isn’t modified and the page doesn’t jump.

AJAX Form Submit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html><body>
<form name="submit_with_jquery_ajax" action="success.html">
  <fieldset>
      <legend>Submit form with jQuery AJAX</legend>
      <label for="email">Email Address</label>
      <input type="text" id="email" name="email_ajax" />
      <a id="submit_ajax" href="javascript:void(0)">Submit</a>
  </fieldset>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
      $('#submit_ajax').click(function(){
          //Grab action from the form if it's there
          if ( $('form[name="submit_with_jquery_ajax"]').attr('action') ) {
              myAction = $('form[name="submit_with_jquery_ajax"]').attr('action');
          } else {
              myAction = 'success.html';
          };
          $.post(myAction, function(data) {
              alert(data);
          });
          return false;
      });
  </script>
</form>
</body></html>

You can download all these examples from Github