Как я могу загрузить данные из двух разных вкладок с одним и тем же шаблоном, но с данными, введенными пользователем?

Question

Я определил шаблон данных с компонентами, которые извлекают пользовательские входные данные, а затем загружаю их в виде текстового файла.

У меня есть две вкладки, основанные на поле Number of Chasis. Если я выберу 1 в этом поле, тогда я смогу заполнить данные в обязательных полях, как указано в данных (в JS). Если пользователь выберет 2 в Number of Chasis, он введет данные в две отдельные вкладки, и мне нужно получить данные обеих вкладок Chasis 1 и Chasis 2.

Проблема, с которой я сталкиваюсь является то, что я не могу придумать метод для извлечения данных из второй вкладки, то есть Chasis 2. Я надеюсь, что мое требование ясно, любая помощь на этом этапе будет очень признательна.

$(document).ready(function() {
  function displaySelectedTabs(selectedNumber) {
    switch (selectedNumber) {
      case "":
        $("#tab1btn").hide();
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab2btn").hide();
        break;
      case "1":
        $("#tab1btn").show();
        $("#tab2btn").hide();
        $("#tab2").hide();
        break;
      case "2":
        $("#tab1btn").show();
        $("#tab2btn").show();
        break;
    }
  }
  
  var selectedNumber = $("#tabsToDisplay").val();
  displaySelectedTabs(selectedNumber);

  function tabClick(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";
  }
  
  $("#tab1btn").click(function() {
    tabClick(event, 'tab1');
  });
  
  $("#tab2btn").click(function() {
    tabClick(event, 'tab2');
  });
  
  $("#tabsToDisplay").change(function() {
    var selectedNumber = $("#tabsToDisplay").val();
    displaySelectedTabs(selectedNumber);
  });
});

$('#tab1').on('click', 'a', function(e) {
  e.preventDefault();
});

