javascript - jQuery 如何从表单中获取输入？

Question

<script>
  $(function() {
    var first_name = $('#content').find('input[name="first_name"]').val();
    console.log(first_name);
  })
</script>

<div id="content">
    <form name="info">
    First Name: <input type="text" id="first_name" name="first_name"><input type="submit" id="button">
    </form>
</div>

不在控制台中打印名称，我在这里做错了什么？

Answer 1

现在的问题是您编写的代码会在页面加载时立即执行。

从代码的外观来看，您似乎确实希望表单的按钮执行控制台日志。

我稍微修改了你的代码，但你会这样做:

• 选择表单和输入
• 声明变量超出范围
• 绑定(bind)到表单的提交事件
• 阻止它实际提交
• 并根据您的示例记录到控制台

修改后的代码:

<script>
$(function() {
            // Save a reference to the input
    var input = $("input[name=first_name]"),
            // Get the form itself
            form = $("form[name=info]"),
            // Storage for your first_name outside of the scope
            first_name = false;
    // Bind to the submit event on the form
    form.bind('submit', function() {
        // Set the first_name to the input's value
        first_name = input.val();
        // Log it out (per your example)
        console.log(first_name);
        // Return false to prevent the form from posting
        return false;
    });
});
</script>

<div id="content">
    <form name="info">
        First Name: 
        <input type="text" id="first_name" name="first_name">
        <input type="submit" id="button">
    </form>
</div>

我并不是说这是处理您尝试对表单执行的任何操作的最佳方式，实际上您不需要按钮上的 ID，并且可能希望将表单上的名称替换为选择器的 ID。还建议使用 ID 选择器来获取输入，因为 ID 选择器比 [name=something] 选择器更快。 (感谢gnarf的评论!)

您的示例中的变量作用域也可能有些奇怪，但上面的代码应该有助于学习:)