Change text input value based on check box, multiple fields with same class name

Question

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);
        }

I imagine that's due to you setting the value of .DurationDate (which will select all elements with that class) but there's no way to know for sure with the info currently included in the question. — DBS
– DBS, Commented Jan 27, 2022 at 11:15
You need to go up to a common parent element of both the checkbox and the text field - like the TD in this instance - via api.jquery.com/parents first, and then find the appropriate element(s) inside that. — C3roe
– C3roe, Commented Jan 27, 2022 at 11:25

DBS · Accepted Answer · 2022-01-27 11:25:37Z

The main problems here are:

You are using "DurationDate" when the class is called "DurationDisplayDate"
You are selecting all elements with that class instead of just the relevant one in that row

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>

Collectives™ on Stack Overflow

Change text input value based on check box, multiple fields with same class name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related