Home » Jquery » javascript – How can I download the data from two different tabs with the same template but user input data?

javascript – How can I download the data from two different tabs with the same template but user input data?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have defined a data template with the components which are retrieving user input data and then I am downloading it in form of a text file.

I have two tabs which is based on the field Number of Chasis. If I select 1 in that field then I should be able to populate the data in the required fields as mentioned in the data (in the JS). If the user selects 2 in Number of Chasis then user will enter data in two separate tabs and I need to retreive the data of both the tabs Chasis 1 and Chasis 2.

The problem I am facing is that I am unable to come up with a method to retrieve the data from the second tab i.e. Chasis 2. I hope my requirement is clear, any help at this point would be really appreciated.

$(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>

I have created the fiddle for the following.
https://jsfiddle.net/jayashri/Lhwbq8z1/

How to&Answer: