TheCenteno TheCenteno - 9 months ago 39
HTML Question

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.

Live Code: DEMO



$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})

$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>

<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />




Answer Source

You can update the value of the #expiry input in an external function, and not based on the current value:

function getExpirationDate() {
  var monthVal = $('#expireMM').val();
  var yearVal = $('#expireYY').val();
  if (monthVal && yearVal) {
    $('#expiry').val(`${monthVal}/${yearVal}`);
  } else if (monthVal) {
    $('#expiry').val(monthVal);
  }
  
  console.log($('#expiry').val());
}

$('#expireMM').change(getExpirationDate)

$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
  <option value="">Month</option>
  <option value="01">January</option>
  <option value="02">February</option>
  <option value="03">March</option>
  <option value="04">April</option>
  <option value="05">May</option>
  <option value="06">June</option>
  <option value="07">July</option>
  <option value="08">August</option>
  <option value="09">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
 </select>

 <select name="expireYY" id="expireYY" >
   <option value="">Year</option>
   <option value="17">2017</option>
   <option value="18">2018</option>
   <option value="19">2019</option>
   <option value="20">2020</option>
   <option value="21">2021</option>
 </select>

 <input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download