CODEWITHSUNDEEP
javascripthtml
user3756425
user3756425

Reputation: 117

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

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>

Upvotes: 0

Views: 6974

Answers (4)

flowstoneknight
flowstoneknight

Reputation: 1236

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.

Upvotes: 0

vikrant singh
vikrant singh

Reputation: 2111

    <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/

Upvotes: 0

Brijesh
Brijesh

Reputation: 86

<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/

Upvotes: 0

Abdul Jabbar
Abdul Jabbar

Reputation: 2573

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.
    }
}

Upvotes: 2

Related Questions