Search code examples
htmljqueryvalidationinputform-submit

Input value synchronized from another input using jQuery event is not available during form submission

$(document).ready(function () {

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

});

Here Username input is filled with new value, But that value is not available when submitting form. Also I have required field validation on Username, Which also fires on submit even after it filled with value in jQuery event. How can I retain the value of Username?

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

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

I tried the above events also, But still the value is not retained!

Edit: By preventing default submission, Username value can be retained.

$(document).ready(function() {

  $('#StaffNumber').keyup(function() {
    $('#Username').val('EMP' + $('#StaffNumber').val());
  });

});

document.getElementById('testForm').addEventListener('submit', function(event) {
  event.preventDefault();

  var staffNumber = document.getElementById('StaffNumber').value;
  var username = document.getElementById('Username').value;

  console.log('Submitted Form Values: Staff#:' + staffNumber + ' Username:' + username);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery input synch</title>
</head>

<body>
  <form id="testForm">
    <label for="StaffNumber">Staff#</label><br>
    <input type="text" id="StaffNumber" name="StaffNumber" value=""><br>
    <label for="Username">Username</label><br>
    <input type="text" readonly="readonly" id="Username" name="Username" value=""><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>

Solution

  • Ensure that the event binding code is inside $(document).ready(). Use the change event instead of keyup for #StaffNumber input field. Combine both keyup and change events if needed. Check for custom form submission handling and prevent the default form submission behavior. Verify the form validation code to recognize the updated value of Username.