Select List Item Value Does Not Working With Javascript Asp Mvc

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 indi

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