jQuery events don't provide synchronization of input values ​​from other inputs during form submission

Question

$(document).ready(function () {

    $('#StaffNumber').on('keyup', function () {
        var staffNo = $(this).val();
        $('#Username').val('EMP' staffNo);
    });

});

Here the username input is populated with a new value, but the value is not available when the form is submitted. Additionally, I need a field validation on the username that fires on submit even after the value is populated in a jQuery event. How to preserve the value of username?

$('#StaffNumber').on('input', function () {...});

$('#StaffNumber').on('keyup paste', function () {...});

I also tried the above activities, but still no value retained!

Answer 1

Make sure the event binding code is in $(document).ready(). Use change event instead of keyup for #StaffNumber input field. Combine the two keyup and change events if necessary. Check custom form submission handling and prevent default form submission behavior. Validate the form validation code to identify the updated value of Username.