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

Question

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

Nicola Peluchetti · Accepted Answer · 2011-07-13 10:13:08Z

6

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();
    }
});

answered Jul 13, 2011 at 10:13

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sandy Over a year ago

try u r code i select second value the my text box also hide without selecting other

Nicola Peluchetti Over a year ago

You wanted to hide the selct and show the textbox when you select "other" and hide the textbox when you select any vlue that is not other. that is what i understood. Post your generated html code so that i can help you better

sandy Over a year ago

when i select any value except "other" i want hide my text box when i select the value "other" then i want hide my select box

Nicola Peluchetti Over a year ago

Look at the fiddle here: jsfiddle.net/YjtD9 if you textbox hides too when you select "other" you might have some different problem. try to show us the generated html

sandy Over a year ago

|

Amir Ismail · Accepted Answer · 2011-07-13 10:39:16Z

1

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>

edited Jul 13, 2011 at 10:39

answered Jul 13, 2011 at 10:15

Amir Ismail

3,8713 gold badges22 silver badges35 bronze badges

4 Comments

sandy Over a year ago

this code is not working when i select value "other " the text box also hide

Amir Ismail Over a year ago

this because I compare with Other not other so I edited my answer to convert the value of dropdown to upper case and compare it with OTHER

sandy Over a year ago

thanks for replay i try it but it is not working i use asp mvc view plz help me

Amir Ismail Over a year ago

try to use newer version of jquery 1.6.2

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related