How to access information in ASP.NET input taghelper to change value using jQuery

Question

I am using ASP.NET 6 for a website with a facility to record details of a booking made in a club hut.

There is a HutBooking class with DateTime properties StartDate and EndDate. These properties are set to the current date in the controller action and the class incidence Booking is passed to a view called AddHutBooking.

Input fields for StartDate and EndDate are displayed in a form on the AddHutBooking view using the Input taghelper.

<div style="clear:left; padding-top:10px">
                    <div style="clear:left; float:left; position:relative; top:4px; color:blue; width:120px">Start date:</div>
                    <input asp-for="Booking.StartDate" style="float:left" />
                    <div style="float:left; margin-left:10px;  margin-right:10px; position:relative; top:4px; color:blue">End date:</div>
                    <input asp-for="Booking.EndDate" style="float:left" />
                </div>

The HTML generated for this is:

<div style="clear:left; padding-top:10px">
                    <div style="clear:left; float:left; position:relative; top:4px; color:blue; width:120px">Start date:</div>
                    <input style="float:left" type="date" data-val="true" data-val-required="The StartDate field is required." id="Booking_StartDate" name="Booking.StartDate" value="2023-03-14" />
                    <div style="float:left; margin-left:10px;  margin-right:10px; position:relative; top:4px; color:blue">End date:</div>
                    <input style="float:left" type="date" data-val="true" data-val-required="The EndDate field is required." id="Booking_EndDate" name="Booking.EndDate" value="2023-03-14" />
                </div>

If a user enters a new value for the field Booking.StartDate I am trying to use jQuery to set the Booking.EndDate to this value using the script below

// Set up event handler on booking start date so that the end date is initially set to this
    $(document).ready(function () {
        $('#Booking_StateDate').change(function(event) {
            var startdate = $(event.target).val();
         $('#Booking_EndDate').val(startdate.toString());
        });
     });

This does not work, and the problem seems to be that the change event on #Booking_StartDate is not triggered. Looking at the HTML in the pagesource for the view the change in the Booking.StartDate property which shows in the input form is not reflected in the HTML generated.

Any help on where I am going wrong would be appreciated

Answer 1

Hi @David Lane-Joynt,

You misspell the id value, it should be #Booking_StartDate.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Rena