隠し入力内の選択からの値の置換

Question

主な目的は、2つの選択ドロップダウンからの値を1つの非表示入力に追加することでした。これはうまくいきますが、ユーザーが別の入力を選択すると、それを置き換えるのではなく、隠された入力値に追加されます。

ライブコード：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())