如何用jQuery或JavaScript在提交时将表单输入值传递到另一表单隐藏字段

我来帮你搞定这个需求！你想要在提交表单时把form1里id为q1的输入值传递到form2的隐藏字段q2里，对吧？咱们可以调整代码逻辑，让它更贴合你的要求：

jQuery实现方案 #

<form name="form1">
  <input type="text" value="" name="QUANTITY" id="q1">
</form>

<form name="form2" id="form2">
  <input type="text" value="" name="Size" id="s1">
  <input type="text" value="" name="Height" id="h1">
  <input type="hidden" name="QUANTITY" id="q2" value="">
  <input type="submit" value="SUBMIT" name="submit">
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
  // 监听form2的提交事件，确保在提交前完成值传递
  $('#form2').on('submit', function() {
    // 获取form1中q1的输入值，赋值给form2的隐藏字段q2
    $('#q2').val($('#q1').val());
    
    // 可选：如果需要验证q1是否填写，可添加以下逻辑
    // if (!$('#q1').val()) {
    //   alert('请先填写数量！');
    //   return false; // 阻止表单提交
    // }
  });
});
</script>

纯JavaScript实现方案（无需jQuery） #

如果你的项目不想引入jQuery，用原生JS也能轻松实现：

<form name="form1">
  <input type="text" value="" name="QUANTITY" id="q1">
</form>

<form name="form2" id="form2">
  <input type="text" value="" name="Size" id="s1">
  <input type="text" value="" name="Height" id="h1">
  <input type="hidden" name="QUANTITY" id="q2" value="">
  <input type="submit" value="SUBMIT" name="submit">
</form>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const form2 = document.getElementById('form2');
  const q1Input = document.getElementById('q1');
  const q2Input = document.getElementById('q2');

  form2.addEventListener('submit', function() {
    q2Input.value = q1Input.value;
    
    // 同样可以添加验证逻辑
    // if (!q1Input.value) {
    //   alert('请先填写数量！');
    //   return false;
    // }
  });
});
</script>

关键说明 #

• 相比你原来的blur事件触发逻辑，我们改成监听表单提交事件，这样只会在用户点击提交按钮时才传递值，更符合你的需求
• 给form2添加了id属性，方便更精准地定位表单元素
• 可选的验证逻辑可以帮你确保必填字段已填写，避免无效提交

内容的提问来源于stack exchange，提问作者Babar