javascript – My Tab in html keeps going back to the default when i submit my form

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.

Leave a Comment