JQuery的val()方法返回空值

Question

我很困惑，遇到了一个看似微不足道的问题，可能是因为错过了一些细节。我的问题是无法从文本框中获取值。

HTML：

<form>
        <label for="">Enter Username:</label>
        <input id="usernameText" type="text" size="30" />
        &nbsp;&nbsp;<input type="button" value="Generate" onclick="generateQuery(); return     false;" />
</form>

Javascript：

<script type="text/javascript">

        var username = $("#usernameText").val();

        function generateQuery(){

            alert(username);

        }
</script>

我做了以下的代码：if (jQuery) {.. 并确保 JQuery 已经被加载。

弹出框显示为空。

如果我将 $(document).ready(); 包含到我的脚本中，函数 generateQuery 就不会被调用。有任何想法为什么会这样吗？

<script type="text/javascript">

    $(document).ready(function(){
        var username = $("#usernameText").val();

        function generateQuery(){

            alert(username);

        }
    });     
</script>

- kaizenCoder

---

@PSR：我有，我在笔记中提到了。 - kaizenCoder

Answer 1

在函数内部分配变量。

function generateQuery(){
  var username = $("#usernameText").val();
  alert(username);
}

至于你的另一个问题，"如果我将$(document).ready();包含在我的脚本中，函数generate不会被调用。有任何想法为什么会这样吗..?"

这是因为作用域的缘故。当你添加一个document.ready处理程序时，你将generateQuery包装在一个匿名函数内，因此它对button onclick="generateQuery()" 代码不可见。

- ahren

Answer 2

这里会在页面加载时调用。因此，每当页面正在加载时，文本框都是空的。尝试将其写在一个函数中。

function generateQuery(){
  var username = $("#usernameText").val();
  alert(username);
}

当您在 document.ready 中编写代码时，它会在页面加载时调用。如果您需要用户名的值，则需要显式调用它。

- PSR

Answer 3

第一次获取该值时，这通常发生在页面首次加载时。

<script type="text/javascript">
        function generateQuery(){
            var username = $("#usernameText").val();
            alert(username);

        }
</script>

- judda

Answer 4

在这里，您正在定义函数。为了运行它，您必须调用该函数。使用此generateQuery();代码行来调用您的函数。

- keshu_vats

Answer 5

你在哪里调用这个函数？？？

我认为你需要：

<script type="text/javascript">

    $(document).ready(function(){
      generateQuery();


    });     

function generateQuery(){
  var username = $("#usernameText").val();
            alert(username);

        }
</script>

- Sangeeta

---

它被称为输入字段的onchange。 - judda