Databases
StackOverflow2013
Postsdbo
POUsing radio buttons within javascript for a calculation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing radio buttons within javascript for a calculation
    text
    copied!<p>I've been working at this for a few hours and I cannot, for the life of my figure out how to do this. </p> <p>So, I wanted to make a calculation in java-script (on the back of HTML). And I was wondering how I could get the radio button to chance the value of a number of vars. E.G (female radio button checked, var a = 10, var x = 20, etc..., but if male radio button checked, var a = 34,var x = 32, etc...)</p> <p>also along with this I wanted to know if i could do a long sum like for example (bmr = a + (x * weight) + (y * height) - (z * age)). Then finally diplay all this information on a different text field.</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;SCRIPT type="text/javascript" src="jstest.js"&gt; &lt;/SCRIPT&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="" method="post" name="caloriecalc"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Age:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="age" size="5" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Gender:&lt;/td&gt; &lt;td&gt; &lt;label&gt; &lt;input type="radio" name="gender" value="male" /&gt;Male&lt;/label&gt; &lt;br /&gt; &lt;label&gt; &lt;input type="radio" name="gender" value="female" /&gt;Female&lt;/label&gt; &lt;br /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Weight:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="weight" size="7" /&gt;KG&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Height:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="height" size="7" /&gt;CM&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;label&gt;Exercise Level:&lt;/label&gt; &lt;/td&gt; &lt;td&gt; &lt;select name="activity"&gt; &lt;option value="1.2"&gt;Sedentary (little or no exercise)&lt;/option&gt; &lt;option value="1.375"&gt;Lightly active (exercise/sports 1-3 days/wk&lt;/option&gt; &lt;option value="1.55"&gt;Mod. active (exercise/sports 3-5 days/wk)&lt;/option&gt; &lt;option value="1.725"&gt;Very active (exercise/sports 6-7 days/wk)&lt;/option&gt; &lt;option value="1.9"&gt;Extr. Active (daily exercise/sports &amp; physical job))&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt; &lt;input name="calc" type="button" value="Calculate" onclick="validate()" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;table width="100%"&gt; &lt;tr&gt; &lt;td width="50%" align="right"&gt;BMR&lt;/td&gt; &lt;td width="50%" id="bmr"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>JAVASCRIPT</strong></p> <pre><code>function validate() { var age = document.caloriecalc.age.value; var weight = document.caloriecalc.weight.value; var height = document.caloriecalc.height.value; if (age &lt;= 0 || parseInt(age) != age) { alert("Please enter a valid age."); } else if (weight &lt;= 0 || isNaN(Number(weight))) { alert("Please enter a valid weight."); } else if (height &lt;= 0 || isNaN(Number(height))) { alert("Please enter a valid height."); } else { //all the data has been validated calculate(parseInt(age), parseFloat(weight), parseFloat(height)); } } function calculate(age, weight, height) { } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload