Ever wonder how to disable another input element through the use of another control? Here is a simple tutorial on how to toggle the disabled attribute of an input element.

For the first demo, we will toggle an input’s disabled status through the use of another control. For this example, we will give our target input an id of target, while our control, in this case a link, we will give it an id of control:

Target text field: <input type="text" id="target" /><br />
<a href="#" id="control" />Disable target</a>

Now to toggle the target‘s disabled status, it is actually quite simple in jQuery. Using the .attr() attribute we can disable the target. Then using the .removeAttr(), we can remove the disabled status. Here is how the javascript code would look like:

$("#control").toggle(
function ()
{
	$('#target').attr("disabled", true);
},
function ()
{
	$('#target').removeAttr("disabled");
});

Here is a demo on how to toggle the disabled status of an input:

Target text field:
Disable target

Although the first method is handy, there are times when we really don’t need a control input. What if we want to enable an input textbox just by clicking on it? Unfortunately Read more »

Bookmark to:

Most client-side validation nowadays is usually made through onsubmit validations. Although it is pretty convenient, it may be quite annoying for a user to find only at the end that most of their inputs are invalid and must enter them once again. If onblur validations is not enough, keyperss validation is the next step.

Here is another alternative to the usual onsubmit validations for forms. Instead of validating a form only at the end, why not validate it as the user is typing their input. This is where keypress validations come in. We can capture it through the onkeypress event.

Here are some examples of keypress validations:

Only integers are allowed:
Only alphanumeric characters are allowed:
No spaces are allowed:

Here is an example keypress validation function: Read more »

Bookmark to:

Auto-saving has been one of the great features that AJAX has given to us. Ever had a time when you were writing a very long article and suddenly, your browser crashes. Thanks to applications that implement auto-saving, data is less prone from lost due to these cases.

Ever wondered how auto-saving is done? Basically, it is just a simple AJAX script running in the background at set intervals to save the data you are currently working on. Here is a simple tutorial on how to implement auto-saving using jQuery Read more »

Bookmark to:

Due to a request from a friend, here is a tutorial on how to do an auto-suggest script using jQuery and the keyup() event. The program logic of this script is based on the AJAX suggest script from w3schools but with some improvements on the efficiency, ease of use and customization by using jQuery.

The basic logic of an auto-suggest script is that for every keystroke that a user enters on a textfield, the script must send an AJAX request and validate which words in a dictionary most closely resembles the current input. Read more »

Bookmark to:

Here is another jQuery tutorial demonstrating how to perform text validations using jQuery’s blur() event.

Its a fact that client-side client validation is no alternative to server-side validation especially in web applications. However, that doesn’t mean that we should drop client-side validation altogether. The truth is that client-side validation enhances a web application. First, the client-side validations provide a more responsive interface for users. Secondly, for a very large enterprise-grade application, shifting some of the validations on the client as a first pass filter will reduce the load on the server and improve its performance.

Now let’s move on to the tutorial. First of all, I’m going to use a simple registration form as an example for validation. Here is the demo for this tutorial:

Username: Username must be at least 4 characters in length

Password: Password must be at least 6 characters in length

Read more »

Bookmark to: