jQuery Chained Input

Question

I've done some research but haven't been able to find and answer.

I have 1 text input and 1 selectbox.

• If the selected value of the selectbox is 2, I 'd like the textbox to be hidden

• If the selected value of selectbox is 1, the textbox should appear.

Here is my code:

<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Pricing</label>
    <div class="col-sm-10">
       <select class="form-control" name="pricing">
          <option>Please Select</option>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
       </select>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
       <input type="text" name="pricing" class="form-control">
    </div>
</div>

Answer 1

You can assign an id to the form-group then use that to hide/show that element

<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
    <div class="col-sm-10">
       <select class="form-control" name="fiyatlandirma">
          <option>Please Select</option>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
       </select>
    </div>
</div>
<div class="form-group" id="fiyat-group">
    <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
        <input type="text" name="fiyat" class="form-control"/>
    </div>
</div>

then

//dom ready handler - wait for the element to load
jQuery(function($){
    //change event handler to trigger when the select is changed
    $('select[name="fiyatlandirma"]').change(function(){
        //hide or display the group element based on the value of select
        $('#fiyat-group').toggle(this.value == '2')
    }).change();//to set the initial display state
})

• http://learn.jquery.com/
• http://learn.jquery.com/using-jquery-core/document-ready/
• http://api.jquery.com/change
• http://api.jquery.com/toggle

Answer 2

Try this:

$(document).ready(function(){
  $("select.form-control").change(function(){
     if($(this).val()=="1")
       $("input[name=fiyat]").hide();
     else
       $("input[name=fiyat]").show();
  });
});

Answer 3

You can give id to all three fields: select, input label and input box

 $(document).ready(function () { $("#pricing").change(function () { if ($(this).val() == "1") { $("#textbox").hide(); $("#textLabel").hide(); } else { $("#textbox").show(); $("#textLabel").show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label class="col-sm-2 col-sm-2 control-label">Pricing</label> <div class="col-sm-10"> <select class="form-control" name="pricing" id="pricing"> <option>Please Select</option> <option value="1">Value 1</option> <option value="2">Value 2</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label> <div class="col-sm-10"> <input type="text" name="pricing" id="textbox" class="form-control"> </div> </div> 

Answer 4

using java script

<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
   <select class="form-control" id="select" name="fiyatlandirma"  onclick="hide()">
      <option>Please Select</option>
      <option value="1">Value 1</option>
      <option value="2" >Value 2</option>
   </select>
   </div>
</div>
<div class="form-group">
   <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
        <input type="text" id="fiyat" name="fiyat" class="form-control">
    </div>
 </div>

 <script>
     function hide(){
      var select = document.getElementById("select").selectedIndex;
      var input = document.getElementById("fiyat");
      if(select == 1)
      input.style.visibility= "hidden";
      else if(select == 2)
      input.style.visibility= "visible";
     }
</script>