将 HTML 表单中的输入存储到 jquery vars 中的问题答案

【问题标题】：Issue with storing inputs from HTML form into jquery vars将 HTML 表单中的输入存储到 jquery vars 中的问题
【发布时间】：2017-06-11 14:09:12
【问题描述】：

再次，对编程非常陌生，从 jquery 和 ajax 开始。我已经能够毫无问题地使用 jQuery，但现在我想扩展到 ajax 以根据用户输入来讨论 API 调用。在下面的 sn-p 中，我粘贴了表单提交的 jquery 处理程序部分。如果我控制台记录 jquery 函数 (.val()) 中的各种输入，我会看到值。如果我尝试在函数中创建一个值，并将其设置为输入的 .val() ，我会得到未定义。我陷入了什么愚蠢的境地？

jquery 部分：

$(document).ready(function(){

        $("#user_in").submit(function() {

            var city=$(city).val();
            var state=$(state).val();
            var year=$(year).val();
            var month=$(month).val();
            var day=$(day).val();

            console.log(city);  //returns undefined
            console.log($(city).val()); //returns the form submission

                  <div id="form_div">
                    <form id="user_in" action="index.html" method="post">
                            <p>Please enter your city name:</p><input type="text" name="city" id="city"><br>
                            <p>Please enter your two letter state:</p><input type="text" name="state" id="state"><br>
                            <p>Please enter the year of history (YYYY):</p><input type="text" name="year" id="year"><br>
                            <p>Please enter the month (MM ):</p><input type="text" name="month" id="month"><br>
                            <p>Please enter the day (DD):</p><input type="text" name="day" id="day"><br>
                            <input type="submit" value="Submit">
                        </form>
                    </div>

【问题讨论】：

你能展示你的 HTML 吗？看来你的选择器是错误的
分享您的 HTML 代码，以便我们帮助您了解如何从 HTML 元素中获取价值
grrrr。我还不知道这个界面。如何在不渲染的情况下输入 html 代码？
将您的 HTML 代码粘贴到编辑器中，突出显示您的 HTML 代码并按 { } 图标

标签： jquery

【解决方案1】：

既然你已经分享了你的HTML，试试这个吧：

$(document).ready(function(){

    $("form").submit(function() {

        var city=$("#city").val();
        var state=$("#state").val();
        var year=$("#year").val();
        var month=$("#month").val();
        var day=$("#day").val();

        console.log(city);  //returns undefined

我强烈建议您阅读有关 jQuery Selectors 的页面

【讨论】：

【解决方案2】：

根据您的input 元素，您可以通过此使用jQuery 获取它的价值

var city = $('#city').val();

这基本上意味着您通过 id 属性获得了 input 值。

或者你也可以这样做：

var city = $('input[name="city"]').val();

这基本上意味着您通过 name 属性获得了 input 值

【讨论】：

【解决方案3】：

现在我不知道你的 HTML 是什么样的，但我建议你看看你的元素和 id 或 class。

如果城市、州、年、月和日是元素的 ID，您的代码应如下所示：

$("form").submit(function() {

        var city=$('#city').val(); //gets you the value from an element with id="city"
        var state=$('#state').val();
        var year=$('#year').val();
        var month=$('#month').val();
        var day=$('#day').val();

        console.log(city);  
        console.log($('#city').val());
})

如果名称是类，则将 # 更改为 .在每个 jQuery 调用中。

【讨论】：