How to do a calculation from user input and show the output and save to a database.

I want to get the weight and height from a user and then calculate their BMI. I have created regular javascript for this but I’m trying to write wix code to do it using the text boxes already on the form. I have named them in properties so they can be referred to in code. The first user input box is weight and the second is height. At this stage user won’t have submitted these values to the database. I want them to be able to Calculate their BMI and then add it to the database. I have been able to successfully embed the BMI calculator below using the html embed. I feel that it would be better to use the form and buttons to calculate than having separate code embedded as it looks different.
Here is my regular java script code


So far I have learned how to use $w to refer to an element. ie $w(‘#btnBMI’).label = “Calculate BMI”;
I have attempted to calculate the BMI using the following code in a button called BMI.
export function buttonBMI_click(event) {
var BMI= parseFloat(w$(“#weight”)/parseFloat(w$(“#height”)/100^2);
}
This produces a parsing error.
I want to then output this value back to txtBMI which will then be saved to the database when the users clicks submit.

I am not sure what to do. I’ve been looking for examples of how to do calculations but haven’t really found what I need.

If I can’t get this to work I can have a calculations page with the embedded javascript I created above. The users then can then enter in the information themselves.

Thanks in advance.

Sam

Sam
Elements have properties and methods associated with them. So just as you used the label property for the element $w(’ #btnBMI ‘) element you also need to use a property to read and write the displayed value for $w(’#weight’) and $w(‘#height’). So what you need is their values (since these are textInput elements).

A good rule of thumb is to type the element name and then add a ‘.’ character after the element name…

$w('#weight').

This will then bring up an auto complete list for you to choose the correct property. So a text field that doesn’t accept input has a text property and would be access like this:

$w('#text32').text = "Fred";
console.log($w('#text32').text); // Prints "Fred"

For input fields you need the value

console.log(`Weight is ${$w('#weight').value}`); // Prints weight  

So your code will probably work if you use a value in the calculation. Also make sure you close function argument lists or you will get errors too. See how I have added a closing parenthesis after accessing each value. This allows parseFloat to do it’s job!

var BMI= parseFloat(w$("#weight").value)/parseFloat(w$("#height").value)/100^2);

I suggest you spend some time playing on the w3schools javascript tutorial web site and get a little more familiar with javascript :wink: Also get familiar with the MDN documentation and finally the Wix Code API reference here: https://www.wix.com/code/reference/Overview.html

Note the info on Elements and TextInput

Thanks so much. l’ll try that out. Sam

Hi Steve after going over everything you wrote above. I think I went to every page and I’d pick up something from each page. I tested it using cobsole.log and setting values for weight and height until I got the BMI calculation to work. Once I had that I needed the button to actually make the calculation. Finally I went back to what you’d written earlier about the label I’d done and how it worked and your comment on values. It seems so simple now. I have spent quite a bit of time getting all of the calculations to work in javascript. It was now a matter of putting altogether.

$w.onReady( function () {

});

export function btnbmi_click(event) {
let BMI= parseFloat($w(“#weight”).value)/(parseFloat($w(“#height”).value)/100^2)
$w(‘#txtbmi’).value = BMI;
}
I now just have to make sure that I create an update button and the BMI is saved to the database.
I think I could have done the calculations with data hooks but I want the user to see their bmi on the screen.

Thanks for your help.

Sam

What is the url of your page?

We’re not finished yet. I added two more calculations since this morning. I now have a new problem. Making a radio button show a particular image. I’m still working on that. I have it working in javascript but just trying to get the wix code to work. Using some of the pages you recommended to learn how to format the code correctly. Will let you know when it’s live.

Thanks again for your help Steve. Last night I was able to explain to someone how to do calculations in the forum. Hopefully I was able to pay it forward.

@sjp4 hi,
I was followong this article a few days ago, cause I have the same issue. :wink:

may I kindly ask you, how you managed to save your calculation to the database/collection !?

Hi Thomas,
I’ve been having some trouble with the database lately myself, but originally I watched one of the wix video’s on user input to figure how to do it. On the page you have to add the dataset you created and then once you do that. (Most items have a database symbol on them.) Here you choose to link to the dataset you have already attached to the page. Once you choose the database that is linked to the page then you select the field you want to save it to. Make sure the data types in the database match what is being collected. i.e number to number. Then add a button and called it submit. Then attach the button to the database and select the submit option from the list and then it should work. If you have anymore questions or need further clarification just ask.

Sam