CODEWITHSUNDEEP
jquery
ceci
ceci

Reputation: 429

Populate text field based on result of dropdown selection

Using MVC 5, I have created a dropdown menu with three options: $500, $5000 and Other. I want to hide the "AmountOther" text field until the user has selected the "AmountOther" Option from the dropdown. Can anyone help? Thanks. 

<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.min.js"></script>

    <div class="col-md-10" id="divAmount"> 
      <select class="form-control" data-val="true" id="Amount" name="Amount">
      <option value="">-- Amount --</option>
      <option value="500">$500</option>
      <option value="5000">$5000</option>
      <option value="AmountOther">Amount Other</option>
     </select>
   <div>

   <div class="col-md-10" id="divAmount"> 
     <input id="AmountOther" name="AmountOther" type="text" value="" />
   </div>

<script type="text/javascript">    
 $('#Amount').live('change',function() {
    if (value == "AmountOther") {
        $("#divAmount").show();
        $("#divAmount").show();
    }
    else {
        $("#divAmount").hide();
        $("#divAmount").hide();
    }
});
</script>

Upvotes: 0

Views: 805

Answers (3)

SagarPPanchal
SagarPPanchal

Reputation: 10111

$('#Amount').live('change',function() {
    if($('#Amount:selected').text() == 'Amount Other'){
       $("#divAmount").show();
    }else{
       $("#divAmount").hide();
    }
});

Upvotes: 0

ragerory
ragerory

Reputation: 1378

value is undefined in that context. You also have duplicated ID's. live is now on.

<script type="text/javascript">    
 $('#Amount').on('change',function() {
    var elem = document.getElementById('Amount');
    if (elem.value == "AmountOther") {
        $("#divAmount").show();
    }
    else {
        $("#divAmount").hide();
    }
});
</script>

Upvotes: 0

j08691
j08691

Reputation: 207881

As I noted in the comments, IDs must be unique. Also, since jQuery 1.7 .on() is preferred to .live() which has been deprecated. With that, you can use:

$('#Amount').on('change', function () {
    $('#divAmount2').css('display', ($(this).val() == 'AmountOther') ? 'block' : 'none')
});

jsFiddle example

$('#Amount').on('change', function() {
  $('#divAmount2').css('display', ($(this).val() == 'AmountOther') ? 'block' : 'none')
});
#divAmount2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-10" id="divAmount">
  <select class="form-control" data-val="true" id="Amount" name="Amount">
    <option value="">-- Amount --</option>
    <option value="500">$500</option>
    <option value="5000">$5000</option>
    <option value="AmountOther">Amount Other</option>
  </select>
  <div>
    <div class="col-md-10" id="divAmount2">
      <input id="AmountOther" name="AmountOther" type="text" value="" />
    </div>

Upvotes: 1

Related Questions