JAVASCRIPT

Focusing and Blurring Elements with the jQuery JavaScript Library

If you’re a web designer who’s looking for a JavaScript library that lets you develop powerful client-side applications by using a friendly programming interface, then I have great news for you. This series of articles gets you started using the most relevant features that comes packaged with the jQuery JavaScript framework. You'll be able to get the most out of this useful piece of software in a very short time. This is the fifth article in an eight-part series.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 09, 2009

TABLE OF CONTENTS:

In accordance with the concepts deployed in the section you just read, jQuery makes it really easy to check whether or not a specified web form has been submitted. Of course, as you may have guessed, it provides a specific method, not surprisingly called “submit(),” which can be used to perform this task in a simple manner.

Please pay close attention to the following code sample, which demonstrates how to use this brand new submit() method in a concrete situation. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with submit event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("form").submit(function(){

alert('Submitting form data now...');

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with submit event</h1>

<p>First Name: <input type="text" name="fname" /></p>

<p>Email : <input type="text" name="email" /></p>

</form>

</body>

</html>

As you can see, the above hands-on example illustrates how to use the aforementioned submit() method to intercept the submission of a specified web form. In this particular case, the method is used to display a trivial alert box before submitting the targeted online form.

However, this basic code sample should give you a clear idea of how the submit() method works, in case you want to implement it within your own web applications.

And with this final example, I’m wrapping up this fifth chapter of the series. Now that you have at your disposal some educational code samples concerning the use of the focus(), blur() and submit() methods that come included with jQuery, hopefully you’ll start utilizing them with your existing web projects.

Final thoughts

In this fifth episode of the series, I provided you with a quick overview of how to handle blur, focus and submit events with the jQuery library. These processes clearly can be tackled with only minor hassles, due to the friendly programming interface provided by the library.

In the upcoming tutorial, things will get even more interesting. I plan to show you how to use this helpful JavaScript package to perform all sorts of useful tasks, such as adding and removing CSS classes on the fly, building eye-popping mouse over effects, and much more. Thus, now that you’re aware of the topics that will be discussed in the next part, you won’t want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.