如何使用jQuery通过name属性选取表单元素并实现双表单数据同步

1. jQuery通过name属性选取元素的语法 #

要定位指定表单内对应name的元素，使用jQuery属性选择器即可，通用格式为：
$("表单选择器 [name='目标name属性值']")

针对你给出的代码示例，对应选取写法举例：

• 选取f1表单内的first name输入框：$("form[name='f1'] input[name='fname2']")
• 选取f2表单内的city只读输入框：$("form[name='f2'] input[name='city1']")

2. 功能实现代码 #

你可以直接把以下代码写入JS1.js文件，根据你的需求选对应场景的代码即可：

场景A：输入实时同步到f2 #

无需走后端请求，用户在f1输入内容时自动同步到f2：

// 页面加载完成后执行
$(document).ready(function() {
  // 给f1里除提交按钮外的所有输入框绑定输入事件
  $("form[name='f1'] input:not([type='submit'])").on('input', function() {
    // 获取当前输入框的name，替换后缀2为1得到f2对应元素的name
    const targetName = $(this).attr('name').replace('2', '1');
    // 赋值给f2对应输入框
    $("form[name='f2'] input[name='" + targetName + "']").val($(this).val());
  });
});

场景B：提交表单走AJAX后同步 #

需要先将数据提交到后端Servlet2，请求成功后再同步内容到f2：

// 页面加载完成后执行
$(document).ready(function() {
  // 监听f1表单提交事件
  $("form[name='f1']").submit(function(e) {
    // 阻止表单默认跳转提交
    e.preventDefault();
    // 序列化表单所有数据
    const submitData = $(this).serialize();
    // 发送AJAX请求
    $.ajax({
      url: 'Servlet2',
      type: 'post',
      data: submitData,
      success: function() {
        // 请求成功后批量同步所有输入内容到f2
        $("form[name='f1'] input:not([type='submit'])").each(function() {
          const targetName = $(this).attr('name').replace('2', '1');
          $("form[name='f2'] input[name='" + targetName + "']").val($(this).val());
        });
        alert('提交成功');
      },
      error: function() {
        alert('提交失败，请重试');
      }
    });
  });
});

3. 单个输入框点击事件监听 #

如果你需要判断特定输入框被点击，单独绑定点击事件即可，示例如下：

// 监听f1中出生日期输入框的点击事件
$("form[name='f1'] input[name='dob2']").click(function() {
  // 此处写对应的自定义操作逻辑
  console.log('出生日期输入框被点击');
});

内容的提问来源于stack exchange，提问作者B.R.MADHIVADHANAN