submit master form with only active detail tab form

I have my form which consist of one master form and 2 details parts which on two different tab (submit button is on only main form outside tabs.). I am trying to submit master form with only active tab(either first tab or 2nd tab) form with single click. Currently when i submit try to submit data with active tab only, then its not submitted until mandotry fields of inactive tab are fill
here is the code :

      `<form method="POST" action="abc.php">
       <input type="text" name= "mrno"  id= "mrno" > <br>
       <input type="text" name= "name1"  id= "name1" > <br>
        <div class="tab">
        <button class="tablinks" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
              <button class="tablinks" type="button"onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
        </div>
         <div id="London" class="tabcontent">
         <input type="text" name= "maleage"  id= "maleage" > <br>
          <input type="text" name= "maleedu"  id= "maleedu" > <br>
            </div>

          <div id="Paris" class="tabcontent">
         <input type="text" name= "femage"  id= "femage" > <br>
          <input type="text" name= "femedu"  id= "femedu" > <br> 
               </div>`

Java script code

        `<script>
        function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
         tabcontent = document.getElementsByClassName("tabcontent");
           for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
               }
        tablinks = document.getElementsByClassName("tablinks");
         for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
            document.getElementById(cityName).style.display = "block";
             evt.currentTarget.className += " active";
                  }
                </script>

             <input type="submit" name="submit" id="submit" value="Submit">	
                 </form> `

Your current setup submits your form along with all the named inputs of your subsections. You want to avoid submitting the fields that are inside inactive tabs. A possible solution is to change the inner content of the form, by removing old items and adding new items whenever you change the tab, but I do not recommend that approach for your case for several reasons, like:

• you may have some Javascript events for these fields which will be lost if you change the structure and you would need to recreate them
• you already implemented a logic for deactivating and activating these tabs and we want to avoid to compel you into radical changes

So, instead of changing the structure, let's change the attributes.

We whenever we switch focus on a tab, we want to remove the name property of the fields inside and we want to add a proper name property to the inputs inside the active tab.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        //tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    evt.currentTarget.classList.add("active");
    //document.getElementById(cityName).classList.add("active");
    for (let tabcontent of document.getElementsByClassName("tabcontent")) {
        for (let input of tabcontent.querySelectorAll("[data-name]")) {
            if (tabcontent.id === cityName) {
                input.setAttribute("name", input.getAttribute("data-name"));
            } else {
                input.removeAttribute("name");
            }
        }
    }
}

<!-- language: lang-css -->

.active {
    color: green;
}

form [name] {
    background-color: lightgreen;
}

<!-- language: lang-html -->

<form method="POST" action="abc.php">
    <input type="text" name= "mrno"  id= "mrno" > <br>
    <input type="text" name= "name1"  id= "name1" > <br>
    <div class="tab">
        <button class="tablinks active" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
        <button class="tablinks" type="button"onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
    </div>
    <div id="London" class="tabcontent">
        <input type="text" name="maleage" data-name= "maleage"  id= "maleage" > <br>
        <input type="text" name="maleedu" data-name= "maleedu"  id= "maleedu" > <br>
    </div>

    <div id="Paris" class="tabcontent">
        <input type="text" data-name= "femage"  id= "femage" > <br>
        <input type="text" data-name= "femedu"  id= "femedu" > <br> 
    </div>
</form>

<!-- end snippet -->

Note that I defaulted your first tab and, instead of making the inactive tab disappear, for the purpose of the test I have applied coloring for the named inputs, in other words, at any moment you know what would be sent to the server if the form is to be submitted. Note further that I refactored your code to make it more readable. It's easy to change this from coloring named inputs as green to hide unnamed attributes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        //tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    evt.currentTarget.classList.add("active");
    //document.getElementById(cityName).classList.add("active");
    for (let tabcontent of document.getElementsByClassName("tabcontent")) {
        for (let input of tabcontent.querySelectorAll("[data-name]")) {
            if (tabcontent.id === cityName) {
                input.setAttribute("name", input.getAttribute("data-name"));
            } else {
                input.removeAttribute("name");
            }
        }
    }
}

<!-- language: lang-css -->

.active {
    color: green;
}

form input:not([name]) {
    display: none;
}

<!-- language: lang-html -->

<form method="POST" action="abc.php">
    <input type="text" name= "mrno"  id= "mrno" > <br>
    <input type="text" name= "name1"  id= "name1" > <br>
    <div class="tab">
        <button class="tablinks active" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
        <button class="tablinks" type="button"onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
    </div>
    <div id="London" class="tabcontent">
        <input type="text" name="maleage" data-name= "maleage"  id= "maleage" value="a" > <br>
        <input type="text" name="maleedu" data-name= "maleedu"  id= "maleedu" value="b" > <br>
    </div>

    <div id="Paris" class="tabcontent">
        <input type="text" data-name= "femage"  id= "femage" value="c" > <br>
        <input type="text" data-name= "femedu"  id= "femedu" value="d" > <br> 
    </div>
</form>

<!-- end snippet -->

Explanation of the logic: We loop our elements having the class of tabcontent and for each of them we loop their inputs having a data-name attribute (notice that I have added this attribute to the structure, having the same value as name would have, so whenever we create/remove the name attribute, its desired value is still available as the value of the data-name attribute) and, if we are inside the active tab, then we properly set its name. Otherwise, if we are at an inactive tab, then we remove its name attribute.