in Design

jQuery Working with Forms Part 1 – .focus()

jQuery Forms Part 1

As you probably already know jQuery is a cross-browser JavaScript library that simplify the client-side HTML scripting.

With jQuery is easy to navigate a document, select DOM elements, create animations, handle events, and develop AJAX Applications. In this next Tutorial I will show you how easy is to work with HTML forms.

jQuery Usage (Installation)

<html>
<head>
    <title>Your document title</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"> </script>
    <script>
    $(document).ready(function() {
        jquery code goes here...
    });
    </script>
</head>

<body>
    code goes here..
</body>
</html>

<script src=”http://code.jquery.com/jquery-latest.min.js”> </script> includes jquery library from jQuery official website. If you want to host the library on your own server download it from here.

$(document).ready(function() { jquery code goes here.. }); the code will load only when the DOM is completely loaded.

jQuery .focus() Event

Let first take .focus() event. Here’s an exemple of how to show a message when we focus on and input:

HTML

<style>
    small { display: none; }
</style>

<form id="form1">
    <p>
        <label>Username:</label><br />
        <input type="text" />
        <small>a-z 0-9 at least 6 characters</small>
    </p>
    <p>
        <label>Password:</label><br />
        <input type="password" />
        <small>at least 1 number included</small>
    </p>
</form>

<small> HTML tag is containing the messege so we first need to “hide” the message with css small { display: none; }. I added id=”form1″ to the HTML form so we can easily select the correct form with jQuery. Obviously <input /> is the element that will trigger the event, the rest HTML code is just for styling.

jQuery

$(document).ready(function() {

    $('form#form1 input').focus(function () {
        $(this).next('small').css('display', 'block');
    });

});

$(‘form#form1 input’) selects the HTML element that is used to trigger .focus() event. $(this) this reffers, again, to the form#form1 input we could also use $(‘form#form1 input’) but why to write more code when jQuery provides us with $(this). We need to select the next <small> tag that contains the message so we are going to use .next(‘small’). Displaying the message is easy with .css(‘display’, ‘block’) this is going to add an inline style to the <small> and overwrite the display: none; that we originaly set. Insted of .css() method you can use .show(), this will animate the width, height and opacity of the element.

jQuery .focus() Event Demo

Further Examples

Alert on Focus

$(document).ready(function() {

    $('form#form1 input').focus(function(event){
     	alert('You clicked an input');
	});

});

Alert on Focus Demo

Input background-color

$(document).ready(function() {

    $('form#form1 input').focus(function () {
    	$(this).css('background-color', '#DAF7C9');
	});

});

Background change on focus Demo

Download all Files

Download jQuery Examples

Part 2 next week, stay tuned!
You can connect online 70-680 and ccnp to pass mcitp exams in first try. Our best quality 350-001 and 640-816 tutorials guide you well for real exam.

Vlad

Co-Founder of TDM, full time Webdesigner. Follow on Twitter

Leave a Reply