Form Submit clears values before passing data to server-side

Question

There are couple of Javascript functions that validate the values for the two fields in question.

The functions are doing the job intended but when I submit the form, the two values validated by said functions are blank

here is the js code

<script>
        function updateRequirements() {
            var contract = document.getElementById("contract").value;
            var expdate = document.getElementById("expdate");
            console.log(contract);
            if (contract == "YES") {
                expdate.style.display = "block";
            } else {
                expdate.style.display = "none";
            }
        }

        function dateRequirements() {
            var contract = document.getElementById("contract").value;
            var expdate = document.getElementById("expdate")
            var expdateValue = expdate.value;
            console.log(expdateValue);
            if (contract == "YES") {
                var today = new Date();
                var exp = new Date(expdateValue);
                var difference = exp - today;                
                if (difference > 365 * 24 * 60 * 60 * 1000) {
                    alert("The expiration date cannot be more than 365 days from today");
                    expdate.value = "";  // Clear the date field
                }
            }
        }
    </script>

Here is short version of the form:

    [![<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label asp-for="EntryADFormModel.FirstName" class="control-label"></label>
            <input asp-for="EntryADFormModel.FirstName" class="form-control" />
            <span asp-validation-for="EntryADFormModel.FirstName" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="EntryADFormModel.LastName" class="control-label"></label>
            <input asp-for="EntryADFormModel.LastName" class="form-control" />
            <span asp-validation-for="EntryADFormModel.LastName" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="EntryADFormModel.Contractor" class="control-label"></label>
            <select name="contract" class="form-control" asp-for="EntryADFormModel.Contractor" id="contract" onchange="updateRequirements();">
                <option value="SELECT" selected disabled>Select Answer</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                
            </select>
            <span asp-validation-for="EntryADFormModel.Contractor" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="EntryADFormModel.AccountExpDate" class="control-label"></label>
            <input asp-for="EntryADFormModel.AccountExpDate" class="form-control" id="expdate" name="expdate" onchange="dateRequirements()" />
            <span asp-validation-for="EntryADFormModel.AccountExpDate" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>]

Here is the form with missing values after being submitted

Answer 1

Tag helper asp-for will dynamically generate the id and name attribute, but if you specify the name attribute in the html, the tag helper default generated name value will be overrided.

And your backend binds the model by name attribute, it needs name like: EntryADFormModel.PropertyName.

For your scenario, just remove the name attribute like below:

<select class="form-control" asp-for="EntryADFormModel.Contractor" id="contract" onchange="updateRequirements();">
    <option value="SELECT" selected disabled>Select Answer</option>
    <option value="YES">Yes</option>
    <option value="NO">No</option>
                
</select>

<input asp-for="EntryADFormModel.AccountExpDate" class="form-control" id="expdate" onchange="dateRequirements()" />