Awesome jQuery snippets to work with forms

by Jean. 13 Comments -

Forms are definitely a very important part of a website, but they can be also a bit tricky to handle. To help you working more easily with HTML forms, I have compiled some very useful jQuery code snippets from my personal snippet library in this article.

Disable “enter” key in your forms

If you want to prevent visitors to accidentally submit your form by hitting the “enter” key, you can use this snippet to disable the use of the “enter” key in your forms.

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

Source: http://www.catswhocode.com/blog/10-awesome-jquery-snippets

Clear form data

Need to clear all form data? Here’s a handy function to do it.

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Source: http://www.jquery4u.com/forms/jquery-function-clear-form-data/#.UI02J2knDF8

Find is a checkbox is checked

Find out if a single checkbox is checked or not. The function will returns true or false:

$('#checkBox').attr('checked');

Source: http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html

Enable/Disable form elements

Want to make your forms more user-friendly? Then you can enable or disable form elements such as the submit button. For example, you can have it disabled by default and enable it only if the form has been properly filled by the visitor.

$("#submit-button").attr("disabled", true);

And to re-enable a previously disabled input:

$("#submit-button").removeAttr("disabled");

Source: http://css-tricks.com/snippets/jquery/disable-re-enable-inputs/

Enable submit button if text entered

Here’s a variant of the above snippet, this time allowing you to automatically enable the submit button if some text is entered in a #username input field.

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val()); 
});

Source: http://cakebaker.42dh.com/2009/01/13/enabling-submit-button-if-text-entered/

Submit form programmatically

Super simple but definitely useful: Here’s how to submit a form programmatically using jQuery.

$("#myform").submit();

Source: http://www.jquery4u.com/snippets/jquery-simulate-form-submit/

Prevent multiple submit of your form

Multiple submissions of the same form is definitely one of the most common problem seen when working with web forms. Here’s a super useful piece of code to prevent multiple submissions of the same form.

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

Source: http://damienalexandre.fr/post/2009/08/02/jQuery-eviter-la-soumission-multiple-d-un-formulaire

Highlight related label when input in focus

Another way to make your form easier to fill for your visitors: Highlight related label when input in focus. Here’s some jQuery goodness to help.

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

Source: http://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/

Dynamically add form elements

If you need to dynamically add form elements, the snippet below is a simple way to do it.

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("<input type='text' name='password2' id='password2' />");
});

Source: http://www.jquery4u.com/forms/jquery-dynamically-add-form-elements/

Auto-populating select boxes using Ajax & JSON

When building an interactive form, it is very useful to be able to get some data with ajax and use it to populate a select element.
The following snippet shows how to get data from a php file named select.php (line 3) and populate a select element with it.

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

Source: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

  • Christoffer Wolgast

    Some of the snippets you posted are already outdated since version 1.5 when ‘prop’ is supposed to be used instead of ‘attr’. Good collection though!

  • http://www.bitzero.it francesco campana

    Nice work! I really appreciate the trick about populating the select with json.
    However
    the line
    $(‘#checkBox’).attr(‘checked’);
    should be changed in
    $(‘#checkBox’).prop(‘checked’);
    for newer versions of jquery (from version 1.6.1 and up)

    • http://www.zmajevognezdo.com/ Predrag Krstic

      Much easier to understand is:
      $(‘#checkBox’).is(‘:checked’);

  • http://www.jeanphilippebellon.com ReBleach

    For checkboxes i do :

    $(‘#checkBox’).is(‘:checked’);

  • steve j

    Often “clear form data” just means “reset.” So don’t overlook the simple way: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357

  • https://twitter.com/joldag Jan-Hendrik Oldag

    … and Francesco’s comment applies to the disabled attribute as well: http://api.jquery.com/prop/#prop2

    While the attr() method is working it does not return booleans.

  • http://www.installedforyou.com Jeff

    I like this article, and there are a couple of useful tips. However, I think “Enable submit button if text entered” isn’t terribly useful.

    This tip will enable the submit button when a key is pressed, but doesn’t disable it if the text is deleted. It’s only 1/2 a tip really, or mislabeled.

  • http://www.stevendobbelaere.be Steven Dobbelaere

    Especially the multiple submit section is very useful. Thanks

  • http://www.activatenutrition.co.uk Mark

    Great piece. I need to work on the forms side of things and this has helped a lot! Thanks

  • http://www.nuvocreative.com.au Marcus

    Hi I tried Dynamic form element script & not working… Got error 404. Can someone help?

  • http://www.reynoldsdigital.com Barry Reynolds

    Forgive me if I’m wrong but I think:
    $(“#form”).keypress(function(e) {
    if (e.which == 13) {
    return false;
    }
    });
    Is actually outdated now?
    I’m using straight javascript on www.reynoldsdigital.com as I actually find it lighter in some instances such as this. All depends on what library your using I guess.

  • http://mylinerider.com Gilbert

    Is there a way to catch the result of a form?
    For example if the form is to subscribe a person to an email list, the email list provider sends back a response that “usually’ replace the page with another page.

    I am trying to build a page that will provide the feedback within it (AJAX style).
    Is that possible? How?

  • totels

    The enter/return key used on a textarea is a valid and useful event that does not submit the form. You may want to add an exception

    var target = e.target || e.srcElement;
    if (target.type !== “textarea” && e.which === 13) {

    }