Awesome jQuery snippets to work with forms

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;


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;


Find is a checkbox is checked

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



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:



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()); 


Submit form programmatically

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



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, "disabledOnSubmit") == 'undefined') {, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      return true;
      return false;


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='" + + "']").addClass("labelfocus");
}).blur(function() {


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' />");


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.

    $.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>';


  • 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!

  • Nice work! I really appreciate the trick about populating the select with json.
    the line
    should be changed in
    for newer versions of jquery (from version 1.6.1 and up)

    • Much easier to understand is:

  • For checkboxes i do :


  • steve j

    Often “clear form data” just means “reset.” So don’t overlook the simple way:

  • … and Francesco’s comment applies to the disabled attribute as well:

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

  • 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.

  • Especially the multiple submit section is very useful. Thanks

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

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

  • 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 as I actually find it lighter in some instances such as this. All depends on what library your using I guess.

  • 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.srcElement;
    if (target.type !== “textarea” && e.which === 13) {