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 onclick="openPage('Metric', this, 'royalblue')" id="defaultOpen">Metric BMR Calculator</button>
<button onclick="openPage('Imperial', this, 'mediumseagreen')" id="defaultOpen">Imperial BMR Calculator</button>
<div id="Metric" >
<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" >
<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.
CodePudding user response：
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.