Post
Ask Question

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

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

Disabling a Text Input

Text Input is Disabled when you don't click on Other Radio Button.

Disable

When you click on the Other Radio Button then the Text Input disable value is False and you can type in Text Input Field.

Disable

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);"
        />
        Magazine 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';
    }
}


Similar Articles