This article illustrates some useful basic concepts that explain how it’s easy interacting with HTML forms using jQuery. I’ve prepared five practical step-by-step examples you can follow to learn quickly this argument. For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Simple characters counter

The first example is a simple character counter. Here is the result (try to write something into the input field below):

0

How can you implement it? Add an input field in your HTML document and a <span> tag for the counter in this way:

<input type="text" id="input-text"/><span id="count"></span>

Then add this JavaScript code into the <head> tag of your page or into an external JavaScript file:

$(document).ready(function() {
    $("input[id='input-text']").keyup(function count(){
        counter = $("input[id='input-text']").val().length;
            $("#count").html(counter);
    });
});

The previous script, on keyup event, gets the value and the length of the string contained into the input field with ID="input-text" and updates the DOM element with ID="count" (in this case the <span> tag) using the jQuery attribute html().

Characters countdown

Now we can try to implement a simple variant of the previous example to realize a script that displays the number of remaining available characters in an input field. Here is the result (try to write something into the input field below):

10 remaining chars

The HTML code is exactly the same of the previous example. I only changed the id property for the input and span tags.

<input type="text" id="input-text-2"/> <span id="count-2"></span>

Here is the JavaScript code that updates the counter:

$("input[id='input-text-2']").keyup(function countRemainingChars(){
    maxchars = 10;
    counter = $("input[id='input-text-2']").val().length;
    if(counter==0){
        $("#count-2").html(0 +" remaining chars")
    } else {
        $("#count-2").html(maxchars-counter+" remaining chars");
    }
});

In the code above I declared the variable maxchar to set the maximum number of allowed characters for the input field with id="input-text-2". On keyup event, the script gets the value and the length of the string contained into the input field with id="input-text-2" and updates the DOM element with ID="count-2” (in this case the <span> tag) with the difference between maxchars-counter or 0.

Basic form validation

This example illustrates how to implement a simple form validation. When the input element loses focus, an error message appears if the field is empty. Here is the result (try to select the input field and leave it blank):

Here is the HTML code:

<input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>

And here is the JavaScript code:

$("input[id='input-text-3']").blur(function validate(){
    el = $("input[id='input-text-3']");
    inputString = el.val();
    if(inputString==""){
         el.css({
            "background" : "red",
            "color" : "white"
        });
        $("#msg").html("This field can't be empty!");
    } else {
        el.css({
            "background" : "white",
            "color" : "black",
       });
    }
});

On blur event (when the input field loses focus), an error message appears if the field is empty and the background and text color of the input field change to red and white.

Pick values from a list

This example illustrates how it’s easy to add values into an input field picking them from a list. Here is the result (click on a list element, Smashing Magazine, Woork Up or Mashable):



Click on a website from the list:

  • Smashing Magazine
  • Woork Up
  • Mashable

The HTML code to implement this example is not complex: I added an unordered list that contains the list of values you can pick:

<input type="text" id="input-text-4" size="40"/>
<ul id="values">
    <li>Smashing Magazine</li>
    <li>Woork Up</li>
    <li>Mashable</li>
</ul>

And here is the JavaScript code:

$("ul[id='values'] li").click(function suggestValues(){
    input = $("input[id='input-text-4']");
    el = $(this).html();
      $(this).remove();
    newinput = input.val();
    newinput = (newinput + el + ", ");
    input.val(newinput);
  });

Naturally, this is a very basic example you can improve and customize how you prefer for your specific needs in your web projects.

Add elements into a list from a select field

This example illustrates how to add some value into an external list piking them from a select element. When you add a new element into the list, the selected option is contextually removed from the select element. I also added a nice fadeIn animation to improve the final effect.

    Here is the HTML code:

    <select id="my-list">
    <option value="1">Smashing Magazine</option>
    <option value="2">Woork Up</option>
    <option value="3">Mashable</option>
</select>
<input type="button" id="submit-list" value="Button"/>
<ul id="selected-items-list"></ul>

    And here is the JavaScript code:

    $("#submit-list").click(function selectItem(){
    s = $("option:selected")
    el = s.text();
    destination = $("#selected-items-list");
    $(destination).append('<li>'+el+'</li>');
    $(destination +':last').css('display', 'none').fadeIn(1000);
    $("option:selected").remove();
    if($('#my-list option').length==0){
        $('input[id=submit-list]').attr('disabled', 'disabled');
    }
});

    When you pick an option from the select element, the option it’s added into the destination list with id=selected-items-list using .append(). To remove the option for the select element you can use .remove(). When the select is empty you can disable the button using .attr().

    Conclusions

    In this post we’ve started learning how to use jQuery to interact with HTML forms. Obviously all concepts illustrated are very simple but easy to learn and useful to start using quickly jQuery. If you are a developer I suggest you to download my jQuery 1.3 Visual Cheat Sheet. Comments and suggestions are appreciated.