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):
0How 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
keyupevent, gets the value and the length of the string contained into the input field withID="input-text"and updates the DOM element withID="count"(in this case the<span>tag) using the jQuery attributehtml().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 charsThe HTML code is exactly the same of the previous example. I only changed the
idproperty for theinputandspantags.<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
maxcharto set the maximum number of allowed characters for the input field withid="input-text-2". Onkeyupevent, the script gets the value and the length of the string contained into the input field withid="input-text-2"and updates the DOM element withID="count-2” (in this case the<span>tag) with the difference betweenmaxchars-counteror0.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
blurevent (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
selectelement. When you add a new element into the list, the selected option is contextually removed from theselectelement. I also added a nicefadeInanimation 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
selectelement, the option it’s added into the destination list withid=selected-items-listusing.append(). To remove the option for theselectelement you can use.remove(). When theselectis 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.
Posted via web from GLTSS
No comments:
Post a Comment