jQuery点击事件中获取表单数字字段值返回undefined的问题

我明白你现在遇到的麻烦——明明表单就在那儿，却拿不到数字字段的值，还报了form-103 undefined的错误，这确实挺让人头疼的。咱们一步步来排查和解决这个问题：

1. 先确认表单元素是否能被正确找到 #

很多时候出现undefined，都是因为选择器没定位到对应的表单元素。你得先检查自己的选择器是不是写错了：

• 比如表单ID是form-103，那用原生JS要写document.getElementById('form-103')，用jQuery就是$('#form-103')，别把ID拼写错、少写前缀哦。
• 可以先打印一下表单元素，确认是否存在：

// 原生JS测试
const targetForm = document.getElementById('form-103');
console.log(targetForm); // 输出null的话，说明选择器错了

// jQuery测试
const $targetForm = $('#form-103');
console.log($targetForm.length); // 输出0的话，说明没找到表单

2. 获取数字字段值的正确姿势 #

你提到用.children()和.attr('value')无效，大概率是方法用错了：

• 首先，.children()只能获取直接子元素，如果数字字段嵌套在其他标签里（比如<div>），就找不到；建议用.querySelector()（原生）或.find()（jQuery）来定位字段。
• 其次，.attr('value')只能拿到字段的初始默认值，用户修改后的实时值，原生JS要用.value属性，jQuery要用.val()方法。

举个实际的例子，假设你的HTML结构是这样：

<form id="form-103">
  <input type="hidden" name="item_id" value="103">
  <div class="field-group">
    <input type="number" name="count" class="number-input" value="1">
  </div>
  <button type="submit">提交</button>
</form>

原生JS写法 #

// 先拿到表单，再找数字字段
const form = document.getElementById('form-103');
const numField = form.querySelector('input[type="number"]');
// 或者用class定位更精准
// const numField = form.querySelector('.number-input');

// 获取实时值，转成数字类型
const numValue = numField.value;
const numValueAsNumber = parseInt(numValue, 10);
console.log(numValue);

jQuery写法 #

// 找到表单后，用find定位字段，再用val()拿值
const numValue = $('#form-103').find('.number-input').val();
const numValueAsNumber = parseInt(numValue, 10);
console.log(numValue);

3. 确保代码在DOM加载完成后执行 #

如果你的JS代码写在页面<head>里，或者DOM还没渲染完就执行了，那肯定找不到表单元素。解决方法很简单：

• 把JS代码放在<body>标签的最末尾；
• 或者用加载事件包裹代码：

// 原生JS
document.addEventListener('DOMContentLoaded', function() {
  // 所有表单操作代码都放在这里
});

// jQuery
$(document).ready(function() {
  // 所有表单操作代码都放在这里
});

4. 提交表单时的注意事项 #

如果你是在点击提交按钮时获取值，一定要阻止表单的默认提交行为，否则页面会直接刷新，你根本看不到控制台的输出：

// 原生JS
const form = document.getElementById('form-103');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面刷新
  const numValue = this.querySelector('.number-input').value;
  console.log(numValue);
  // 这里可以写后续逻辑，比如AJAX提交数据
});

// jQuery
$('#form-103').on('submit', function(e) {
  e.preventDefault();
  const numValue = $(this).find('.number-input').val();
  console.log(numValue);
});

如果按照上面的步骤操作后还是有问题，可以把你的HTML结构和JS代码贴出来，这样能更精准地帮你定位问题~

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