Посмотрите на этот фрагмент кода. Это в основном ваш код, но я изменил ту часть, где вы создать payload.
1003 * Я пометил свои изменения с
MY CHANGE BEGINS HERE и
MY CHANGE ENDS HERE комментариями. 1007 * Он добавляет пространства динамически, так формат выглядит следующим образом:
PDU:
PDU TEST: BFT
PDU_IP: 185.237.96.51
Product Type:
Protocol Type: iSCSI
Chasis Inputs:
Тем не менее, он не работает с остальными вашими полями, но, возможно, вы можете использовать его, чтобы заменить ваш взломанный пробел, создавая простые объекты и добавляя их к вашему data.
1013 *
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 oTmp = document.querySelector('template');
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];
}
if (this.name == 'controller') {
if (this.value == 'RAID') oProto.disabled = false
else oProto.disabled = true
}
}
const dialog = function(msg) {
alert(msg);
return false;
}
const savehandler = function(e) {
e.preventDefault();
let valid = true;
/*[ 'name','email','test','controller','ip','chassis' ].forEach( n => {
oForm[ n ].classList.remove('invalid');
if( oForm[ n ].value=='' ){
oForm[ n ].classList.add('invalid');
valid=false;
}
});*/
if (!valid) return dialog('Please fill all the fields!');
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');
}
let data = {
"PDU": {
"PDU TEST": oForm.test.value,
"PDU_IP": oForm.ip.value
},
'Product Type': oForm.controller.value,
'Protocol Type': oForm.protocol.value,
'Chasis Inputs': oForm.chassis.value
};
var datastr = JSON.stringify(data);
if (Object.keys(extra).length == 2) {
data[' - #Controller_ID_A'] = oForm['Controller-ID1'].value;
data[' HBA_Ports_A'] = [oForm['hba-ports1'].value];
data[' MC_IP_A'] = oForm['extra-ip1'].value;
data[' MC_Netmask_A'] = oForm['netmask-ip1'].value;
data[' MC_Gateway_A'] = oForm['gateway-ip1'].value;
data[' MC_A'] = oForm['rbod-mc1'].value;
data[' SC_A'] = oForm['rbod-sc1'].value;
data[' FU_A'] = oForm['rbod-fu1'].value;
data[' EC_A'] = oForm['rbod-ec1'].value;
}
if (Object.keys(extra).length == 2) {
data[' - #Controller_ID'] = oForm['Controller-ID'].value;
data[' HBA_Ports'] = [oForm['hba-ports'].value];
data[' MC_IP'] = oForm['extra-ip'].value;
data[' MC_Netmask'] = oForm['netmask-ip'].value;
data[' MC_Gateway'] = oForm['gateway-ip'].value;
data[' MC'] = oForm['rbod-mc'].value;
data[' SC'] = oForm['rbod-sc'].value;
data[' FU'] = oForm['rbod-fu'].value;
data[' EC'] = oForm['rbod-ec'].value;
}
// MY CHANGE BEGINS HERE <-------
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, '');
// MY CHANGE ENDS HERE <------------
const blob = new Blob([payload], {
type: 'text/plain'
});
const file = 'formData.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);
})
<!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=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_ID_A'>Controller_ID:</label>
<select name='Controller-ID1' required>
<option value=""> - Select the Controller ID - </option>
<option value='A'>A </select>
<label for='HBA_Ports_A'>HBA_Ports:</label><input type='text' 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' />
<label for='Controller_ID'>Controller_ID:</label>
<select name='Controller-ID' required>
<option value=""> - Select the Controller ID - </option>
<option value='B'>B </select>
<label for='HBA_Ports'>HBA_Ports:</label><input type='text' 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' required>
<option value=""> - Select The Protocol -
<option data-extra=true value='SAS'>SAS
<option data-extra=true value='iSCSI'>iSCSI
<option data-extra=true value='FC'>FC
</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='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>
Вы прокомментировали, что предпочли бы динамические c имена файлов. Вы можете заменить
const file = 'formData.yaml';
на что-то вроде этого:
let file = 'test_' + data.PDU['PDU TEST'];
file += '_controller_' + data['Product Type'];
file += '_' + new Date().toISOString().substr(0, 10); // '2020-05-02'
file += '.yaml';
file = prompt('Filename:', file); // to edit manually
if (!file) { return; } // canceled by user