按钮onclick事件调用不返回对象的函数
[英]Button onclick event calls function that isn't returning object
问题描述
问题是readForm（）函数不会从$（“＃submitButton）.on（” click“，readForm）返回对象。我很困惑，因为从console.log（” working单击#submitButton按钮时，“）行确实将“工作”记录到控制台。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-6">
<h2>Employee Page</h2>
<form id="employeeProfile">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" type="text" class="form-control" placeholder="Please enter first name.." name="firstName">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" class="form-control" placeholder="Please enter last name." name="lastName">
</div>
<div>
<label for="age">Age:</label>
<input id="age" type="number" class="form-control" placeholder="Please enter your age." name="age">
</div>
<div class="radio-group" id="gender">
<h5>
<b>Gender:</b>
</h5>
<div class="radio">
<label>
<input id="genderM" type="radio" name="gender" value="male">Male:
</label>
</div>
<div class="radio">
<label>
<input id="genderF" type="radio" name="gender" value="female">Female:</label>
</div>
<div class="radio">
<label>
<input id="genderOth" type="radio" name="gender" value="other" checked="checked">Other:</label>
</div>
</div>
<div>
<label for="salary">Salary:</label>
<input id="salary" type="number" class="form-control" placeholder="please enter you salary." name="salary">
</div>
<div class="manager">
<label for="manager">Manager:</label>
<input id="manager" type="checkbox" name="managerY">
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea id="comments" class="form-control" rows="3" placeholder="Place any comments here." name="comments"></textarea>
</div>
<button id="submitButton" type="button" class="btn btn-primary">Submit Profile</button>
<button id="calculateTax" type="button" class="btn btn-default">Calculate tax</button>
</form>
</div>
</div>
<script>
$(document).ready(function () {
$("#submitButton").on("click", readForm);
});
function readForm() {
console.log("working");
return {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
age: $("#age").val(),
gender: $('input[name=gender]:checked').val(),
salary: $("#salary").val(),
manager: $("#manager").prop("checked"),
comments: $("#comments").val()
}
};
</script>
</body>
</html>
我是这一切的新手，因此不胜感激。 谢谢。
3 个解决方案
解决方案1
0 已采纳 2018-01-18 17:23:07
尝试这个：
$(document).ready(function () {
$("#submitButton").on("click", function() {
var result = readForm();
console.log(result);
});
});
解决方案2
0 2018-01-18 17:24:20
$(document).ready(function () {
$("#submitButton").on("click", readForm);
});
您问为什么readForm什么也不返回，但是您怎么知道什么时候返回呢？
$(document).ready(function () {
$("#submitButton").on("click", function readFormReturn() {
console.log(readForm())
});
});
在这里，您应该记录一下readForm返回的内容
解决方案3
0 2018-01-18 17:35:36
该函数正在返回一个值，您只是对其不执行任何操作，如果您在哪里用console.log替换您的返回值，您将看到它确实返回了。
console.log( {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
age: $("#age").val(),
gender: $('input[name=gender]:checked').val(),
salary: $("#salary").val(),
manager: $("#manager").prop("checked"),
comments: $("#comments").val()
});
但是，如果要对数据进行处理，则必须在函数内部进行处理，因此请将信息设置为变量，如下所示：
var data = {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
age: $("#age").val(),
gender: $('input[name=gender]:checked').val(),
salary: $("#salary").val(),
manager: $("#manager").prop("checked"),
comments: $("#comments").val()
};
并执行函数内部的操作，因为您无法通过on事件link返回数据。
onclick事件未调用我的函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.