使用jQuery处理HTML表单遇问题：获取输入值返回undefined

嗨，这个问题其实很常见——你犯了一个拼写错误，导致jQuery找不到对应的输入框，所以.val()返回了undefined。咱们仔细核对一下：

首先看你的HTML里的邮箱输入框：

<input type="email" placeholder="Email Address" id="signup-email">

它的ID是signup-email（注意是signup，字母顺序为 s-i-g-n-u-p）

但你的jQuery代码里写的是：

var email = $('#singup-email').val();

这里你把ID写成了singup-email（字母顺序变成了 s-i-n-g-u-p），完全是拼写错误！jQuery找不到匹配的元素，自然返回undefined。

另外还有个小细节：e.preventDefault()不需要传入e参数，直接调用就可以了。

修正后的完整代码 #

$("#singup").submit(function (e) {
    // 修正ID拼写：用 signup-email 替代 singup-email
    var email = $('#signup-email').val();
    console.log(email);
    e.preventDefault(); // 移除多余的参数
});

顺带提一句：你的表单ID是singup（同样是拼写错误，正确写法应该是signup），虽然现在不影响submit事件的绑定，但建议统一改成正确拼写，避免后续再踩类似的坑。比如把HTML里的<form id="singup">改成<form id="signup">，jQuery里的绑定也改成$("#signup").submit(...)，这样代码更规范。

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