Jump to content

enable textbox using javascript - how


ukweb

Recommended Posts

Hi

 

I have very little experience in Javascript, but basically I have a dropdown menu with a list of manufacturers, and if the manufacturer is not listed, I want a text box to go from a disabled state to an enabled state when 'other' is selected in the dropdown.

 

Any ideas how?

 

I know this isnt PHP but its PHP i am familiar with, and I don;t have a clue of any forums which specialise in javascript!

Link to comment
Share on other sites

<html>
<head>

<script>
function enableOther(selObj)
{
    //Create reference to text field
    textObj = document.getElementById('other_manufacturer');

    //Test select field value
    if(selObj.options[selObj.selectedIndex].value=='OTHER')
    {
        //Enable text field
        textObj.disabled = false;
    }
    else
    {
        //Disable text field & clear value
        textObj.disabled = true;
        textObj.value    = '';
    }

    return;
}

</script>

</head>
<body>
<form name="myform">
Manufacturer:
<select name="" id="" onchange="enableOther(this);">
  <option value="Manufacturer 1">Manufacturer 1</option>
  <option value="Manufacturer 2">Manufacturer 2</option>
  <option value="Manufacturer 3">Manufacturer 3</option>
  <option value="Manufacturer 4">Manufacturer 4</option>
  <option value="OTHER">Other</option>
</select><br />
Other:
<input type="text" name="other_manufacturer" id="other_manufacturer" disabled="disabled" />
</form>


</body>
</html>

Link to comment
Share on other sites

instead of

<input type="text" name="other_manufacturer" id="other_manufacturer" disabled="disabled" />

 

<input type="text" name="other_manufacturer" id="other_manufacturer" />
<script type="text/javascript">document.getElementById( 'other_manufacturer' ).disabled = false;</script>

Might be a better idea for accessibility reasons.

Link to comment
Share on other sites

instead of

<input type="text" name="other_manufacturer" id="other_manufacturer" disabled="disabled" />

 

<input type="text" name="other_manufacturer" id="other_manufacturer" />
<script type="text/javascript">document.getElementById( 'other_manufacturer' ).disabled = false;</script>

Might be a better idea for accessibility reasons.

 

Good catch, but instead of running that inline Javascript line a better approach would be to run the function provided onload of the page.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.