Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Enable/Disable Textboxes

Fiorina81Fiorina81 Posts: 2Member
I am new to Javascript and I have a form that has 6 textboxes on it. If txtbox1 receives text then the 5 other textboxes become disabled. If you clear the text in txtbox1 all textboxes become enabled. Can some one help me please.

Thanks

Comments

  • ArchatasArchatas Posts: 21Member
    let's say that every textbox has an id consisting of "txtbox" and its number, like "txtbox1", "txtbox2", and so on.

    add this to txtbox1 attributes:
    onchange="changeOthers()"

    add this function to the script section:
    changeOthers() {
    // let oTxtbox1..oTxtbox6 be pointers to text box objects
    var oTxtbox1 = document.getElementById("txtbox1");
    var oTxtbox2 = document.getElementById("txtbox2");
    var oTxtbox3 = document.getElementById("txtbox3");
    var oTxtbox4 = document.getElementById("txtbox4");
    var oTxtbox5 = document.getElementById("txtbox5");
    var oTxtbox6 = document.getElementById("txtbox6");
    // if txtbox1 is not empty
    if (oTxtbox1.value) {
    // disable other text boxes
    oTxtbox2.disabled = true;
    oTxtbox3.disabled = true;
    oTxtbox4.disabled = true;
    oTxtbox5.disabled = true;
    oTxtbox6.disabled = true;
    // else it is empty so
    } else {
    // enable other text boxes
    oTxtbox2.disabled = false;
    oTxtbox3.disabled = false;
    oTxtbox4.disabled = false;
    oTxtbox5.disabled = false;
    oTxtbox6.disabled = false;
    }
    }

    There are also shorter ways to write this function, however this is done like this for you to understand the script, but not just copy and paste it.

    [hr]Good luck!
    [b]Aidas Bendoraitis[/b] aka [b]Archatas[/b][hr]

  • Fiorina81Fiorina81 Posts: 2Member
    Thanks for your help!!

    : let's say that every textbox has an id consisting of "txtbox" and its number, like "txtbox1", "txtbox2", and so on.
    :
    : add this to txtbox1 attributes:
    : onchange="changeOthers()"
    :
    : add this function to the script section:
    : changeOthers() {
    : // let oTxtbox1..oTxtbox6 be pointers to text box objects
    : var oTxtbox1 = document.getElementById("txtbox1");
    : var oTxtbox2 = document.getElementById("txtbox2");
    : var oTxtbox3 = document.getElementById("txtbox3");
    : var oTxtbox4 = document.getElementById("txtbox4");
    : var oTxtbox5 = document.getElementById("txtbox5");
    : var oTxtbox6 = document.getElementById("txtbox6");
    : // if txtbox1 is not empty
    : if (oTxtbox1.value) {
    : // disable other text boxes
    : oTxtbox2.disabled = true;
    : oTxtbox3.disabled = true;
    : oTxtbox4.disabled = true;
    : oTxtbox5.disabled = true;
    : oTxtbox6.disabled = true;
    : // else it is empty so
    : } else {
    : // enable other text boxes
    : oTxtbox2.disabled = false;
    : oTxtbox3.disabled = false;
    : oTxtbox4.disabled = false;
    : oTxtbox5.disabled = false;
    : oTxtbox6.disabled = false;
    : }
    : }
    :
    : There are also shorter ways to write this function, however this is done like this for you to understand the script, but not just copy and paste it.
    :
    : [hr]Good luck!
    : [b]Aidas Bendoraitis[/b] aka [b]Archatas[/b][hr]
    :
    :

Sign In or Register to comment.