How to Link a Jquery Function to a Submit Button and Pass the Form as Input

Question

I have an HTML form that contains the values of things. The form is as follows:

<div class = "window" id="caloriegenerator">
<h1>Generate Recommended Calories</h1>
<p>Using the Mifflin-St Jeor Equation</p>
<form id="form2">
<label>Patient Gender: Male</label><input type="radio" name="gender" value="male">
<label>Female</label> <input type="radio" name="gender" value="female"><br>
<label>Patient Age: </label><input type="number" name="age"><br>
<label>Patient Height- </label><br>
<label>Feet:  </label><input type="number" name="heightfeet"><br>
<label>Inches: </label><input type="number" name="inches"><br>
<input type="button" id="caloriebutton" name="caloriegeneratorbutton" value="Generate     Recommendation">
</form>
</div>

In my CSS Stylesheet, I have this JQuery set up:

$('#caloriebutton').click(function() {
    generateCalories($(this));
});
};

This links to the function in Javascript here:

function generateCalories(form) {
console.log("Begin generating calories");
var weight = form.weight.value;
var activitynumber= form.activitynumber.value;
var feetheight = form.heightfeet.value;
var inchesheight = form.inches.value;
var gender = form.gender.value;
var age = form.age.value;
var heightincm = (((feetheight*12)+inchesheight)/0.3937);
Parse.Cloud.run("generateRecommendedCaloriesForMen", {"weight": weight, "activityNumber": activitynumber, "heightinCM":heightincm, "sex":gender, "age": age, "heightInFeet": feetheight, "heightInches": inchesheight}, {
success: function(result) {
    console.log("Successfully ran generateRecommendedCaloriesForMen Function!");
    console.log(result);
    },
    error: function(error){
    console.log("You goofed.");
    console.log(error);
    }
    });
};

I don't see the console.log message to indicate that the function is running. What am I doing wrong?

Answer 1

Here is the what you are doing wrong:

$('#caloriebutton').click(function() {
generateCalories($(this).parent()); });

OR

$('#caloriebutton').click(function() {
generateCalories($("#form2")); });

You are referencing to button not the form