替换隐藏输入内选择的值

Question

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

实时代码：演示

$('#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

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

Answer 3

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

这是代码。

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>