I created a calculator in HTML/js, now am trying to add some validation to it but I can't seem to get it to work.
In the below calculator, I added a script that checked if the sex radio button has not been checked then output a message. Unfortunately, when I ran it the message isn't showing anything. Help please
function calcCreatine() {
var sexInput = document.querySelector('input[name="sex"]:checked').value;;
var ageInput = document.getElementsByName("patients-age")[0].value;
var weightInput = document.getElementsByName("patients-weight")[0].value;
var serumInput = document.getElementsByName("patients-serum")[0].value;
var result;
if (sexInput == null) {
return document.getElementById("outs").innerHTML = "Please enter a value";
} else {
if (sexInput === 'm') {
result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
} else {
result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
}
}
}
<!-- Creatinine clearance calculator. -->
<form id="form-id" method="post">
<div id="creat-calc">
<div class="card">
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary"><strong>Creatinine clearance
calculator</strong></h5>
</div>
<div class="card-body">
<p>Sex of patient:</p>
<div>
<label class="radio-inline">
<input type="radio" name="sex" value="m"> Male
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="f"> Female
</label>
<p>Age of patient (years):</p>
<input type="number" min="1" max="120" name="patients-age" />
<br/><br/>
<p>Weight of patient (kg):</p>
<input type="number" min="1" max="120" name="patients-weight" />
<br/><br/>
<p>Serum creatinine (micromol/L):</p>
<input type="number" min="1" max="120" name="patients-serum" />
<br/>
</div>
<br/>
<hr/>
<div id="crtresult">
<h5 id="outs"></h5>
<p>Original Cockcroft-Gault Equation: <u> mdcalc website</u></p>
</div>
<button type="button" class="btn btn-primary" onclick="calcCreatine();">Calculate
</button>
<button type="button" class="btn btn-danger" onclick="popup.hideCeatCalcFormPopup();">
Close
</button>
<button type="reset" class="btn btn-primary" onclick="resetButton();">Reset</button>
</div>
</div>
</div>
</form>
The problem here is that when you are not selecting any radio button, following statements returns null:
document.querySelector('input[name="sex"]:checked')
since its null this cannot have value property. So I did some modification in the code and stored the whole input instead of the value and then used it later with value property wherever needed.
Here's the solution. Try it yourself:
function calcCreatine() {
var sexInput = document.querySelector('input[name="sex"]:checked');
var ageInput = document.getElementsByName("patients-age")[0];
var weightInput = document.getElementsByName("patients-weight")[0];
var serumInput = document.getElementsByName("patients-serum")[0];
var result;
if (sexInput == null) {
return document.getElementById("outs").innerHTML = "Please select your gender";
} else {
if (sexInput.value === 'm') {
result = Math.round(((140 - ageInput.value) * weightInput.value * 1.23) / serumInput.value);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
} else {
result = Math.round(((140 - ageInput.value) * weightInput.value * 1.04) / serumInput.value);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
}
}
}
<!-- Creatinine clearance calculator. -->
<form id="form-id" method="post">
<div id="creat-calc">
<div class="card">
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary"><strong>Creatinine clearance
calculator</strong></h5>
</div>
<div class="card-body">
<p>Sex of patient:</p>
<div>
<label class="radio-inline">
<input type="radio" name="sex" value="m"> Male
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="f"> Female
</label>
<p>Age of patient (years):</p>
<input type="number" min="1" max="120" name="patients-age" />
<br/><br/>
<p>Weight of patient (kg):</p>
<input type="number" min="1" max="120" name="patients-weight" />
<br/><br/>
<p>Serum creatinine (micromol/L):</p>
<input type="number" min="1" max="120" name="patients-serum" />
<br/>
</div>
<br/>
<hr/>
<div id="crtresult">
<h5 id="outs"></h5>
<p>Original Cockcroft-Gault Equation: <u> mdcalc website</u></p>
</div>
<button type="button" class="btn btn-primary" onclick="calcCreatine();">Calculate
</button>
<button type="button" class="btn btn-danger" onclick="popup.hideCeatCalcFormPopup();">
Close
</button>
<button type="reset" class="btn btn-primary" onclick="resetButton();">Reset</button>
</div>
</div>
</div>
</form>
There are a couple of issues with your code.
var sexInput = document.querySelector('input[name="sex"]:checked').value;
This line is trying to get the value of the selected sex. If the form has just loaded and the user has not selected anything yet, then:
document.querySelector('input[name="sex"]:checked');
Will be null, so you will get an error:
Uncaught TypeError: Cannot read property 'value' of null
The simplest way to fix that would be to just add a default value to the radio buttons, for example:
<input type="radio" name="sex" value="m" checked>
That being said, you can also improve the following:
The <font> tag has been removed from HTML5, so it would be a good idea to replace that.
Since patient sex only affects one line of your code, you can remove the duplicate part by just calculating the result in an if statement and doing the rest only once.
I have created this fiddle to demonstrate.
The first problem is the code is the double ";" in the first line please, change it:
var sexInput = document.querySelector('input[name="sex"]:checked').value;;
to:
var sexInput = document.querySelector('input[name="sex"]:checked').value;
The second problem in you radio button is not working because you are trying to get a value from an element that doesn't exist if you don't check the button but if you check it and you execute the calculate button then you get an error:
and this error is because you are trying to obtain a value from an element that doesn't exist yet.
How to solve it?
You can modify the first line to get the null value from the element like this:
var sexInput = document.querySelector('input[name="sex"]:checked');
then if the user not check the radio button you will get a null value.
Another way could be using the checked property of the element to evaluate if the user checked the button using true/false like this:
var sexInput = document.querySelector('input[name="sex"]').checked;
then in your code you can eval like this:
if(sexInput){
// Do something
}
EDIT
I added a working exmaple:
EDIT 2
Improved the response a little bit more.
function calcCreatine() {
var sexInput = document.querySelector('input[name="sex"]:checked');
var ageInput = document.getElementsByName("patients-age")[0].value;
var weightInput = document.getElementsByName("patients-weight")[0].value;
var serumInput = document.getElementsByName("patients-serum")[0].value;
var result;
if (sexInput == null) {
return document.getElementById("outs").innerHTML = "Please enter a value";
} else {
if (sexInput === 'm') {
result = Math.round(((140 - ageInput) * weightInput * 1.23) / serumInput);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
} else {
result = Math.round(((140 - ageInput) * weightInput * 1.04) / serumInput);
result = result.toString().bold().fontsize(6);
resultText = " mL/min".small() + " - Creatinine clearance.";
res = result + resultText.bold();
return document.getElementById("outs").innerHTML = res;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="asd.js"></script>
</head>
<body>
<!-- Creatinine clearance calculator. -->
<form id="form-id" method="post">
<div id="creat-calc">
<div class="card">
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary">
<strong>Creatinine clearance calculator</strong>
</h5>
</div>
<div class="card-body">
<p>Sex of patient:</p>
<div>
<label class="radio-inline">
<input type="radio" name="sex" value="m" /> Male
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="f" /> Female
</label>
<p>Age of patient (years):</p>
<input type="number" min="1" max="120" name="patients-age" />
<br /><br />
<p>Weight of patient (kg):</p>
<input type="number" min="1" max="120" name="patients-weight" />
<br /><br />
<p>Serum creatinine (micromol/L):</p>
<input type="number" min="1" max="120" name="patients-serum" />
<br />
</div>
<br />
<hr />
<div id="crtresult">
<h5 id="outs"></h5>
<p>
Original Cockcroft-Gault Equation:
<a
href="https://www.mdcalc.com/creatinine-clearance-cockcroft-gault-equation#creator-insights"
style="color: white"
><u> mdcalc website</u></a
>
</p>
</div>
<button
type="button"
class="btn btn-primary"
onclick="calcCreatine();"
>
Calculate
</button>
<button
type="button"
class="btn btn-danger"
onclick="popup.hideCeatCalcFormPopup();"
>
Close
</button>
<button
type="reset"
class="btn btn-primary"
onclick="resetButton();"
>
Reset
</button>
</div>
</div>
</div>
</form>
</body>
</html>
Regards
Related
I'm trying to add elements dynamically through javascript but whenever I try opening up the page they appear for a split second then disappear
I take a number of process from the input tag and run a loop to create each element individually
I tried removing everything from the event and only call a function which I placed the code in but didn't work
const numberOfProcesses = document.getElementById("numberOfProcesses").value;
const timeQuantum = document.getElementById("timeQuantum").value;
const start = document.getElementById("start");
const processDiv = document.getElementById("processDiv");
const burstDiv = document.getElementById("burstDiv");
start.addEventListener("click", (event) => {
for (let i = 0; i < numberOfProcesses; i++) {
let pLabel = document.createElement("label");
pLabel.setAttribute("id", `process ${i}`);
pLabel.innerText = `Process ${i}`;
let pInput = document.createElement("input");
pInput.setAttribute("type", "number");
pInput.setAttribute("id", `process ${i}`);
let bLabel = document.createElement("label");
bLabel.setAttribute("id", `burstTime ${i}`);
bLabel.innerText = `Burst Time ${i}`;
let bInput = document.createElement("input");
bInput.setAttribute("type", "number");
bInput.setAttribute("id", `burstTime ${i}`);
processDiv.appendChild(pLabel);
processDiv.appendChild(pInput);
burstDiv.appendChild(bLabel);
burstDiv.appendChild(bInput);
console.log(pLabel, pInput, bLabel, bInput);
}
});
<form action="">
<div>
<label for="numberOfProcesses">Enter Number Of Processes</label>
<input type="number" name="Number Of Processes" id="numberOfProcesses" value="5" />
</div>
<br />
<div>
<label for="timeQuantum">Enter Time Quantum</label>
<input type="number" name="time quantum" value="5" id="timeQuantum" />
</div>
<button id="start">Start</button>
</form>
</section>
<br /><br />
<section>
<form action="">
<div id="processDiv">
<label for="process0">P0</label>
<input type="number" name="process" id="process0" />
</div>
<div id="burstDiv">
<label for="burstTime0">Burst Time</label>
<input type="number" name="burst time" id="burstTime0" />
</div>
<button id="excute">Execute</button>
</form>
Remove action="" and set type attribute to button if nothing is submitted. The behaviour you describe is due to the form being submitted.
Do like this and you can see you console log for other errors:
<form>
<div>
<label for="numberOfProcesses">Enter Number Of Processes</label>
<input type="number" name="Number Of Processes" id="numberOfProcesses" value="5" />
</div>
<br />
<div>
<label for="timeQuantum">Enter Time Quantum</label>
<input type="number" name="time quantum" value="5" id="timeQuantum" />
</div>
<button type="button" id="start">Start</button>
</form>
I need the following output as shown in the gif below.
I created three inputs which I put in the box below. How can I have such output?
Please help with an example
NOTE:Suppose we have 50 inputs and the class is the same
I can't use it after Get ID
MY HTML code
<span class="pricing-heading">Your sale price:</span><div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
</div>
<div class="prt-pricing-detial">
<span class="pricing-heading">Product base Cost:</span><div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
</div>
<div class="prt-pricing-detial">
<span class="pricing-heading">Your profit:</span><div class="pricing-field"><input class="pricing-profit" type="number" value="14.00" disabled></div>
</div>
JS code :
$(".pricing-set-price").change(function(){
var item_rrp = $(this).val();
var item_base = $(this).parent().parent().parent().find('.pricing-base-price').val();
var profit = item_rrp - item_base;
var profit_format = profit.toFixed(2);
$(this).parent().parent().parent().find('.pricing-profit').val(profit_format);
});
You may try like
$(".pricing-set-price").change(function(){
let currentValue = $(this).val();
var previousValue = this.defaultValue;
if(previousValue < currentValue){
this.defaultValue = currentValue;
console.log('Increment');
}else{
console.log('Decrement');
}
});
You can call the function that changes the value of Profit (input) on the onchange , oninput, or onClick events of the SalePrice(input)
function increment() { document.getElementById('salePrice').stepUp();
calculateProfit()
}
function decrement() {
document.getElementById('salePrice').stepDown();
calculateProfit()
}
function calculateProfit(){
let sp = document.getElementById("salePrice").value;
document.getElementById("profit").value = sp - 10;
}
<input id="salePrice" type=number value=10 min=10 max=110 />
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<br/>
Base Price :: <input type="text" id="basePrice" value=10
disabled >
<br/>
Profit :: <input type="text" id="profit" value=0 />
For more info about:
stepUp()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
stepDown()
https://www.w3schools.com/Jsref/met_week_stepdown.asp
Hi i think this might help. use id for your input fields.
function calculateProfit(val){
var baseCost = document.getElementById("baseCost").value;
document.getElementById("Profit").value = (val - baseCost).toFixed(2);
}
<div class="prt-pricing-heading">
<span class="pricing-heading">Your sale price:</span>
<div class="pricing-field"><input id="SalePrice" class="pricing-set-price" type="number" value="24.00" onchange="calculateProfit(this.value);" oninput="calculateProfit(this.value)"></div>
</div>
<div class="prt-pricing-detial">
<span class="pricing-heading">Product base Cost:</span>
<div class="pricing-field"><input id="baseCost" class="pricing-base-price" type="number" value="10.00" disabled></div>
</div>
<div class="prt-pricing-detial">
<span class="pricing-heading">Your profit:</span>
<div class="pricing-field"><input id="Profit" class="pricing-profit" type="number" value="14.00" disabled></div>
</div>
For More info regarding:
oninput() https://www.w3schools.com/tags/att_oninput.asp
onchange() https://www.w3schools.com/tags/ev_onchange.asp
I am so lost as to why this is not working properly, as it is on similar previous code. This is for field personnel, a cheat Sheet to simply enter values and get a fast answer (calculation). They enter the value of Num5/6/7 code multiplies 3 values one hidden then adds the last value together and upon click button the result is shown.
Here is my code (taken from copy/paste of a working conversion).
<div class="containerHydro">
<p>
<label >Fluid Column Length</label>
<input type="number" id="num5">
<label >Fluid Weight</label>
<input type="number" id="num6">
<label >Well Head Pressure</label>
<input type="number" id="num7">
<p>
<input type="button" value="Sum" onclick="calculate()"/>
</p>
<p id="total1"></p>
</div>
The Function also copy/paste of multiply two int then divide by hidden (which works BTW)
function calculate() {
var numFive = document.getElementById('num5').value;
var numSix = document.getElementById('num6').value;
var numSvn = document.getElementById('num7').value;
var total1 = parseInt(numFive) * parseInt(numSix) * 0.052 + parseInt('numSvn');
var p =document.getElementById('total1');
p.innerHTML += total1;
}
Here is the same idea which works fine-
Code-
<div class="container7">
<p>
<label id="H2S Percent">H2S Percentage</label>
<input id="num3" type="number" name="num3" placeholder="H2S Percent">
<label id="H2S Percent">WHP</label>
<input id="num4" type="number" name="num4"placeholder="Well Head Pressure" > <br>
</p>
<input type="button" value="H2S Partial Pressure" onclick="math()"/>
<p id="result"></p>
</div>
Function
function math() {
var numThree = document.getElementById('num3').value;
var numFour = document.getElementById('num4').value;
var result = parseInt(numThree) * parseInt(numFour) / 1000000;
var p = document.getElementById('result');
p.innerHTML += result;
}
function calculate() {
var numFive = document.getElementById('num5').value;
var numSix = document.getElementById('num6').value;
var numSvn = document.getElementById('num7').value;
var total1 = parseInt(numFive) * parseInt(numSix) * 0.052 + parseInt(numSvn);
var p = document.getElementById('total1');
p.innerHTML += total1;
}
input {
display: block;
}
<div class="containerHydro">
<p>
<label>Fluid Column Length</label>
<input type="number" id="num5">
<label>Fluid Weight</label>
<input type="number" id="num6">
<label>Well Head Pressure</label>
<input type="number" id="num7">
<p>
<input type="button" value="Sum" onclick="calculate()" />
</p>
<p id="total1"></p>
</div>
How do i automatically display every time I input number and calculate it.
Then the pick button will trigger to calculate the price, my base price would be 100. so if its 2 layers it will be 200 ,
<br> Layer <input type="number" min="1" id="cake_layer" name="cake_layer" /> <!-- onchange="updateTotal()" -->
<input type="button" value="Pick" id="choose" />
<br>
Layer inputed <div class="layer_display"> </div>
<br>
Layer Amount <div class="layer_amt"> </div>
I really need help. thank you !!!
Is this what you want to do?
var cakeLayer = document.getElementById("cake_layer"),
price = 100,
layerDisplay = document.getElementsByClassName("layer_display")[0],
layerAmt = document.getElementsByClassName("layer_amt")[0];
cakeLayer.onchange = function(event) {
var amount = this.value || 0,
totalPrice = amount * price;
layerDisplay.innerText = totalPrice;
layerAmt.innerText = amount;
}
<input type="number" min="1" id="cake_layer" name="cake_layer" />
<!-- onchange="updateTotal()" -->
<input type="button" value="Pick" id="choose" />
<br> total price
<div class="layer_display"> </div>
<br> Layer Amount
<div class="layer_amt"> </div>
You can achieve this by using JavaScript or jQuery. That's the only way to manipulate the DOM.
See this working jsfiddle I made:
https://jsfiddle.net/jw6q53fz/1/
HMTL
<div>
<label for="cake_layer">Layer</label>
<input type="number" class="cake_layer" name="cake_layer" id="cake_layer"/>
<button id="choose">Pick</button>
</div>
<div>
<p>Layer inputed: <span class="layer_display"> </span></p>
<p>Layer Amount: <span class="layer_amt"> </span></p>
</div>
jQuery
$('#choose').on('click', function(){
var cakeLayerValue = $('#cake_layer').val();
$('.layer_display').html(cakeLayerValue);
$('.layer_amt').html(cakeLayerValue * 100);
});
I've read a lot about uncaught reference errors here and think I have the idea down - when the script is trying to call a function or reference a variable that hasn't been initialized yet. However, I am uncertain how to fix this, and why in my case one function works and the other doesn't.
I have one JS file with two functions in it, and one HTML file with a form. The form calls function1 onSubmit, and that works fine. A radio button inside of the form calls function2 onClick, and that's when I get the error:
Uncaught ReferenceError: toggleGender is not defined onclick # forms.html:20
Why would my first function work and not the second? It seems to me like they are operating under the same premise.
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(var gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>
function toggleGender(var gender)
You have a syntax error here. Argument names should not be prefixed by var. This causes the functional declaration to fail (hence why you get a reference error when you try to call it).
function calculatePFT()
{
var userForm = document.getElementById('userValues');
var pullups = userForm.userPullups.value;
var crunches = userForm.userCrunches.value;
var runMinutes = userForm.userMinutes.value;
var runSeconds = userForm.userSeconds.value;
var runScore = 0;
if(runMinutes < 18) { runScore = 100; }
else
{
var minDiff = runMinutes - 18;
var minPoints = minDiff * 6;
var secPoints = Math.ceil(runSeconds/10);
runScore = 100 - (minPoints + secPoints);
}
var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds. TOTAL SCORE: " + score;
}
function toggleGender(gender)
{
alert("Inside");
var maleForm = document.getElementById('male');
var femaleForm = document.getElementById('female');
if(gender == "f")
{
alert("Female");
maleForm.style.display = 'none';
femaleForm.style.display = 'block';
}
else
{
alert("Male");
maleForm.style.display = 'block';
femaleForm.style.display = 'none';
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Testing</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js"></script>
</head>
<body>
<section id="wrapper">
<h3>PFT Calculator</h3>
<form action="#" id="userValues" method="post" onSubmit="calculatePFT()">
<div id="gender">
<span class="maleFemale">Male <input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /></span>
<span class="maleFemale">Female <input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /></span>
</div>
<div id="male">
<div class="scoreLine">
<div class="label">Pullups:</div>
<div class="entry"><input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /></div>
</div>
</div>
<div id="female">
<div class="scoreLine">
<div class="label">Hang:</div>
<div class="entry"><input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /></div>
</div>
</div>
<div class="scoreLine">
<div class="label">Crunches:</div>
<div class="entry"><input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Minutes):</div>
<div class="entry"><input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /></div>
</div>
<div class="scoreLine">
<div class="label">Run (Seconds):</div>
<div class="entry"><input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /></div>
</div>
<div style="text-align:center;"><input type="submit" value="Calculate Score!" id="submitButton" /></div>
</form>
<span id="scoreBox"></span>
</section>
</body>
</html>