Button onclick event calls function that isn't returning object

Question

The problem is that the readForm() function won't return the object from $("#submitButton).on("click",readForm). I'm confused because the onclick event is working since the console.log("working") line does log "working" to the console when the #submitButton button is clicked.

    <!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>

I'm new to all this so any and all help is greatly appreciated. Thanks.

What makes you think the object is not returned? It is, but you're not receiving the value anywhere. — Teemu, Jan 18 '18 at 17:21
The `readForm` function is returning the object but you are doing nothing with it, do you need send it to the server? — Javier Gonzalez, Jan 18 '18 at 17:22

score 0 · Accepted Answer · answered Jan 18 '18 at 17:23

0

Try this:

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

answered Jan 18 '18 at 17:23

Pop-A-Stash

6,572
5
28
54

score 0 · Answer 2 · answered Jan 18 '18 at 17:24

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

You ask why readForm return nothing, but how do you know when it's returning ?

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

Here you should log what readForm is returning

score 0 · Answer 3 · answered Jan 18 '18 at 17:35

The function is returning a value, you are just not doing anything with it, if you where to replace your return with a console.log, you will see that it does return.

    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()
    });

But if you want to do something with the data, you will have to do it inside the function, so set that informaton into a variable, like this:

    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()
    };

And do the operations inside the function, because you can't return the data through the on event, link.

Button onclick event calls function that isn't returning object

3 Answers3