- Design
jQuery Working with Forms Part 1 – .focus()
in Design
jQuery Working with Forms Part 1 – .focus()
Writen by Vlad / Comments Off on jQuery Working with Forms Part 1 – .focus()
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.
Further Examples
Alert on Focus
$(document).ready(function() {
$('form#form1 input').focus(function(event){
alert('You clicked an input');
});
});
Input background-color
$(document).ready(function() {
$('form#form1 input').focus(function () {
$(this).css('background-color', '#DAF7C9');
});
});
Download all Files
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.
Subscribers
Followers
