在表单提交期间，使用jQuery事件从另一个输入同步的输入值不可用-解网

问：

$(document).ready(function () {

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

});

在这里，用户名输入填充了新值，但该值在提交表单时不可用。此外，我还要求对用户名进行字段验证，即使在jQuery事件中填充了值后，它也会在提交时触发。如何保留用户名的值？

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

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

我也尝试了上述事件，但仍然没有保留价值！

编辑：通过阻止默认提交，可以保留用户名值。

$(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>

HTML jQuery 验证输入表单 - 提交

确保事件绑定代码位于 $（document）.ready（）中。对输入字段使用 change 事件而不是 keyup #StaffNumber。如果需要，将 keyup 和 change 事件组合在一起。检查自定义表单提交处理并阻止默认表单提交行为。验证表单验证代码以识别 Username 的更新值。

在表单提交期间，使用jQuery事件从另一个输入同步的输入值不可用

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

评论

评论