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') });
$('#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
Post a Comment