当我提交表单时，我在 html 中的选项卡一直返回到默认值
My Tab in html keeps going back to the default when i submit my form
因此，当我在第二个选项卡中的表单上按提交时，它会自动转到第一个选项卡，我希望它尽可能留在第二个选项卡上，因为我无法查看我的信息.谢谢。
下面是我的代码：
<!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>
我假设它与“defaultOpen”id 有关，但我不确定如何制作它，所以它并不总是转到默认打开的选项卡。
您正在寻找 event.preventDefault() MDN。您需要更改imperialCalculation()以获取参数event，然后调用event.preventDefault()。像这样：
function imperialCalculation(event) {
event.preventDefault();
// ...
// rest of function is the same
// ...
}
<form> 标记的默认行为是重新加载页面，因此可以将表单数据发送到服务器。您的表单没有 action 属性，因此它不会向服务器发送任何内容，但浏览器仍会重新加载页面。调用 event.preventDefault() 会停止默认行为。
因此，当我在第二个选项卡中的表单上按提交时，它会自动转到第一个选项卡，我希望它尽可能留在第二个选项卡上，因为我无法查看我的信息.谢谢。
下面是我的代码：
<!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>
我假设它与“defaultOpen”id 有关，但我不确定如何制作它，所以它并不总是转到默认打开的选项卡。
您正在寻找 event.preventDefault() MDN。您需要更改imperialCalculation()以获取参数event，然后调用event.preventDefault()。像这样：
function imperialCalculation(event) {
event.preventDefault();
// ...
// rest of function is the same
// ...
}
<form> 标记的默认行为是重新加载页面，因此可以将表单数据发送到服务器。您的表单没有 action 属性，因此它不会向服务器发送任何内容，但浏览器仍会重新加载页面。调用 event.preventDefault() 会停止默认行为。