Create Auto-Tabbing Fields and Disabling Text Input in a Form

Introduction

I
n 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';
    }
}

Up Next
    Ebook Download
    View all
    Learn
    View all