Могу ли я жестко закодировать комментарий в загруженных данных формы, используя javascript?

Question

В следующем примере я создаю файл с данными из формы html, сгенерированный файл в текстовом формате. Я хочу жестко закодировать комментарий в загруженном файле, просто для информационных целей. Возможно ли это сделать? Любая помощь будет принята с благодарностью. Например, в загруженном файле

я хочу добавить комментарий вверху перед 'PDU' как '# Начальная конфигурация детализации'

Спасибо

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.querySelector('template');
  
  //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 (Object.keys(extra).length == 2) {
		let fieldset = oTmp.content.cloneNode(true);
		oForm.insertBefore(fieldset, oProto.parentNode.nextSibling)
	  } else {
			if (document.getElementById('extra')) {
			fieldset = document.getElementById('extra')
		  	fieldset.parentNode.removeChild(fieldset);
			}
	 	 }
  
	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 == '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;

	
	if( oForm.test.value =='' || oForm.controller.value =='' || oForm.ip.value  == '' || oForm.chassis.value == '' || oForm.lo.value == '' || oForm.ro.value == ''){
        alert("Please fill all the fields!");
        return;
		}/*
	else if(oForm.extra_ip1.value == '' || oForm.extra_ip.value == '' || oForm.netmask_ip1.value == '' || oForm.netmask_ip.value == '' || oForm.gateway_ip1.value == '' || oForm.gateway_ip.value == '' ){
		alert("Please fill all the additonal required fields!");
        return;
	}
  
	const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
	if (ipformat.test(oForm.ip.value) == false) {
		return dialog('Invalid IP Address');
	  }
	else if (ipformat.test(oForm.extra_ip1.value)== false || ipformat.test(oForm.extra_ip.value)== false ){
		return dialog('Invalid MC_IP Address');
	}
	else if (ipformat.test(oForm.netmask_ip1.value)== false || ipformat.test(oForm.netmask_ip.value)== false){
		return dialog('Invalid MC_Netmask Address');
	}
	else if (ipformat.test(oForm.gateway_ip1.value)== false || ipformat.test(oForm.gateway_ip.value)== false ){
		return dialog('Invalid MC_Gateway Address');
	}  
 */
 //Creating the data elements to be cpatured in the downloaded yaml file 
	let data = {
		"PDU": {
		  "PDU TEST": oForm.test.value,
		  "PDU_IP": oForm.ip.value,
		  "PDU_LEFT": oForm.lo.value,
		  "PDU_RIGHT":oForm.ro.value
		},
		"Controller": {
			
			'Controller Type': oForm.controller.value,
			'Protocol Type': oForm.protocol.value,
			'Chasis Inputs': oForm.chassis.value,
			
			'iSCSI_IPs_A': oForm.iSCSIip1.value,
			'HBA_Ports_A':oForm.hba_ports1.value,
			'Netmask IP_A':oForm.extra_ip1.value,
			'MC_Netmask_A': oForm.netmask_ip1.value,
			'MC_Gateway_A':oForm.gateway_ip1.value,
			'MC_A': oForm.rbod_mc1.value,
			'SC_A':oForm.rbod_sc1.value,
			'FU_A':oForm.rbod_fu1.value,
			'EC_A':oForm.rbod_ec1.value,
			'Controller_ID#1': oForm.Controller_ID1.value,

			'iSCSI_IPs_B': oForm.iSCSIip2.value,
			'HBA_Ports_B':oForm.hba_ports.value,
			'Netmask IP_B':oForm.extra_ip.value,
			'MC_Netmask_B': oForm.netmask_ip.value,
			'MC_Gateway_B':oForm.gateway_ip.value,
			'MC_B': oForm.rbod_mc.value,
			'SC_B':oForm.rbod_sc.value,
			'FU_B':oForm.rbod_fu.value,
			'EC_B':oForm.rbod_ec.value,
			'Controller_ID#2': oForm.Controller_ID.value,
		},
	  };
  
//Crating the format of the data
	let payload = '';
	const addToPayload = (object, whitespace) => {
	for (const key of Object.keys(object)) {
		payload += whitespace + key + ':';
		const value = object[key];
		if (typeof value === 'object') {
			payload += String.fromCharCode(10);
			addToPayload(value, whitespace + '    ');
			} 
		  else {
			payload += ' ' + value + String.fromCharCode(10);
		  	}
		}
	  }
	  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 hbadisabled1 = document.getElementById("hba");
	var hbadisabled2 = document.getElementById("hba1");

	txt1.disabled = selectedValue == 'iSCSI' ? false : true;
	txt2.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();
	}

  	}

