替换隐藏输入内部的值

Question

主要任务是将两个选择下拉列表中的值添加到一个隐藏输入。这很好但现在如果用户决定选择另一个输入，它会添加隐藏的输入值而不是替换它。

直播代码：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 1

您可以更新外部函数中#expiry输入的值，而不是基于当前值：

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不在表单提交时生成到期输入值？

这是代码。

jQuery(document).ready(function($) {

  $("#my-form").submit(function() {
    var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
    $("#expiry").val(monthYearVal);
    $(this).submit();
    return false;
  });

});

<form id="my-form" method="POST">
  <table class="table">

    <tr>
      <td>
        <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" /></tr>
    </td>
    <tr>
      <tr>
        <td colspan="2" align=center>
          <input type="hidden" name="cvv">
          <input class="right-col-inner-box" type="submit" value="Submit">
        </td>
      </tr>
  </table>
</form>

Answer 3

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())