jQuery输入值返回null(未定义)

时间:2019-07-23 04:26:03

标签: jquery asp.net-core

名字姓氏值都返回为空或未定义,与console.log数据相同。

但是剃刀页面防伪令牌在jquery中可以正常工作

我尝试使用$('#Last_Name')。val()并尝试使用$('#Add_Form input [name =“ First_Name]”')。val();但似乎确实可行

这是我的代码

$(document).ready(function () {       
    $('#Add_Submit').click(function (e) {
        e.preventDefault();
        console.log(data);
           alert(first_Name + ' ' + last_Name);
        alert(first_Name + ' ' + last_Name);
        alert(first_Name2 + ' ' + last_Name2);
        Dawn(data);

    });


   var last_Name2 =  $("#First_Name").val();
    var first_Name2 = $("#Last_Name").val();

      var last_Name =  $('#Add_Form input[name="First_Name]"').val();
    var first_Name = $('#Add_Form input[name="Last_Name]"').val();
    var email = "$('#Email').val()";
      var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();

两个值都返回null

布局页面

布局页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Xxx</title>

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link href="~/lib/xa/css/main.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJ TNrHIW2I5f" crossorigin="anonymous"></script>



@*<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>*@
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>


</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0i voRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>

最终我的剃须刀页面

<form asp-action="Address_Add" id="Add_Form">

                @Html.AntiForgeryToken()
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>



                <div class="form-group ">
                    <label asp-for="Title" class="control-label"></label>
                    @Html.DropDownList("AddressType", new SelectList(ViewBag.Titled, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
                    <span asp-validation-for="Title" class="text-danger"></span>
                </div>

                <div class="form-group">
                    <label asp-for="First_Name" class="control-label">First Name</label>
                    <input asp-for="First_Name" required class="form-control" maxlength="50" />
                    <span asp-validation-for="First_Name" class="text-danger"></span>
                </div>

                <div class="form-group">
                    <label asp-for="Last_Name" class="control-label">Last Name</label>
                    <input asp-for="Last_Name" required class="form-control" maxlength="50" />
                    <span asp-validation-for="Last_Name" class="text-danger"></span>
                </div>


                <div class="form-group">
                    <label asp-for="Gender" class="control-label">Gender</label>
                    @Html.DropDownList("AddressType2", new SelectList(ViewBag.Gender, "Value", "Text"), new { @class = "form-control", @style = "width: 50px;" })
                    <span asp-validation-for="Gender" class="text-danger"></span>
                </div>




                <br />
                <hr />
                <br />
                <div class="form-group">
                    <input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
                </div>
                <br />
                <hr />
                <br />
            </form>

这是怎么了?

更新:这是我的完整html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personals - xxxxx</title>


    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link href="/lib/xxxxx/css/main.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/MakNTNrHIW2I5f" crossorigin="anonymous"></script>



    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>




    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>

    </header>
    <div class="container">
        <div class="topnav text-center">
            <a class="active" href="#home">Home</a>

            <input type="text" placeholder="Search.."><button type="button" class="btn btn-primary btn-sm">Search</button> <div class="mr-6">
                <a class="dept dropdown-item" href="#">

                </a>
            </div>
        </div>


        <div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
            Use this space to summarize your privacy and cookie use policy. <a class="alert-link" href="/Home/Privacy">Learn More</a>.
            <button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string=".AspNet.Consent=yes; expires=Wed, 22 Jul 2020 04:52:05 GMT; path=/; secure">
                <span aria-hidden="true">Accept</span>
            </button>
        </div>
        <script>
        (function () {
            var button = document.querySelector("#cookieConsent button[data-cookie-string]");
            button.addEventListener("click", function (event) {
                document.cookie = button.dataset.cookieString;
            }, false);
        })();
        </script>

        <main role="main" class="pb-3">



            <script>


    $(document).ready(function () {





        $('#Add_Submit').click(function (e) {
            e.preventDefault();




        var data = { __RequestVerificationToken: token, Email: email, First_name: first_Name, Last_name: last_Name };

            console.log(data);
            alert(first_Name + ' ' + last_Name + ' '+  token + '' + ehi);
            alert(first_Name2 + ' ' + last_Name2 + ' '+  token+ '  '+ehi);

            Dawn(data);
              alert('back on track2');
        });

        var ehi = 'test';
          var last_Name2 =  $("#First_Name").val();
        var first_Name2 = $('#Last_Name').val();

          var last_Name =  $('#Add_Form input[name="First_Name]"').val();
        var first_Name = $('#Add_Form input[name="Last_Name]"').val();
        var email = "$('#Email').val()";
            var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();





           function Dawn(data) {


                        $.ajax({

                            type: "POST",
                            url: "Personal",
                            dataType: 'json',
                            data: data,

                            success: function (message) {


                                $('#Greetings').slideDown(900).show().text(message.msg);
                                $('#Greetings2').slideDown(900).show().text('<div><a href="/accounts">Continue</a></div>');


                            },
                            error: function (message) {

                                $('#list').show().html(message.quantity + ' ' + message.total).css("blue");
                            }

                        });
        };

      alert(first_Name + ' ' + last_Name + ' '+  token);
            alert(first_Name + ' ' + last_Name + ' '+  token);

    });
            </script>






            <div class="container">
                <div class="col-md-12"><div class="col-md-6"><h2>Personal Details</h2> </div><div class="col-md-6 text-right">Others here</div></div>
                <div class="row">
                    <div class="col-md-3">


                        <div class="Navigation_Accounts table-bordered">

                        </div>
                    </div>
                    <div vclass="col-md-1">
                    </div>
                    <div class="col-md-8">
                        <form id="Add_Form" action="/Users/Address_Add" method="post">






                            <div class="form-group ">
                                <label class="control-label" for="Title">Title</label>
                                <select class="form-control" id="AddressType" name="AddressType" style="width: 50px;">
                                    <option value="1">Mr</option>
                                    <option value="2">Mrs</option>
                                    <option value="3">Miss</option>
                                    <option value="7">Other</option>
                                </select>
                                <span class="text-danger field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label" for="First_Name">First Name</label>
                                <input required class="form-control" maxlength="50" type="text" id="First_Name" name="First_Name" value="" />
                                <span class="text-danger field-validation-valid" data-valmsg-for="First_Name" data-valmsg-replace="true"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label" for="Last_Name">Last Name</label>
                                <input required class="form-control" maxlength="50" type="text" id="Last_Name" name="Last_Name" value="" />
                                <span class="text-danger field-validation-valid" data-valmsg-for="Last_Name" data-valmsg-replace="true"></span>
                            </div>


                            <div class="form-group">
                                <label class="control-label" for="Gender">Gender</label>
                                <select class="form-control" id="AddressType2" name="AddressType2" style="width: 50px;">
                                    <option value="1">male</option>
                                    <option value="2">female</option>
                                </select>
                                <span class="text-danger field-validation-valid" data-valmsg-for="Gender" data-valmsg-replace="true"></span>
                            </div>




                            <br />
                            <hr />
                            <br />
                            <div class="form-group">
                                <input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
                            </div>
                            <br />
                            <hr />
                            <br />
                            <input name="__RequestVerificationToken" type="hidden" value="CfDJ8IPMXGj67c9AsKAqp5ytxNgw3nQRaoxH5ekN2mt67i-rJK0fT7U_EnyJ4pJzXxftBIZpYdFHhoCBJc9bas0yw-HH2d5Ia9Y-XuHwX7SKCLNVGk3-2zkZX6WhAcz4JOW55KiSETnvgedW_yXzU8U2ddI" />
                        </form>
                    </div>
                </div>
            </div>


        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - xxxxx - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>


    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>


    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

您需要在onclick函数中移动变量。像这样:

$(document).ready(function () {       
    $('#Add_Submit').on("click", function (e) {
        e.preventDefault();
        var last_Name2 =  $("#First_Name").val();
        var first_Name2 = $("#Last_Name").val();

        var last_Name =  $('#Add_Form input[name="First_Name]"').val();
        var first_Name = $('#Add_Form input[name="Last_Name]"').val();
        var email = "$('#Email').val()";
        var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();
        console.log(data);
        alert(first_Name + ' ' + last_Name);
        alert(first_Name + ' ' + last_Name);
        alert(first_Name2 + ' ' + last_Name2);
        Dawn(data);
    });   
})

此外,最好使用.on("click")代替.click()