<!DOCTYPE html>
<html>
	<head>
		<title>Save form Data in a Text File using JavaScript</title>
		<h1>User Information </h1>
		<style>
			html, html * {
				box-sizing:border-box;
				border-color: teal;
				font-family:calibri;
			}
			html{
				  background : radial-gradient(rgba(48, 97, 97, 0.5),rgba(255,255,255,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
			}
			fieldset{
				border:none;
				padding: 10px;
				overflow: hidden;
				color: rgb(16, 8, 32);
				font-size: 25px;
				font-style: initial;
				font-family: 'Times New Roman', Times, serif; 
			}
			#extra{border:2px solid black; background:whitesmoke; border-radius:1rem;box-shadow:0 0 5px black;width:calc(100% - 24px);margin:auto;float:none;clear:both;text-indent: 50px;}
			#extra h6{margin:0}
			#extra style
			.invalid{border:2px solid red!important;background:rgba(255,0,0,0.1)}
			
		</style>
		<script src="script.js"></script>
	</head>
	<body>
	
		<template>
			<fieldset id='extra'>
				<h6>Additional Details Required</h6>
				<label for='Controller_ID1'>Controller_ID:</label>
					<select name='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" required />
				<label for='HBA_Ports_A'>HBA_Ports:</label><input type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' /> 
				<label for='MC_IP_A'>MC_IP:</label><input type='text' name='extra_ip1' placeholder='Enter the MC_IP' /> 
				<label for='MC_Netmask_A'>MC_Netmask:</label><input type='text' name='netmask_ip1' placeholder='Enter the MC_Netmask' /> 
				<label for='MC_Gateway_A'>MC_Gateway:</label><input type='text' name='gateway_ip1' placeholder='Enter the MC_Gateway' /> 
				<label for='MC_A'>MC:</label><input type='text' name='rbod_mc1' placeholder='Enter the MC Port' /> 
				<label for='SC_A'>SC:</label><input type='text' name='rbod_sc1' placeholder='Enter the SC Port' /> 
				<label for='FU_A'>FU:</label><input type='text' name='rbod_fu1' placeholder='Enter the FU Port' /> 
				<label for='EC_A'>EC:</label><input type='text' name='rbod_ec1' placeholder='Enter the EC Port' /> 
<br>
<br>
				<label for='Controller_ID2'>Controller_ID:</label>
				<select name='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" required />
			<label for='HBA_Ports'>HBA_Ports:</label><input type='text' id="hba1" name='hba_ports' placeholder='Enter the HBA Ports' /> 
			<label for='MC_IP'>MC_IP:</label><input type='text' name='extra_ip' placeholder='Enter the MC_IP' /> 
			<label for='MC_Netmask'>MC_Netmask:</label><input type='text' name='netmask_ip' placeholder='Enter the MC_Netmask' /> 
			<label for='MC_Gateway'>MC_Gateway:</label><input type='text' name='gateway_ip' placeholder='Enter the MC_Gateway' /> 
			<label for='MC'>MC:</label><input type='text' name='rbod_mc' placeholder='Enter the MC Port' /> 
			<label for='SC'>SC:</label><input type='text' name='rbod_sc' placeholder='Enter the SC Port' /> 
			<label for='FU'>FU:</label><input type='text' name='rbod_fu' placeholder='Enter the FU Port' /> 
			<label for='EC'>EC:</label><input type='text' name='rbod_ec' placeholder='Enter the EC Port' /> 
				
			</fieldset>
		</template>
		
		
		
		<form name='myForm' method='POST' >
			
			<fieldset>
				<label for='Controller Type'>Controller Type</label>
				<select name='controller' required>
					<option value=""> - Select the Controller - </option>
					<option data-extra=true value='RAID'>RAID
					<option data-extra=true value='JBOD'>JBOD
					<option data-extra=true value='AP'>AP
				</select>
			</fieldset>
			
			<fieldset>
				<label for='Test Type'>Test Type</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='JBOD Generic' >JBOD Generic
				</select>
			</fieldset>
			
			<!-- insert templated additional details here -->
			
			<fieldset>
				<label for='Protocol Type'>Protocol Type</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='IP Address'>IP Address:</label>
				<input type='text' name='ip' placeholder='Enter your IP address' required />
			</fieldset>

			<fieldset>
				<label for='Left Outlets'>Left Outlets:</label>
				<input type='number' name='lo' placeholder='Enter left outlets' required />
			</fieldset>

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

			<fieldset>
				<label for='Chasis Input'>Number of Chasis Input:</label>
				<input type='number' name='chassis' placeholder='Enter Number of Chasis'  required />
			</fieldset>
			
			<fieldset>
				<input type='button' name='save' value='Save data to file' />
			</fieldset>
		</form>
	</body>
</html>

Answer 1

Попробуйте этот код. Пользовательский комментарий добавляется в:

PDU_IP, PDU_LEFT и PDU_RIGHT. Вы также можете добавить жестко закодированный комментарий в других местах.

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.querySelector('template');
  
  //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 (Object.keys(extra).length == 2) {
		let fieldset = oTmp.content.cloneNode(true);
		oForm.insertBefore(fieldset, oProto.parentNode.nextSibling)
	  } else {
			if (document.getElementById('extra')) {
			fieldset = document.getElementById('extra')
		  	fieldset.parentNode.removeChild(fieldset);
			}
	 	 }
  
	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 == '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;

	
	if( oForm.test.value =='' || oForm.controller.value =='' || oForm.ip.value  == '' || oForm.chassis.value == '' || oForm.lo.value == '' || oForm.ro.value == ''){
        alert("Please fill all the fields!");
        return;
		}/*
	else if(oForm.extra_ip1.value == '' || oForm.extra_ip.value == '' || oForm.netmask_ip1.value == '' || oForm.netmask_ip.value == '' || oForm.gateway_ip1.value == '' || oForm.gateway_ip.value == '' ){
		alert("Please fill all the additonal required fields!");
        return;
	}
  
	const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
	if (ipformat.test(oForm.ip.value) == false) {
		return dialog('Invalid IP Address');
	  }
	else if (ipformat.test(oForm.extra_ip1.value)== false || ipformat.test(oForm.extra_ip.value)== false ){
		return dialog('Invalid MC_IP Address');
	}
	else if (ipformat.test(oForm.netmask_ip1.value)== false || ipformat.test(oForm.netmask_ip.value)== false){
		return dialog('Invalid MC_Netmask Address');
	}
	else if (ipformat.test(oForm.gateway_ip1.value)== false || ipformat.test(oForm.gateway_ip.value)== false ){
		return dialog('Invalid MC_Gateway Address');
	}  
 */
 //Creating the data elements to be cpatured in the downloaded yaml file 
	let data = {
		"PDU": {
		  "PDU TEST": oForm.test.value,
		  "PDU_IP": oForm.ip.value + ' #PDU IP',
		  "PDU_LEFT": oForm.lo.value + ' #Left PDU',
		  "PDU_RIGHT":oForm.ro.value + ' #Custom comment',
		},
		"Controller": {
			
			'Controller Type': oForm.controller.value,
			'Protocol Type': oForm.protocol.value,
			'Chasis Inputs': oForm.chassis.value,
			
			'iSCSI_IPs_A': oForm.iSCSIip1.value,
			'HBA_Ports_A':oForm.hba_ports1.value,
			'Netmask IP_A':oForm.extra_ip1.value,
			'MC_Netmask_A': oForm.netmask_ip1.value,
			'MC_Gateway_A':oForm.gateway_ip1.value,
			'MC_A': oForm.rbod_mc1.value,
			'SC_A':oForm.rbod_sc1.value,
			'FU_A':oForm.rbod_fu1.value,
			'EC_A':oForm.rbod_ec1.value,
			'Controller_ID#1': oForm.Controller_ID1.value,

			'iSCSI_IPs_B': oForm.iSCSIip2.value,
			'HBA_Ports_B':oForm.hba_ports.value,
			'Netmask IP_B':oForm.extra_ip.value,
			'MC_Netmask_B': oForm.netmask_ip.value,
			'MC_Gateway_B':oForm.gateway_ip.value,
			'MC_B': oForm.rbod_mc.value,
			'SC_B':oForm.rbod_sc.value,
			'FU_B':oForm.rbod_fu.value,
			'EC_B':oForm.rbod_ec.value,
			'Controller_ID#2': oForm.Controller_ID.value,
		},
	  };
  
//Crating the format of the data
	let payload = '';
	const addToPayload = (object, whitespace) => {
               
	for (const key of Object.keys(object)) {
		payload += whitespace + key + ':';
		const value = object[key];
		if (typeof value === 'object') {
            payload += String.fromCharCode(10);
			addToPayload(value, whitespace + '    ');
			} 
		  else {
			payload += ' ' + value + String.fromCharCode(10);
		  	}
		}
      }
      payload+='#First comment';
	  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 hbadisabled1 = document.getElementById("hba");
	var hbadisabled2 = document.getElementById("hba1");

	txt1.disabled = selectedValue == 'iSCSI' ? false : true;
	txt2.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();
	}

  	}

