I have many checkboxes with same class name and below each there is a hidden date field.
I need to show the div with the date field and select different date. in the begging I need to add 30 days from today when the checkbox is checked by default, then the user can change the date.
When I click to first choice and change the date is ok....but when I click to another the first date field takes the default value. Any suggestions?
html
@foreach (var item in Model)
{
<tr>
<td>
<div>
@Html.CheckBox(item.Title, new { @class = "chkPages", Value = item.ID }) @item.Title
</div>
<div class="extrafields">
<div class="DurationDisplayDate">
<input name="DurationDisplayDate" class="DurationDisplayDate" />
</div>
</div>
</td>
</tr>
-----------------------------
$('.chkPages').change(function () {
if (this.checked)
{
var dateStr = new Date();
dateStr.setDate(dateStr.getDate() + 30)
dateStr = dateStr.getDate() + "/" + (dateStr.getMonth() + 1) + "/" +
dateStr.getFullYear();
$(this).closest('div').next('.extrafields').fadeIn('slow');
//How can I change the next input field?
$(".DurationDate").val(dateStr);
}
else {
dateStr = "";
$(this).closest('div').next('.extrafields').fadeOut('slow');
$(".DurationDate").val(dateStr);
}
The main problems here are:
An easy solution to this is to reuse the code you already have that's selecting the extras container for animation to find the relevant input e.g.
const extras = $(this).closest('div').next('.extrafields')
extras.find('.DurationDisplayDate').val(dateStr)
extras.fadeIn('slow')
Full working example:
$(document).ready(function() {
$('.chkPages').change(function() {
if (this.checked) {
var dateStr = new Date()
dateStr.setDate(dateStr.getDate() + 30)
dateStr = `${dateStr.getDate()}/${dateStr.getMonth() + 1}/${dateStr.getFullYear()}`
const extras = $(this).closest('div').next('.extrafields')
extras.find('.DurationDisplayDate').val(dateStr)
extras.fadeIn('slow')
} else {
const extras = $(this).closest('div').next('.extrafields')
extras.find('.DurationDisplayDate').val('')
extras.fadeOut('slow')
}
})
}).extrafields {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<input type="checkbox" class="chkPages" />
</div>
<div class="extrafields">
<div class="DurationDisplayDate">
<input name="DurationDisplayDate" class="DurationDisplayDate" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" class="chkPages" />
</div>
<div class="extrafields">
<div class="DurationDisplayDate">
<input name="DurationDisplayDate" class="DurationDisplayDate" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" class="chkPages" />
</div>
<div class="extrafields">
<div class="DurationDisplayDate">
<input name="DurationDisplayDate" class="DurationDisplayDate" />
</div>
</div>
</td>
</tr>
</table>