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
https://forums.phpfreaks.com/topic/159848-enable-textbox-using-javascript-how/
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>

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.

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.