<!DOCTYPE html>
<html>
	<head>
		<title>Save form Data in a Text File using JavaScript</title>
		<h1>User Information </h1>
		<style>
			html, html * {
				box-sizing:border-box;
				border-color: teal;
				font-family:calibri;
			}
			html{
				  background : radial-gradient(rgba(48, 97, 97, 0.5),rgba(255,255,255,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
			}
			fieldset{
				border:none;
				padding: 10px;
				overflow: hidden;
				color: rgb(16, 8, 32);
				font-size: 25px;
				font-style: initial;
				font-family: 'Times New Roman', Times, serif; 
			}
			#extra{border:2px solid black; background:whitesmoke; border-radius:1rem;box-shadow:0 0 5px black;width:calc(100% - 24px);margin:auto;float:none;clear:both;text-indent: 50px;}
			#extra h6{margin:0}
			#extra style
			.invalid{border:2px solid red!important;background:rgba(255,0,0,0.1)}
			
		</style>
		<script src="script.js"></script>
	</head>
	<body>
	
		<template>
			<fieldset id='extra'>
				<h6>Additional Details Required</h6>
				<label for='Controller_ID1'>Controller_ID:</label>
					<select name='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" required />
				<label for='HBA_Ports_A'>HBA_Ports:</label><input type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' /> 
				<label for='MC_IP_A'>MC_IP:</label><input type='text' name='extra_ip1' placeholder='Enter the MC_IP' /> 
				<label for='MC_Netmask_A'>MC_Netmask:</label><input type='text' name='netmask_ip1' placeholder='Enter the MC_Netmask' /> 
				<label for='MC_Gateway_A'>MC_Gateway:</label><input type='text' name='gateway_ip1' placeholder='Enter the MC_Gateway' /> 
				<label for='MC_A'>MC:</label><input type='text' name='rbod_mc1' placeholder='Enter the MC Port' /> 
				<label for='SC_A'>SC:</label><input type='text' name='rbod_sc1' placeholder='Enter the SC Port' /> 
				<label for='FU_A'>FU:</label><input type='text' name='rbod_fu1' placeholder='Enter the FU Port' /> 
				<label for='EC_A'>EC:</label><input type='text' name='rbod_ec1' placeholder='Enter the EC Port' /> 
<br>
<br>
				<label for='Controller_ID2'>Controller_ID:</label>
				<select name='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" required />
			<label for='HBA_Ports'>HBA_Ports:</label><input type='text' id="hba1" name='hba_ports' placeholder='Enter the HBA Ports' /> 
			<label for='MC_IP'>MC_IP:</label><input type='text' name='extra_ip' placeholder='Enter the MC_IP' /> 
			<label for='MC_Netmask'>MC_Netmask:</label><input type='text' name='netmask_ip' placeholder='Enter the MC_Netmask' /> 
			<label for='MC_Gateway'>MC_Gateway:</label><input type='text' name='gateway_ip' placeholder='Enter the MC_Gateway' /> 
			<label for='MC'>MC:</label><input type='text' name='rbod_mc' placeholder='Enter the MC Port' /> 
			<label for='SC'>SC:</label><input type='text' name='rbod_sc' placeholder='Enter the SC Port' /> 
			<label for='FU'>FU:</label><input type='text' name='rbod_fu' placeholder='Enter the FU Port' /> 
			<label for='EC'>EC:</label><input type='text' name='rbod_ec' placeholder='Enter the EC Port' /> 
				
			</fieldset>
		</template>
		
		
		
		<form name='myForm' method='POST' >
			
			<fieldset>
				<label for='Controller Type'>Controller Type</label>
				<select name='controller' required>
					<option value=""> - Select the Controller - </option>
					<option data-extra=true value='RAID'>RAID
					<option data-extra=true value='JBOD'>JBOD
					<option data-extra=true value='AP'>AP
				</select>
			</fieldset>
			
			<fieldset>
				<label for='Test Type'>Test Type</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='JBOD Generic' >JBOD Generic
				</select>
			</fieldset>
			
			<!-- insert templated additional details here -->
			
			<fieldset>
				<label for='Protocol Type'>Protocol Type</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='IP Address'>IP Address:</label>
				<input type='text' name='ip' placeholder='Enter your IP address' required />
			</fieldset>

			<fieldset>
				<label for='Left Outlets'>Left Outlets:</label>
				<input type='number' name='lo' placeholder='Enter left outlets' required />
			</fieldset>

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

			<fieldset>
				<label for='Chasis Input'>Number of Chasis Input:</label>
				<input type='number' name='chassis' placeholder='Enter Number of Chasis'  required />
			</fieldset>
			
			<fieldset>
				<input type='button' name='save' value='Save data to file' />
			</fieldset>
		</form>
	</body>
</html>