Select List Item value does not working with Javascript asp mvc

Question

I am having a register form. And based on roles Individual or Business, two different fields appears.

Hide & Show js works fine. But I guessing Forcing all empty fields in individual to business not working only for FleetType which is an Integer in model. But select Individual and fill out all the form it works! Not working just for Business....

I have register.cshtml:

ViewBag.NCFleetTypeList = new List<SelectListItem>
{
    new SelectListItem { Text="Select Fleet Type", Value=null},
    new SelectListItem { Text="Car", Value="1"},
    new SelectListItem { Text="Cargo Van", Value="2"},
    new SelectListItem { Text="Pickup Truck", Value="3"},
    new SelectListItem { Text="10' Truck", Value="4"},
    new SelectListItem { Text="15' Truck", Value="5"},
    new SelectListItem { Text="17' Truck", Value="6"},
    new SelectListItem { Text="20' Truck", Value="7"},
    new SelectListItem { Text="26' Truck", Value="8"}
};

ViewBag.CFleetTypeList = new List<SelectListItem>
{
    new SelectListItem { Text="Select Fleet Type", Value=null},
    new SelectListItem { Text="10' Truck", Value="4"},
    new SelectListItem { Text="15' Truck", Value="5"},
    new SelectListItem { Text="17' Truck", Value="6"},
    new SelectListItem { Text="20' Truck", Value="7"},
    new SelectListItem { Text="26' Truck", Value="8"}
};
<div class="form-group">
                    <div class="col-md-10">
                        @Html.DropDownListFor(m => m.CarrierType, ViewBag.CarrierTypeList as List<SelectListItem>, new { @class = "btn btn-primary btn-block dropdown-toggle", id = "CarrierType" })
                    </div>
                </div>
                <!--Individual-->
                <div id="Individual">
                    <h4>Individual Information</h4>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15})
                            @Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16})
                            @Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17})
                            @Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18})
                            @Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"})
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.DropDownListFor(m => m.FleetType, ViewBag.NCFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary  dropdown-toggle"})
                        </div>
                    </div>
                </div>
                <!--Business-->
                <div id="Business">
                    <h4>Business Information</h4>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15})
                            @Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16})
                            @Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17})
                            @Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18})
                            @Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"})
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10">
                            @Html.DropDownListFor(m => m.FleetType, ViewBag.CFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary  dropdown-toggle"})
                        </div>
                    </div>
                </div>

JS I have following:

 // Assuming the form has a submit button with id = "submit-btn"
    $('#submit-btn').on('click', function () {
        var form = $(this).closest('form');
        var businessDiv = form.find('#Business');
        // Assuming this is only required when Business is selected
        if (businessDiv.is(':visible')) {
            var individual = form.find('#Individual input:text');
            var business = businessDiv.find('input:text');
            for (var i = 0; i < individual.length; ++i) {
                // Perform the required logic here. 
                // I'm just forcing all empty fields in individuals to
                // their business counterpart
                if (individual[i].value === "") {
                    individual[i].value = business[i].value;
                }
            }
        }
    });

When I select Individual and everything works perfect and I could register.

But When I select Business and if I choose "20' Truck' from dropdown, I get error The value 'Select Fleet Type,7' is not valid for Fleet Type.

Can I get some help? Thank you!!

Answer 1

One thing that might be causing this issue is, when you select Business from the carrier type and proceed to submit the form, the jQuery snippet will fill out all the empty fields in #Individual however, the dropdown inside #Individual is left as Select Fleet Type and this causes the error when the form gets submitted to the server. If that's the case, you can try adding the following lines of code to the snippet so that the dropdown under #Individual gets updated to the value selected in the dropdown under #Business:

// Assuming the form has a submit button with id = "submit-btn"
$('#submit-btn').on('click', function() {
    var form = $(this).closest('form');
    var businessDiv = form.find('#Business');
    // Assuming this is only required when Business is selected
    if(businessDiv.is(':visible')) {
        var individual = form.find('#Individual input:text');
        var business = businessDiv.find('input:text');
        for(var i = 0; i < individual.length; ++i) {
            // Perform the required logic here. 
            // I'm just forcing all empty fields in individuals to
            // their business counterpart
            if(individual[i].value === "") {
                individual[i].value = business[i].value;
            }
        }
        // Add the following lines
        // let the business dropdown update the individual dropdown
        var individualFleetSelect = $(form.find('#Individual .dropdown-toggle'));
        var businessFleetSelect = $(form.find('#Business .dropdown-toggle'));
        individualFleetSelect.val(businessFleetSelect.val());
    }
});