Replace value from select inside hidden input

Question

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" />

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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" />

Replace value from select inside hidden input

Sign up