jquery - Populate text field based on result of dropdown selection -


using mvc 5, have created dropdown menu 3 options: $500, $5000 , other. want hide "amountother" text field until user has selected "amountother" option dropdown. can 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> 

as noted in comments, ids must unique. also, since jquery 1.7 .on() preferred .live() has been deprecated. that, 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>


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -