Introduction
In this article you will learn how to create Auto-Tabbing among Fields and Disabling Text Input in a Form using JavaScript.
Auto-Tabbing among Fields
This example uses the onkeyup event handler to check that the length of the text the user has entered is equal to or greater than the required number of characters for that field. If the user has entered the required number of characters, the focus is moved to the next box.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Auto-Tabbing</title>
</head>
<body>
<form name="frmAuto">
Enter your date of birth: <br/>
<input name="txtMonth" id="txtMonth" size="3" maxlength="2" onkeyup="if(this.value.length >=2) this.form.txtDay.focus();" />
<input name="txtDay" id="txtDay" size="3" maxlength="2" onkeyup="if(this.value.length >=2) this.form.txtYear.focus();" />
<input name="txtYear" id="txtYear" size="5" maxlength="4" onkeyup="if(this.value.length >=4) this.form.submit.focus();" />
<input type="submit" name="submit" value="Send" />
</form>
</body>
</html>
![tabbing.jpg]()
Disabling a Text Input
- Text Input is Disabled when you don't click on Other Radio Button.
![disabl11.jpg]()
- When you click on the Other Radio Button then the Text Input disable value is False and you can type in Text Input Field.
![disable2.jpg]()
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Disabling</title>
<script type="text/javascript" src="js/disabl.js"></script>
</head>
<body onload="document.frmReferrer.txtOther.disabled=true; document.frmReferrer.txtOther.value='not applicable'">
<h1>How did you hear about us ?</h1>
<form name="frmReferrer">
<input type="radio" name="redHear" value="1" onclick="handleOther(this.value);"/>From a friend <br/>
<input type="radio" name="redHear" value="2" onclick="handleOther(this.value);"/>TV Ad <br/>
<input type="radio" name="redHear" value="3" onclick="handleOther(this.value);"/>Magzine AD <br/>
<input type="radio" name="redHear" value="4" onclick="handleOther(this.value);"/>Newspaper Ad <br/>
<input type="radio" name="redHear" value="5" onclick="handleOther(this.value);"/>Internet <br/>
<input type="radio" name="redHear" value="other" onclick="handleOther(this.value);"/>Other... Please specify:
<input type="text" name="txtOther"/>
</form>
</body>
</html>
JavaScript Code
function handleOther(strRadio) {
if (strRadio == "other") {
document.frmReferrer.txtOther.disabled = false;
document.frmReferrer.txtOther.value = '';
}
else {
document.frmReferrer.txtOther.disabled = true;
document.frmReferrer.txtOther.value = 'not applicable';
}
}