Grow your CSS skills. Land your dream job.

Javascript function to enable textfield on dropdown select

  • # December 7, 2009 at 5:22 am

    This script works to enable the textfield ‘otherz’ from
    ‘D1′ select option ‘Others’.

    HTML
    <select size="1" name="D1" onChange="dis_able()">
    <option>Category A</option>
    <option>Category B</option>
    <option>Category C</option>
    <option value="Others">Others</option>
    </select>
    <input disabled type="text" name="otherz" size="20" value="pls specify"></p>

    Javascript
    function dis_able()
    {
    if(document.myform.D1.value != ‘Others’)
    document.myform.otherz.disabled=1;
    else
    document.myform.otherz.disabled=0;
    }

    My questions is: how can this be rewritten so it will enable/disable other textfields associated with other dropdown menus? (as if we have the same code, but the select name "D2", "D3"…etc. and text field to enable associated with that select: "otherz2", "otherz3".

    Thank you for your help.

    # December 8, 2009 at 6:56 pm

    Start by validating your code. It will not pass. Among other things, you use uppercase letters in attribute names, such as onChange, which is valid HTML but invalid XHTML. Then you close your input tags with /> which is valid XHTML and invalid HTML.

    I changed a few of the name attributes when I rebuilt this, so you’ll have to adjust the code.
    Javascript:

    Code:
    function disable_input() {
    if( document.form.categories.value == ‘other’ ) {
    document.form.other.disabled = false;
    }else {
    document.form.other.disabled = true;
    }
    }

    HTML:

    Code:


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".