替換隱藏輸入內部的值

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輸入的值，而不是基於當前值：

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

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())