I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

Question

I want that when I select option "others " from dropdown list then only the text box is active else that box remains inactive... I am attaching the code please help me and change the code according to my required specification.......

<div class="width-qrtr">
   <label>Type of event</label>
  <select name="" id= "select">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
 </select>
  </div>
<div class="width-qrtr">
   <label>If you choose 'Other'</label>
    <input type="text"   value=""  name=""/>
</div>

You want to have an `onChange` anyway look at this http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change — Kenneth Clark, Sep 02 '14 at 06:34
This code of HTML you've attached doesn't appear to have your text box, or the option of "Others" in the drop down list, so we must assume that you've completely accidentally pasted in some other code of HTML that you're working on. — Evan Knowles, Sep 02 '14 at 06:34

score 2 · Answer 1 · answered Sep 02 '14 at 06:38

Here's how you do it with pure javascript...

<select name="" id= "select" onchange="onSelectChange()">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
</select>
<input type="text" id="yourTextBox" disabled="disabled"/>

Then in your script:

function onSelectChange(){
    var sel = document.getElementById('select');
    var strUser = sel.options[sel.selectedIndex].text;  //getting the selected option's text

    if(strUser == 'Other'){ 
         document.getElementById('yourTextBox').disabled = false;  //enabling the text box because user selected 'Other' option.
    }
}

vikrant singh · Answer 2 · 2014-09-02T06:43:29.477

0

    <div class="width-qrtr">
    <label>Type of event</label>
    <select name="" id="select">
        <option value="1">Select Type</option>
        <option value="2">Golf Day</option>
        <option value="3">Dinner</option>
        <option value="4">Dinner and Golf Day</option>
        <option value="5">Other</option>
    </select>
</div>

<input type='text' name='othertext' id="other" disabled='disabled'/>

Script-

$(document).ready(function () {
    $("#select").change(function () {
        if ($(this).find("option:selected").val() == "5") {
            $("#other").removeAttr("disabled")
        } else {
            $("#other").attr("disabled","disabled")
        }
    });
});

Here's the fiddle http://jsfiddle.net/vikrant47/gywg9hue/1/

edited Sep 02 '14 at 06:43

answered Sep 02 '14 at 06:37

vikrant singh

2,013
1
10
15

1

I think he wanted to deactivate the box, not hide it. – Evan Knowles Sep 02 '14 at 06:39
@Evan Knowles now fixed :) – vikrant singh Sep 02 '14 at 06:44

score 0 · Answer 3 · answered Sep 02 '14 at 06:43

<div class="width-qrtr">
   <label>Type of event</label>
  <select name="selectdrop" id= "selectdrop" onchange="return Sbox();">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
 </select>
    <input type="text" id="tbox" name="tbox" disabled />
  </div>
<script lanaguage="javascript">
    function Sbox()
    {
    if(document.getElementById("selectdrop").value=='5')
    {

        document.getElementById("tbox").disabled=false;

    }
    }
</script>

Running code : http://jsfiddle.net/cvb82wtq/

score 0 · Answer 4 · answered Sep 02 '14 at 06:45

Bind an event listener to the dropdown menu. When it changes, if the option selected is "Other" (value=5), enable the textbox. Otherwise, disable the textbox.

HTML:

<div class="width-qrtr">
   <label>Type of event</label>
  <select name="" id= "select">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
 </select>
  </div>
<div class="width-qrtr">
   <label>If you choose 'Other'</label>
    <input id="textbox" disabled="true" type="text"   value=""  name=""/>
</div>

JS:

document.getElementById('select').addEventListener('change', function() {
    if (this.value == 5) {
        document.getElementById('textbox').disabled = false;   
    } else {
        document.getElementById('textbox').disabled = true;
    }
});

Here's a fiddle.

I want to activate a textbox on selecting other option from dropdown list only else it remains inactive

4 Answers4