Ajax的data参数传递POST值时获取输入框内容为undefined如何解决

核心原因 #

当前页面存在重复的id值link_code：

• 第一个id="link_code"绑定在<form>标签上
• 第二个id="link_code"绑定在隐藏的<input>标签上
  jQuery的ID选择器$('#link_code')默认只会匹配DOM树中第一个出现的对应id的元素，也就是form标签，而form标签本身没有value属性，所以取值返回undefined。

修复方案 #

任选以下一种方案修改即可：

方案1：修正重复id，保证id全局唯一 #

DOM规范要求id属性全局唯一，修改重复的id后取值即可正常：

1. 调整表单代码：

<a href="javascript:DoPost()">GO</a>
<form action="allproducts.php" id="link_code_form" name="postlink" method="post">
  <input type="hidden" id="link_code_input" name="name_link" value="2"> 
</form>

2. 调整Ajax取值代码：

// 推荐用.val()方法获取表单元素值，兼容性优于.attr("value")
var name_link = $('#link_code_input').val();

方案2：通过其他选择器定位input，无需修改现有id #

如果不想调整现有id赋值，可直接通过name属性或层级选择器定位到目标input：

// 方法1：通过name属性匹配目标输入框
var name_link = $('input[name="name_link"]').val();

// 方法2：通过form和input的层级关系定位
var name_link = $('form#link_code input[name="name_link"]').val();

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