Question

问题是readForm（）函数不会从$（＆＃34; #submitButton）.on（＆＃34; click＆＃34;，readForm）返回对象。我很困惑，因为onclick事件正在运行，因为console.log（＆＃34; working＆＃34;）行记录了＆＃34;工作＆＃34;单击#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>

我对这一切都很陌生，所以非常感谢所有人的帮助。感谢。

Answer 1

试试这个：

$(document).ready(function () {
  $("#submitButton").on("click", function() {
    var result = readForm();
    console.log(result);
  });
});

Answer 2

$(document).ready(function () {
    $("#submitButton").on("click", readForm);
});

你问为什么readForm什么都不返回，但你怎么知道它什么时候回来？

$(document).ready(function () {
    $("#submitButton").on("click", function readFormReturn() {
        console.log(readForm())
    });
});

在这里你应该记录readForm返回的内容

Answer 3

该函数返回一个值，你只是没有对它做任何事情，如果你用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事件调用不返回对象的函数

3 个答案: