jquery - Jquery 输入值返回 null（未定义）
问题描述
名字和姓氏值都返回为空或未定义，与 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">
© 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>
解决方案
您需要在 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()
推荐阅读
- python - 如何在 Python 中运行多个文本文件作为输入
- python - 使用 pandas 和 numpy 在 python 中创建矩阵
- laravel - 根据当前日期获取一周中给定日期的日期 Carbon Laravel
- git - Git服务器不随便显示最新的puused文件
- python - 如何在单击 python 时更改 tkinter 按钮的文本
- python - 如何在python中打印多维数组中的每个项目
- firebase - 在不注销的情况下更新 isEmailVerified
- javascript - 不在mongodb数据库中提交数据
- javascript - Redux 工具包从 thunk 访问状态
- java - 如何进行半屏活动？