Question

自从我用jQuery编写代码以来已经有一段时间了，但这是一个我以前不记得的问题。我有一个简单的表格：

    <form id="location">
        <input type="text" name="city" id="city" placeholder="Enter your city" required="required">
        <input type="text" name="zip" id="zip" placeholder="Enter your zip code" required="required">
        <input type="submit" name="submit" value="GET Weather" id="submit">
    </form>

并调用以获取输入的值：

    <script>
    $('#submit').click(function() {
        var city = $('#city').val();
        var zip = $("#zip").val();
    });
    console.log(city);
    console.log(zip);
    </script>

由于某种原因，我将两个输入的HTML返回为 -

        <input type="text" name="zip" id="zip" placeholder="Enter your zip code" required="required">

为什么我没有收回输入值？

Answer 1

JS是功能范围的。您的2个变量在.submit()函数之外不存在。你必须把2个console.log放在那里。

此外，仅在调用submit时才会触发该函数。你之前基本上是在打印console.logs。

$('#submit').click(function() {
    var city = $('#city').val();
    var zip = $("#zip").val();
    console.log(city, zip);
});

Answer 2

请在全局范围内定义这两个变量，或在函数中打印这两个值，如

<script>
    var city ="", zip ="";
    $('#submit').click(function() {
        city = $('#city').val();
        zip = $("#zip").val();
        show();
    });

   function show(){
    console.log(city);
    console.log(zip);
  }  
</script>

或简单地说，

   $('#submit').click(function() {
        var city = $('#city').val();
        var zip = $("#zip").val();
    console.log(city);
    console.log(zip);    
});

目前，在您打印值的地方，它超出了这两个变量的范围。另外，我发现表单中没有action属性。

jQuery val（）问题

2 个答案: