gpt4 book ai didi

javascript - 如何对用户以 html 表单输入的数据应用 stringify?

转载 作者:行者123 更新时间:2023-11-28 03:12:08 30 4
gpt4 key购买 nike

我使用 html、js 和 css 构建了一个应用程序。 Web 应用程序的输出是文本或 yaml 文件。我正在输入数据并尝试收集到 yaml 文件中。代码如下:-例如,我希望下载文件中的“PDU”数据是这样的

PDU: PDU_IP: 10.235.250.49 (this is just a sample IP)

当我尝试执行此操作时,它显示[object Object]。我尝试使用 stringify 将对象转换为字符串,但未能实现以下功能。谁能帮我格式化下载的数据。基本上我希望数据采用 YAML 文件中的格式。

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;


}



let payload = Object.keys(data).map(key => {
return [key, data[key]].join(': ')
}).join(String.fromCharCode(10));


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>

最佳答案

看一下这个片段。这主要是您的代码,但我更改了您创建有效负载的部分。

我用 MY CHANGE BEGINS HEREMY CHANGE ENDS HERE 注释标记了我的更改。

它动态添加空格,因此格式如下所示:

PDU:
PDU TEST: BFT
PDU_IP: 185.237.96.51
Product Type:
Protocol Type: iSCSI
Chasis Inputs:

但是,它不适用于您的其余字段,但也许您可以通过创建普通对象并将它们添加到您的数据中来使用它来替换您的黑客空白。

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>

<小时/>

您评论说您更喜欢动态文件名。您可以更换

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

关于javascript - 如何对用户以 html 表单输入的数据应用 stringify?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60000358/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com