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

yyyllmsg  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(91)
$(document).ready(function () {

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

});

字符串
此处用户名输入为新值,但提交表单时该值不可用。我还需要对Username进行字段验证,即使在jQuery事件中填充了值,也会在提交时触发。如何保留用户名的值?
第一个月
$('#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>

的数据

gstyhher

gstyhher1#

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

相关问题