Ajax中无法获取input输入框值的问题排查求助

核心问题：事件委托容器错误 #

你的点击事件绑定在了$('.login-box')上，但发送按钮.send-otp-btn并不在.login-box这个div内部，导致事件处理函数根本不会被触发。当你点击按钮时，表单会执行默认提交行为（页面刷新），你看到的"返回null"其实是页面刷新后输入框重置为空的状态，而非代码获取值时的问题。

修复步骤 #

1. 修正事件绑定的委托元素
   将事件绑定从$loginBox.on('click', '.send-otp-btn', ...)改为绑定到表单#loginForm上，因为按钮属于这个表单：

   $loginForm.on('click', '.send-otp-btn', function (e) {
       // 原事件逻辑保持不变
   });
   

   或者直接绑定到按钮元素上（适合静态DOM）：

   sendOtpBtnEl.on('click', function (e) {
       // 原事件逻辑保持不变
   });
   

2. 精准获取输入框值
   为避免全局选择器的潜在冲突，建议通过表单上下文查找输入框：

   • 替换document.getElementById("phone").value为：

     var phone = $loginForm.find("#phone").val();
     

   • 替换$("input[name='phone']").val()为：

     $loginForm.find("input[name='phone']").val()
     

3. 额外验证：检查输入框有效性
   由于phone输入框类型是number，如果用户输入了非数字内容，浏览器会清空其value。可以在获取值前增加类型校验：

   var phone = $loginForm.find("#phone").val();
   if (!phone || isNaN(phone)) {
       utils.toast('请输入有效的手机号码', 'error');
       $(this).prop('disabled', false);
       return false;
   }
   

验证修复效果 #

修改后点击"Continue"按钮，事件处理函数会正常执行，控制台输出的phone值应该和输入框内容一致，不会再返回null。

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