so when i press submit on my form in my 2nd tab, it automatically goes to the first tab, I would like it if possible for it to stay on the 2nd tab as i’m not able to view my information. Thank you.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 50%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Metric {
background-color: royalblue;
}
#Imperial {
background-color: mediumseagreen;
}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Metric', this, 'royalblue')" id="defaultOpen">Metric BMR Calculator</button>
<button class="tablink" onclick="openPage('Imperial', this, 'mediumseagreen')" id="defaultOpen">Imperial BMR Calculator</button>
<div id="Metric" class="tabcontent">
<form><br>
<label>Sex </label>
<select id="sex">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br><br>
Age: <input type="text" id="Age" /><br><br>
Your Height: <br>
<br>
Centimeters: <input type="text" id="cm" />
<br>
<br>
Your Weight: <br>
<br>
Kilograms: <input type="text" id="kg" />
<br>
<br>
<input type="radio" id="id1" name="fit" value="1.2" checked >
<label for="id1" >I am sedentary (little or no excercise)</label><br>
<input type="radio" id="id2"name="fit" value="1.375" >
<label for="id2" >I am lightly active (light excercise or sports 1-3 days per week)</label><br>
<input type="radio" id="id3" name="fit" value="1.55">
<label for="id3">I am moderately active (moderate excercise or sports 3-5 days per week)</label><br>
<input type="radio" id="id4" name="fit" value="1.725">
<label for="id4">I am very active (hard excercise or sports 6-7 days per week</label><br>
<input type="radio" id="id5" name="fit" value="1.9">
<label for="id5">I am super active (very hard excercise or sports and a physical job or 2x training)</label><br><br>
<input type="submit" onclick="metricCalculation()" /><br>
<br>
</form>
</div>
<div id="Imperial" class="tabcontent">
<form><br>
<label>Sex </label>
<select id="sex">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br><br>
Age: <input type="text" id="Age" name="Age" /><br><br>
Your Height: <br>
Feet: <input type="text" id="Feet" name="Feet" />
Inches: <input type="text" id="Inches" name="Inches" /><br><br>
Your Weight: <br>
Stones: <input type="text" id="Stones" /> Pounds: <input type="text" id="Pounds"><br><br>
<input type="radio" id="age1" name="age" value="30" >
<label for="age1">I am sedentary (little or no excercise)</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">I am lightly active (light excercise or sports 1-3 days per week)</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am moderately active (moderate excercise or sports 3-5 days per week)</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am very active (hard excercise or sports 6-7 days per week</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am super active (very hard excercise or sports and a physical job or 2x training)</label><br><br>
<input type="submit" value="Submit" onclick="imperialCalculation()" /><br>
</form>
</div>
</body>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function metricCalculation() {
var theDiv = document.getElementById("Metric");
var Age = document.getElementById("Age").value;
var Sex = document.getElementById("sex").value;
var Cm = document.getElementById("cm").value;
var Kg = document.getElementById("kg").value;
var activity = document.querySelector('input[name="fit"]:checked').value;
if(Sex === "M"){
theDiv.innerHTML += ("male!<br>");
var total1 = (10 * Kg) + (6.25 * Cm) - (5 * Age) + 5
var total2 = total1*activity;
theDiv.innerHTML += ("Your BMR is: " +total1+ " Calories/Day<br>");
theDiv.innerHTML +=("Your daily caloric intake should be: " + total2+ " Calories/Day<br>");
}
if(Sex === "F"){
theDiv.innerHTML += ("female!<br>");
var total1 = (10 * Kg) + (6.25 * Cm) - (5 * Age) - 161
var total2 = total1*activity;
theDiv.innerHTML += ("Your BMR is: " +total1+ " Calories/Day<br>");
theDiv.innerHTML +=("Your daily caloric intake should be: " + total2+ " Calories/Day<br>");
}
}
function imperialCalculation() {
var Age = document.getElementById("Age").value;
var LastName = document.getElementById("LastName").value;
var Email = document.getElementById("Email").value;
var Sex = document.getElementById("sex").value;
document.getElementById("total").innerHTML("<h1>Data Received</h1><br>");
document.writeln("Form Completed<br><br>");
document.writeln("The first name you entered is <b>" + FirstName + "</b><br>");
document.writeln("The last name you entered is <b>" + LastName + "</b><br>");
document.writeln("The email address is <b>" + Email + "</b><br>");
document.writeln("Your sex is: " + Sex)
document.getElementById('spanResult1').textContent = "hi";
document.getElementById('spanResult').textContent = "cool";
}
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
</script>
</html>
I’m assuming it has to do with the "defaultOpen" id, but i’m not sure how to make it so it doesn’t always go to the default opened tab.
>Solution :
You’re looking for event.preventDefault() MDN. You need to change imperialCalculation() to take the parameter event, then call event.preventDefault(). Like this:
function imperialCalculation(event) {
event.preventDefault();
// ...
// rest of function is the same
// ...
}
The default behavior of a <form> tag is to reload the page, so form data can be sent to a server. Your form doesn’t have a action attribute so it doesn’t send anything to a server, but the browser will still reload the page. Calling event.preventDefault() stops the default behavior.