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>

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

score 3 · Accepted Answer

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

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

我对您的代码进行了一些更改，但您是这样的：

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

修改后的代码如下：

<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 替换表单上的 NAME选择器。还建议使用 ID 选择器来获取输入，因为 ID 选择器比[name=something]选择器更快。（感谢gnarf的评论！）

在您的示例中，变量范围也可能有些奇怪，但是上面的代码应该对学习有好处:)

score 1 · Accepted Answer

您编写的方法仅在页面加载后运行一次。此时输入元素不包含值（即 $("#first_name").text() == ''）。您可以将日志记录语句绑定到元素的 keyup 事件，以查看正在输入其中的文本。

$(function() {
    // this code only runs once
    var first_name = $('#content').find('input[name="first_name"]').val();
    console.log(first_name);

    $('#first_name').keyup(function() {
       // this code fires everytime a key is released on the element
       console.log($(this).val());
     });
  })

plnkr 上的演示

score 0 · Accepted Answer

这是您的代码的JSFiddle。

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


$('#content form').on('submit', function () {
    console.log($('#content').find('input[name="first_name"]').val());
});

“某事”是默认值。在文本框中尝试其他单词，您将在控制台中看到新值。

score 0 · Accepted Answer

根据您的代码，您将获得正确的结果。

您定义的函数永远不会被调用，因为您没有将任何事件附加到它。

我已经修改了你的代码，你可以在这里检查它的工作情况

$(document).ready(function(){
    $("#first_name").focusout(function(){
    var first_name = $(this).val();
     alert(first_name);
  });
});

score 0 · Accepted Answer

$('#content form').on('submit', function () {
     console.log(
       $(this).find('input[name="first_name"]').val()
      );
     return false;
});

score -2 · Accepted Answer

编辑：在输入字段中输入内容后，您必须运行 jQuery 选择。现在当你运行它时，它是空的

编辑：尝试使用 jQuery 文档 http://api.jquery.com/on/中的“on”

$('#content form').on('submit', function () {
    console.log($('#content').find('input[name="first_name"]').val(););
}

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

6 回答 6

Related

Reference