温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How can i apply stringify on the data which has been input by the user in an html form?

javascript - 我如何在用户以html格式输入的数据上应用字符串化?

发布于 2020-03-27 15:55:28

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

PDU:PDU_IP:10.235.250.49(这只是示例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>

查看更多

查看更多

提问者
Jayashri
被浏览
27
Stratubas 2020-02-05 16:53

看看这个片段。这主要是您的代码,但是我更改了创建的部分payload

我用MY CHANGE BEGINS HEREMY CHANGE ENDS HERE评论标记了我的更改

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

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

但是,它不适用于您的其余字段,但是也许您可以使用它通过创建简单的对象并将其添加到中来代替黑字白字data

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