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

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

从您的代码看起来的方式来看，您看起来确实希望表单的按钮来执行控制台日志。

我已经改变了你的代码，但这是你的方式：

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

以下代码更改：

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

在您的示例中，变量作用域也可能有点奇怪，但上面的代码应该对学习有益：）

Answer 2

您编写的方法仅在页面加载后运行一次。此时input元素不包含值（即$（“＃first_name”）。text（）==''）。您可以将logging语句绑定到元素的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());
     });
  })

Demo on plnkr

Answer 3

以下是代码的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());
});

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

Answer 4

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

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

我修改了您的代码，您可以检查它是否有效here

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

Answer 5

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

Answer 6

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

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

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

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

6 个答案: