В следующем коде я пытаюсь создать массив 'value', который состоит из трех частей 'str', 'com', 'val'. Что я хочу, чтобы отобразить часть данных в загруженном текстовом файле в форме, как показано на прикрепленном скриншоте. Я попытался сделать это в приведенном ниже коде, но что-то идет не так, как надо, и данные отображаются случайным образом. Может ли кто-нибудь, пожалуйста, помогите мне добиться этого.
Мой O / P выглядит ниже ss
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_outlet(s)"],
"PDU_RIGHT":['',oForm.ro.value,"# right_outlet(s)"],
}/*,
"Controller": {
//'Controller Type': oForm.controller.value,
//'Protocol Type': oForm.protocol.value,
//'Chasis Inputs': oForm.chassis.value,
'iSCSI_IPs_A': oForm.iSCSIip1.value,
'HBA_Ports':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':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 = '';
payload+= ' - # UUT 0 configuration'+'\n - # Chassis 0 configuration'+String.fromCharCode(10);
const addToPayload = (object, whitespace) => {
for (const key of Object.keys(object)) {
payload += whitespace + key + ':';
const value = object[key];
str=value[0];
com=value[1];
val=value[2];
payload += whitespace + str + ':' + com + val;
if (typeof value === 'object') {
payload += String.fromCharCode(10);
addToPayload(value, whitespace + ' ');
}
else {
payload += ' ' + value; //+ String.fromCharCode(10);
}
}
}
addToPayload(data, ' ' );
/*var neNODE= document.createElement("h2");
var nTNODE= document.createTextNode("text by JS");
var ncNODE= document.createComment("comment");
var comment = document.createComment("Comment");
data.appendcomment
*/
//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(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
}
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'><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='JBOD'>JBOD
<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='JBOD Generic' >JBOD Generic
</select>
</fieldset>
<!-- insert templated additional details here -->
<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='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='text' 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>
<fieldset>
<label for='Chasis Input'><strong>Chasis Inputs</strong></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>