如何用jQuery获取输入框值并动态插入指定DOM元素（规避表单重复name）

你的代码问题分析 #

• jQuery 里没有 .value() 方法，获取输入框的值要用 .val()
• 逻辑方向搞反了：你要做的是把输入框的值放到目标区域，而非把目标区域的内容赋值给输入框

正确实现代码 #

一次性设置值

如果只需要页面加载时把输入框的值插入到Case ID后的区域，用这段代码：

// 获取输入框的值
const caseId = $('#csg_name').val();
// 将值插入到.modName的span中
$('.modName').text(caseId);

实时同步输入框内容

如果需要用户修改输入框内容时，目标区域也实时更新，加上事件监听：

// 页面加载时先初始化一次
$('.modName').text($('#csg_name').val());

// 监听输入框的输入/变化事件，实时同步
$('#csg_name').on('input change', function() {
  $('.modName').text($(this).val());
});

关于之前重复name的额外提示 #

你之前用clone和insertAfter导致表单提交重复name的问题，解决思路是：

• 克隆表单元素后，修改其name属性为唯一值，比如：$(clonedElement).attr('name', 'something_' + new Date().getTime())
• 如果克隆的元素不需要随表单提交，直接移除name属性：$(clonedElement).removeAttr('name')

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