CODEWITHSUNDEEP
jqueryasp.net-mvc
sandy
sandy

Reputation: 77

how to hide and show text box according to select value using jquery

i want to hide and show my text box according to drop down select value. if user select drop down value "other" then i want show my text box and hide drop down list and he can select any value except other my text box is hide plz help me and give me sample code my code is here 

 <script type="text/javascript">
  $( function () {

 if($("#subject").val()==="Other") {
     $("#Sub").show();
  $("#subject").hide();

  }
  else $("#Sub").hide(); 
    });


  <tr> <td style="width: 470px"><%:Html.DropDownList("subject",ViewData["sub"] as SelectList) %> 

      <input type ="text"  name="subject" id="Sub"style="width: 250px" /></td></tr>

i populated drop down list from data base

Upvotes: 0

Views: 11310

Answers (2)

Amir Ismail
Amir Ismail

Reputation: 3883

try this 

  <tr> <td style="width: 470px"><%:Html.DropDownList("subject",ViewData["sub"] as SelectList,new {onchange="ShowHideTextBox()"}) %> 

  <input type ="text"  name="subject" id="Sub" style="width: 250px" /></td></tr>

javascript

  <script type="text/javascript">
function ShowHideTextBox() {

    if($("#subject").val().toUpperCase()=="OTHER") {
         $("#Sub").show();
         $("#subject").hide();
    }
    else
    {
       $("#Sub").hide(); 
    } 
}
</script>

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

To do this you must attach an event on "change" event of the select (and hide the text input first). try this:

$("#Sub").hide();
$("#subject").change(function(){
    if ($(this).val() === "Other"){
        $("#Sub").show(); 
        $("#subject").hide();
    }else{
        $("#Sub").hide();
    }
});

Upvotes: 6

Related Questions