document.addEventListener('DOMContentLoaded', function() {
  const extra = {};
  const oForm = document.forms.myForm;
  const oSave = document.querySelector('input[name="save"]');
  const oSub = document.querySelector('input[name="submit"]');
  const oCtrl = document.querySelector('select[name="controller"]');
  const oTest = document.querySelector('select[name="test"]');
  const oProto = document.querySelector('select[name="protocol"]');
  const oiSCSI = document.querySelector('select[name="iSCSIip"]');
  //const oTmp = document.getElementsByClassName("tabcontent")
  const oTmp = document.getElementById("extra")

  //Validating the input data and handling the changes made by the user
  const changehandler = function(e) {
    let option = this.options[this.options.selectedIndex];
    if (option.hasAttribute('data-extra')) 
      extra[this.name] = this.value;
    else {
      if (extra.hasOwnProperty(this.name)) 
        delete extra[this.name];
    }

    if (option.hasAttribute('data-extra')) 
      extra[this.name] = this.value;
    else {
      if (extra.hasOwnProperty(this.name)) 
        delete extra[this.name];
    }

    //Enabling the protocol dropdown only if the controller is RAID
    if (this.name == 'controller') {
      if (this.value == 'RAID') 
        oProto.disabled = false
      else
        oProto.disabled = true
    }

    if (this.name == 'controller') {
      if (this.value == 'EBOD') {
        oProto.value = 'SAS'; //disabled = false
        //else oProto.disabled = true
      }
    }

    if (this.name == 'protocol') {
      if (this.value == 'iSCSI') 
        oiSCSI.disabled = false
      else 
        oiSCSI.disabled = true
    }
  }

  const dialog = function(msg) {
    alert(msg);
    return false;
  }

  const savehandler = function(e) {
    e.preventDefault();
    let valid = true
    var step = oForm.chassis.value;
    let payload = '';
    //Creating the data elements to be cpatured in the downloaded yaml file 

    for (let i = 0; i < step; i++) {
      //  console.log('Walking east one step');
      payload += '\n -  # UUT ' + i + ' configuration' + '\n    -  # Chassis ' + i + ' configuration' + String.fromCharCode(10);
      const addToPayload = (object, whitespace) => {
        for (const key of Object.keys(object)) {
          payload += key + '\n';
          const details = object[key];
          for (const key1 of Object.keys(details)) {
            const value = details[key1];
            str = value[0];
            com = value[2];
            val = value[1];
            whitespace = value[3];
            var input = JSON.stringify(val);

            if (Array.isArray(val) && val.length) {
              payload += whitespace + str + ':' + com + '\n' + '                ' + input;
            }
            //else if (val==document.getElementById('hba_ports1').value || val==document.getElementById('hba_ports').value ){
            //	var out= val.split(',');
            //payload += whitespace + str + ':' + com + JSON.stringify(out);
            //}
            else if (val == document.getElementById('ip1').value || val == document.getElementById('ip2').value) {
              var out1 = val.split(',');
              payload += whitespace + str + ':' + com + '\n' + '                    ' + JSON.stringify(out1);
            } else if (!val || !val.length) {
              payload += str
            } else {
              payload += whitespace + str + ':' + val + com;
            }
          }
        }
      }

      if ((document.getElementById("ip1").disabled || document.getElementById("ip2").disabled) && oForm.ctrls.value == 1) {
        let data = {
          "	PDU:": {
            "PDU_IP": ['	    PDU_IP', ' ' + oForm.ip.value, "	#PDU IP", '	' + '\n'],
            "PDU_LEFT": ['	    PDU_LEFT', [oForm.lo.value], " # left_outlet(s) ", '	' + '\n'],
            "PDU_RIGHT": ['	    PDU_RIGHT', [oForm.ro.value], " # right_outlet(s) ", '	' + '\n']
          },
          "	\n	CONTROLLER: # Controller settings ": {
            "Controller_ID#1": ["	    -  # Controller A for RBOD/EBOD"],
            "Netmask IP_A": ["	    	MC_IP", ' ' + document.getElementById('mc_ip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_A": ["	    	MC_Netmask", ' ' + document.getElementById('netmask_ip1').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_A': ['	    	MC_Gateway', ' ' + document.getElementById('gateway_ip1').value, '  # RBOD MC Gateway', '' + '\n'],
            'MC_A': ['	    	MC', ' ' + document.getElementById('rbod_mc1').value, '  # RBOD MC port', '' + '\n'],
            'SC_A': ['	    	SC', ' ' + document.getElementById('rbod_sc1').value, '  # RBOD SC port', '' + '\n'],
            'FU_A': ['	    	FU', ' ' + document.getElementById('rbod_fu1').value, '  # RBOD FU port', '' + '\n'],
            'EC_A': ["	    	EC", ' ' + document.getElementById('rbod_ec1').value, '  # EC port on RBOD or GEM port on JBOD', '' + '\n'],
            'Controller_ID#2': ["	    	ID", ' ' + document.getElementById('Controller_ID1').value, "	#Controller ID, A or B", '' + '\n'],
          }
        };
        addToPayload(data, ' ');
      } else if ((document.getElementById("ip1").disabled || document.getElementById("ip2").disabled) && oForm.ctrls.value == 2) {
        let data = {
          "	PDU:": {
            "PDU_IP": ['	    PDU_IP', ' ' + oForm.ip.value, "	#PDU IP", '	' + '\n'],
            "PDU_LEFT": ['	    PDU_LEFT', [oForm.lo.value], " # left_outlet(s) ", '	' + '\n'],
            "PDU_RIGHT": ['	    PDU_RIGHT', [oForm.ro.value], " # right_outlet(s) ", '	' + '\n']
          },
          "	\n	Controller: # Controller settings ": {

            "Controller_ID#1": ["	    -  # Controller A for RBOD/EBOD"],
            "Netmask IP_A": ["	    	MC_IP", ' ' + document.getElementById('mc_ip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_A": ["	    	MC_Netmask", ' ' + document.getElementById('netmask_ip1').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_A': ['	    	MC_Gateway', ' ' + document.getElementById('gateway_ip1').value, '  # RBOD MC Gateway', '' + '\n'],
            'MC_A': ['	    	MC', ' ' + document.getElementById('rbod_mc1').value, '  # RBOD MC port', '' + '\n'],
            'SC_A': ['	    	SC', ' ' + document.getElementById('rbod_sc1').value, '  # RBOD SC port', '' + '\n'],
            'FU_A': ['	    	FU', ' ' + document.getElementById('rbod_fu1').value, '  # RBOD FU port', '' + '\n'],
            'EC_A': ["	    	EC", ' ' + document.getElementById('rbod_ec1').value, '  # EC port on RBOD or GEM port on JBOD', '' + '\n'],
            'Controller_ID#2': ["	    	ID", ' ' + document.getElementById('Controller_ID1').value, "	#Controller ID, A or B", '' + '\n'],
            'Controller_ID#3': ["	    	ID", ' ' + document.getElementById('Controller_ID1').value, "	#Controller ID, A or B", '' + '\n'],
            'Controller_ID#4': ['\n' + "	    -  # Controller B for RBOD/EBOD"],
            //"HBA_Ports_B":["	    	HBA_Ports",oForm.hba_ports.value,'  # SAS/Fiber Channel ',''+'\n'],
            "Netmask IP_B": ["	    	MC_IP", ' ' + document.getElementById('mcip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_B": ["	    	MC_Netmask", ' ' + document.getElementById('netmaskip').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_B': ['	    	MC_Gateway', ' ' + document.getElementById('gatewayip.value'), '  # RBOD MC Gateway', '' + '\n'],
            'MC_B': ['	    	MC', ' ' + document.getElementById('rbodmc').value, '  # RBOD MC port', '' + '\n'],
            'SC_B': ['	    	SC', ' ' + document.getElementById('rbodsc').value, '  # RBOD SC port', '' + '\n'],
            'FU_B': ['	    	FU', ' ' + document.getElementById('rbodfu').value, '  # RBOD FU port', '' + '\n'],
            'EC_B': ["	    	EC", ' ' + document.getElementById('rbodec').value, '  # EC port on RBOD or GEM port on JBOD', ' ' + '\n'],
            'Controller_ID#4': ["	    	ID", ' ' + document.getElementById('Controller_ID').value, "	#Controller ID, A or B", '' + '\n']
          }
        };
        addToPayload(data, '');
      }
      //else if(document.getElementById("hba").disabled || document.getElementById("hba1").disabled ){
      else if (oForm.ctrls.value == 1) {
        let data = {
          "	PDU:": {
            "PDU_IP": ['	    PDU_IP', ' ' + oForm.ip.value, "	#PDU IP", '	' + '\n'],
            "PDU_LEFT": ['	    PDU_LEFT', [oForm.lo.value], " # left_outlet(s) ", '	' + '\n'],
            "PDU_RIGHT": ['	    PDU_RIGHT', [oForm.ro.value], " # right_outlet(s) ", '	' + '\n']
          },
          "	\n	CONTROLLER: # Controller settings ": {
            "Controller_ID#1": ["	    -  # Controller A for RBOD/EBOD"],
            "iSCSI_IPs_A": ['	    	iSCSI_IPs', document.getElementById('ip1').value, "  #iSCSI IP ", '' + '\n'],
            "Netmask IP_A": ["	    	MC_IP", ' ' + document.getElementById('mc_ip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_A": ["	    	MC_Netmask", ' ' + document.getElementById('netmask_ip1').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_A': ['	    	MC_Gateway', ' ' + document.getElementById('gateway_ip1').value, '  # RBOD MC Gateway', '' + '\n'],
            'MC_A': ['	    	MC', ' ' + document.getElementById('rbod_mc1').value, '  # RBOD MC port', '' + '\n'],
            'SC_A': ['	    	SC', ' ' + document.getElementById('rbod_sc1').value, '  # RBOD SC port', '' + '\n'],
            'FU_A': ['	    	FU', ' ' + document.getElementById('rbod_fu1').value, '  # RBOD FU port', '' + '\n'],
            'EC_A': ["	    	EC", ' ' + document.getElementById('rbod_ec1').value, '  # EC port on RBOD or GEM port on JBOD', '' + '\n'],
            'Controller_ID#2': ["	    	ID", ' ' + document.getElementById('Controller_ID1').value, "	#Controller ID, A or B", '' + '\n'],
          }
        };
        addToPayload(data, ' ');
      } else if (oForm.ctrls.value == 2) {
        let data = {
          "	PDU:": {
            "PDU_IP": ['	    PDU_IP', ' ' + oForm.ip.value, "	#PDU IP", '	' + '\n'],
            "PDU_LEFT": ['	    PDU_LEFT', [oForm.lo.value], " # left_outlet(s) ", '	' + '\n'],
            "PDU_RIGHT": ['	    PDU_RIGHT', [oForm.ro.value], " # right_outlet(s) ", '	' + '\n']
          },
          "	\n	Controller: # Controller settings ": {

            "Controller_ID#1": ["	    -  # Controller A for RBOD/EBOD"],
            "iSCSI_IPs_A": ['	    	iSCSI_IPs', document.getElementById('ip1').value, "  #iSCSI IP ", '' + '\n'],
            "Netmask IP_A": ["	    	MC_IP", ' ' + document.getElementById('mc_ip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_A": ["	    	MC_Netmask", ' ' + document.getElementById('netmask_ip1').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_A': ['	    	MC_Gateway', ' ' + document.getElementById('gateway_ip1').value, '  # RBOD MC Gateway', '' + '\n'],
            'MC_A': ['	    	MC', ' ' + document.getElementById('rbod_mc1').value, '  # RBOD MC port', '' + '\n'],
            'SC_A': ['	    	SC', ' ' + document.getElementById('rbod_sc1').value, '  # RBOD SC port', '' + '\n'],
            'FU_A': ['	    	FU', ' ' + document.getElementById('rbod_fu1').value, '  # RBOD FU port', '' + '\n'],
            'EC_A': ["	    	EC", ' ' + document.getElementById('rbod_ec1').value, '  # EC port on RBOD or GEM port on JBOD', '' + '\n'],
            'Controller_ID#2': ["	    	ID", ' ' + document.getElementById('Controller_ID1').value, "	#Controller ID, A or B", '' + '\n'],
            'Controller_ID#3': ['\n' + "	    -  # Controller B for RBOD/EBOD"],
            "iSCSI_IPs_B": ['	    	iSCSI_IPs', document.getElementById('ip2').value, "  #iSCSI IP ", '' + '\n'],
            "Netmask IP_B": ["	    	MC_IP", ' ' + document.getElementById('mcip').value, '  # RBOD MC IP', '' + '\n'],
            "MC_Netmask_B": ["	    	MC_Netmask", ' ' + document.getElementById('netmaskip').value, '  # RBOD MC Netmask', '' + '\n'],
            'MC_Gateway_B': ['	    	MC_Gateway', ' ' + document.getElementById('gatewayip').value, '  # RBOD MC Gateway', '' + '\n'],
            'MC_B': ['	    	MC', ' ' + document.getElementById('rbodmc').value, '  # RBOD MC port', '' + '\n'],
            'SC_B': ['	    	SC', ' ' + document.getElementById('rbodsc').value, '  # RBOD SC port', '' + '\n'],
            'FU_B': ['	    	FU', ' ' + document.getElementById('rbodfu').value, '  # RBOD FU port', '' + '\n'],
            'EC_B': ["	    	EC", ' ' + document.getElementById('rbodec').value, '  # EC port on RBOD or GEM port on JBOD', ' ' + '\n'],
            'Controller_ID#4': ["	    	ID", ' ' + document.getElementById('Controller_ID').value, "	#Controller ID, A or B", '' + '\n']

          }
        }
        addToPayload(data, '');
      };
    }

    //Converting the data into a yaml file and downloading it on button click
    const blob = new Blob([payload], {
      type: 'text/yaml'
    });


    var file = oForm.test.value + "_" + oForm.protocol.value + "_UUT_Config" + '.yaml';

    let link = document.createElement('a');
    link.download = file;

    if (window.webkitURL != null) {
      link.href = window.webkitURL.createObjectURL(blob);
    } else {
      link.href = window.URL.createObjectURL(blob);
      link.style.display = "none";
      document.body.appendChild(link);
    }
    link.click();
  }

  oCtrl.addEventListener('change', changehandler);
  oTest.addEventListener('change', changehandler);
  oSave.addEventListener('click', savehandler);
})

//To Disable the text boxes based on the specific inputs i.e. HBA Ports and iSCSI IPs 
function EnableDisableTextBox(abc) {
  var selectedValue = abc.options[abc.selectedIndex].value;
  var txt1 = document.getElementById("ip1");
  var txt2 = document.getElementById("ip2");
  var txt3 = document.getElementById("ip1_1");
  var txt4 = document.getElementById("ip2_2");

  //var hbadisabled1 = document.getElementById("hba");
  //var hbadisabled2 = document.getElementById("hba1");


  txt1.disabled = selectedValue == 'iSCSI' ? false : true;
  txt2.disabled = selectedValue == 'iSCSI' ? false : true;
  txt3.disabled = selectedValue == 'iSCSI' ? false : true;
  txt4.disabled = selectedValue == 'iSCSI' ? false : true;


  //hbadisabled1.disabled = selectedValue == 'iSCSI' ? true : false;
  //hbadisabled2.disabled = selectedValue == 'iSCSI' ? true : false;

  if (!txt1.disabled) {
    txt1.focus();
  } else if (!txt2.disabled) {
    txt2.focus();
  }
  /*else if (!hbadisabled1.disabled) {
  	hbadisabled1.focus();
  }
  else if (!hbadisabled2.disabled){
  	hbadisabled2.focus();
  }*/

}
document.getElementById('hba').disabled = true;
document.getElementById('hba1').disabled = true;

html,
html * {
  box-sizing: border-box;
  border-color: teal;
  font-family: calibri;
}

html {
  background: radial-gradient(rgba(33, 34, 34, 0.5), rgba(46, 45, 45, 0.5))
}

input[type=button],
input[type=submit] {
  padding: 1rem;
}

input[type=number] {
  width: 240px;
  height: 35px;
  font-size: 18px;
}

input[type=text],
textarea,
select {
  font: 17px Calibri;
  width: 100%;
  padding: 12px;
  border: 1px solid rgb(19, 18, 18);
  border-radius: 4px;
  color: teal;
}

div {
  border: none;
  padding: 10px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

#tab1:hover,
#tab2:hover,
#tab3:hover {
  background: teal;
}

.tab button {
  color: #1e84d8;
  /*margin-bottom: 0 px;*/
  background-color: #e7f6ff;
  float: left;
  cursor: pointer;
  transition: 0.1s;
  width: 33%;
  border-top: 1px solid #ebebeb;
  border-left: 1px solid #ebebeb;
  border-right: none;
  border-bottom: 1px solid #20a3eb;
}

#tab1btn {
  border: 1px solid rgb(19, 18, 18);
  padding: 20px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

#tab2btn {
  border: 1px solid rgb(19, 18, 18);
  padding: 20px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

#extra {
  display: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form name='myForm'>
  <fieldset>
    <label for='Controller Type'><strong>Controller Type </strong></label>
    <select name='controller' required>
      <option value=""> - Select the Controller - </option>
      <option data-extra=true value='RAID'>RAID
        <option data-extra=true value='EBOD'>EBOD
          <option data-extra=true value='AP'>AP
    </select>
  </fieldset>
  <fieldset>
    <label for='Test Type'><strong>Test Type</strong></label>
    <select name='test' required>
      <option value=""> - Select The Test - </option>
      <option data-extra=true value='BFT'>BFT
        <option data-extra=true value='CTO'>CTO
          <option data-extra=true value='RAID Generic'>RAID Generic
            <option data-extra=true value='Port Check'>Port Check
              <option data-extra=true value='FW Generic'>FW Generic
                <option data-extra=true value='EBOD Generic'>JBOD Generic
    </select>
  </fieldset>
  <fieldset>
    <label for='Protocol Type'><strong> Protocol Type</strong></label>
    <select name='protocol' id="abc" onchange="EnableDisableTextBox(this);" required>
      <option value=""> - Select The Protocol - </option>
      <option data-extra=true value='SAS'>SAS</option>
      <option data-extra=true value='iSCSI'>iSCSI</option>
      <option data-extra=true value='FC'>FC</option>
    </select>
  </fieldset>
  <fieldset>
    <label for='Chasis Input'><strong>Number of Chasis</strong></label>
    <select id="tabsToDisplay" input type='text' name='chassis' required>
      <option value=""> - Number of Controllers - </option>
      <option data-extra=true value='1'>1
        <option data-extra=true value='2'>2
    </select>
  </fieldset>


  <fieldset>
    <label for='Number of Controllers'><strong>Number of Controllers</strong></label>
    <select input type='text' name='ctrls' onchange="EnableDisableDropDown(this);" required>
      <option value=""> - Number of Controllers - </option>
      <option data-extra=true value='1'>1
        <option data-extra=true value='2'>2
    </select>
  </fieldset>
  <fieldset>
    <label for='IP Address'><strong> IP Address </strong></label>
    <input type='text' name='ip' placeholder='Enter your IP address' required />
  </fieldset>
  <fieldset>
    <label for='Left Outlets'><strong>Left Outlets </strong></label>
    <input type='number' name='lo' placeholder='Enter left outlets' required />
  </fieldset>

  <fieldset>
    <label for='Right Outlets'><strong>Right Outlets</strong></label>
    <input type='number' name='ro' placeholder='Enter right outlets' required />
  </fieldset>

  <div class="tab">
    <button id="tab1btn" value="Chasis_1">Chasis 1</button>
    <button id="tab2btn" value="Chasis_2">Chasis 2</button>
  </div>

  <div id="tab1" class="tabcontent">
    <h4>Chasis 1 Details</h4>
    <div id="extra" style="display:hidden;">

      <h6>Additional Details Required for Controller A</h6>
      <label for='Controller_ID1'>Controller_ID:</label>
      <select id='Controller_ID1' required>
        <option value=""> - Select the Controller ID - </option>
        <option value='A'>A </select>
      <label for='iSCSI1'>iSCSI IPs:</label><input type='text' name='iSCSIip1' id="ip1" placeholder='Enter iSCSI ips' disabled="disabled" />
      <label for='HBA_Ports_A'>HBA_Ports:</label><input type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' disabled="disabled" />
      <label for='MC_IP_A'>MC_IP:</label><input type='text' name='extra_ip1' id='mc_ip' placeholder='Enter the MC_IP' />
      <label for='MC_Netmask_A'>MC_Netmask:</label><input type='text' id='netmask_ip1' placeholder='Enter the MC_Netmask' />
      <label for='MC_Gateway_A'>MC_Gateway:</label><input type='text' id='gateway_ip1' placeholder='Enter the MC_Gateway' />
      <label for='MC_A'>MC:</label><input type='text' id='rbod_mc1' placeholder='Enter the MC Port' onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='SC_A'>SC:</label><input type='text' id='rbod_sc1' placeholder='Enter the SC Port' onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='FU_A'>FU:</label><input type='text' id='rbod_fu1' placeholder='Enter the FU Port' onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='EC_A'>EC:</label><input type='text' id='rbod_ec1' placeholder='Enter the EC Port' onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <br>
      <br>
      <h6>Additional Details Required for Controller B</h6>
      <label for='Controller_ID'>Controller_ID:</label>
      <select id='Controller_ID' required>
        <option value=""> - Select the Controller ID - </option>
        <option value='B'>B </select>
      <label for='iSCSI2'>iSCSI IPs:</label><input type='text' name='iSCSIip2' id="ip2" placeholder='Enter iSCSI ips' disabled="disabled" />
      <label for='HBA_Ports'>HBA_Ports:</label><input type='text' id="hba1" id='hba_ports' placeholder='Enter the HBA Ports' disabled="disabled" />
      <label for='MC_IP'>MC_IP:</label><input type='text' id='mcip' placeholder='Enter the MC_IP' />
      <label for='MC_Netmask'>MC_Netmask:</label><input type='text' id="netmaskip" placeholder='Enter the MC_Netmask' />
      <label for='MC_Gateway'>MC_Gateway:</label><input type='text' id="gatewayip" placeholder='Enter the MC_Gateway' />
      <label for='MC'>MC:</label><input type='text' name='rbod_mc' placeholder='Enter the MC Port' id="rbodmc" onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='SC'>SC:</label><input type='text' name='rbod_sc' placeholder='Enter the SC Port' id="rbodsc" onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='FU'>FU:</label><input type='text' name='rbod_fu' placeholder='Enter the FU Port' id="rbodfu" onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
      <label for='EC'>EC:</label><input type='text' name='rbod_ec' placeholder='Enter the EC Port' id="rbodec" onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />

    </div>
  </div>

  <div id="tab2" class="tabcontent">
    <h2>Chasis 2 Details</h2>
    <div id="extra" style="display:hidden;">
      <script type='text/javascript'>
        document.getElementById("tab2").innerHTML = document.getElementById("extra").innerHTML;
      </script>
    </div>
  </div>

  <fieldset>
    <input type='submit' name='save' value='Save data to file' />
  </fieldset>
</form>
</body>

</html>

Я создал скрипку для следующего. https://jsfiddle.net/jayashri/Lhwbq8z1/