title: How can i format the template in which the data gets downloaded in the text blob through javascript in an HTML Form?
body: <p>I have a web app downloads the user input in form of a text file. How can I modify the template of the text file which is getting downloaded. Is there any way.
  The current format in which it is getting downloaded is:-</p>
  
  <pre><code>Name: Mike
  Email: xyz@gmail.com
  Test type: BFT
  Product Type: RAID
  Protocol Type: iSCSI
  IP Address: 255.255.255.0
  Chasis Inputs: 21
  HBA_Ports: 
  MC_IP: 
  MC_Netmask: 
  MC_Gateway: 
  MC: 
  SC: 
  FU: 
  EC: 
  Controller_ID: 
  </code></pre>
  
  <p>The expected way I am looking for it to download is </p>
  
  <pre><code>Name: Mike
  Email: xyz@gmail.com
  Test type: BFT
      IP Address: 255.255.255.0
  product Type: RAID
  Protocol Type: iSCSI
     -Controller_ID:
     -Chasis Inputs: 21
     -HBA_Ports: 
     -MC_IP: 
     -MC_Netmask: 
     -MC_Gateway: 
     -MC: 
     -SC: 
     -FU: 
     -EC: 
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Save form Data in a Text File using JavaScript&lt;/title&gt;
      &lt;h1&gt;User Information&lt;/h1&gt;
      &lt;style&gt;
        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;
        }
        #extra h6 {
          margin: 0;
        }
        .invalid {
          border: 2px solid red !important;
          background: rgba(255, 0, 0, 0.1);
        }
      &lt;/style&gt;
      &lt;script&gt;
        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( option.hasAttribute( 'data-RBOD' ) ) 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 =&gt; {
        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 reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (reg.test(oForm.email.value) == false) {
              return dialog("Invalid Email Address");
            }
  
            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");
            }
  
            if (oForm.name.value.length &lt; 3)
              return dialog("Name must be having atleast 3 Characters");
  
            let data = {
              Name: oForm.name.value,
              Email: oForm.email.value,
              "Test type": oForm.test.value,
              "Product Type": oForm.controller.value,
              "Protocol Type": oForm.protocol.value,
              "IP Address": oForm.ip.value,
              "Chasis Inputs": oForm.chassis.value
            };
  
            if (Object.keys(extra).length == 2) {
              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;
              data["Controller_ID"] = oForm["Controller-ID"].value;
            }
            let payload = Object.keys(data)
              .map(key =&gt; {
                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);
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;template&gt;
        &lt;fieldset id="extra"&gt;
          &lt;h6&gt;Additional Details Required&lt;/h6&gt;
          &lt;label for="Controller_ID"&gt;Controller_ID:&lt;/label&gt;
          &lt;select name="Controller-ID" required&gt;
            &lt;option value=""&gt; - Select the Controller ID - &lt;/option&gt;
            &lt;option value="A"&gt;A &lt;/option
            &gt;&lt;option value="B"&gt;B &lt;/option&gt;&lt;/select
          &gt;
  
          &lt;label for="HBA_Ports"&gt;HBA_Ports:&lt;/label
          &gt;&lt;input
            type="text"
            name="hba-ports"
            placeholder="Enter the HBA Ports"
          /&gt;
          &lt;label for="MC_IP"&gt;MC_IP:&lt;/label
          &gt;&lt;input type="text" name="extra-ip" placeholder="Enter the MC_IP" /&gt;
          &lt;label for="MC_Netmask"&gt;MC_Netmask:&lt;/label
          &gt;&lt;input
            type="text"
            name="netmask-ip"
            placeholder="Enter the MC_Netmask"
          /&gt;
          &lt;label for="MC_Gateway"&gt;MC_Gateway:&lt;/label
          &gt;&lt;input
            type="text"
            name="gateway-ip"
            placeholder="Enter the MC_Gateway"
          /&gt;
          &lt;label for="MC"&gt;MC:&lt;/label
          &gt;&lt;input type="text" name="rbod-mc" placeholder="Enter the MC Port" /&gt;
          &lt;label for="SC"&gt;SC:&lt;/label
          &gt;&lt;input type="text" name="rbod-sc" placeholder="Enter the SC Port" /&gt;
          &lt;label for="FU"&gt;FU:&lt;/label
          &gt;&lt;input type="text" name="rbod-fu" placeholder="Enter the FU Port" /&gt;
          &lt;label for="EC"&gt;EC:&lt;/label
          &gt;&lt;input type="text" name="rbod-ec" placeholder="Enter the EC Port" /&gt;
        &lt;/fieldset&gt;
      &lt;/template&gt;
  
      &lt;form name="myForm" method="POST"&gt;
        &lt;fieldset&gt;
          &lt;label for="Name"&gt;Name&lt;/label&gt;
          &lt;input type="text" name="name" placeholder="Enter your name" required /&gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;label for="Email"&gt;Email&lt;/label&gt;
          &lt;input
            type="text"
            name="email"
            placeholder="Enter your Email Id"
            required
          /&gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;label for="Controller Type"&gt;Controller Type&lt;/label&gt;
          &lt;select name="controller" required&gt;
            &lt;option value=""&gt; - Select the Controller - &lt;/option&gt;
            &lt;option data-extra="true" value="RAID"&gt;RAID &lt;/option
            &gt;&lt;option value="JBOD"&gt;JBOD &lt;/option
            &gt;&lt;option value="AP"&gt;AP &lt;/option&gt;&lt;/select
          &gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;label for="Test Type"&gt;Test Type&lt;/label&gt;
          &lt;select name="test" required&gt;
            &lt;option value=""&gt; - Select The Test - &lt;/option&gt;
            &lt;option data-extra="true" value="BFT"&gt;BFT &lt;/option
            &gt;&lt;option data-extra="true" value="CTO"&gt;CTO &lt;/option
            &gt;&lt;option data-extra="true" value="RAID Generic"&gt;RAID Generic &lt;/option
            &gt;&lt;option data-extra="true" value="Port Check"&gt;Port Check &lt;/option
            &gt;&lt;option data-extra="true" value="FW Generic"&gt;FW Generic &lt;/option
            &gt;&lt;option data-extra="true" value="JBOD Generic"
              &gt;JBOD Generic
            &lt;/option&gt;&lt;/select
          &gt;
        &lt;/fieldset&gt;
  
        &lt;!-- insert templated additional details here --&gt;
  
        &lt;fieldset&gt;
          &lt;label for="Protocol Type"&gt;Protocol Type&lt;/label&gt;
          &lt;select name="protocol" disabled&gt;
            &lt;option selected hidden disabled&gt; - Select The Protocol - &lt;/option
            &gt;&lt;option data-extra="true" value="SAS"&gt;SAS &lt;/option
            &gt;&lt;option data-extra="true" value="iSCSI"&gt;iSCSI &lt;/option
            &gt;&lt;option data-extra="true" value="FC"&gt;FC &lt;/option&gt;&lt;/select
          &gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;label for="IP Address"&gt;IP Address:&lt;/label&gt;
          &lt;input
            type="text"
            name="ip"
            placeholder="Enter your IP address"
            required
          /&gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;label for="Chasis Input"&gt;Number of Chasis Input:&lt;/label&gt;
          &lt;input
            type="number"
            name="chassis"
            placeholder="Enter Number of Chasis"
            required
          /&gt;
        &lt;/fieldset&gt;
  
        &lt;fieldset&gt;
          &lt;input type="button" name="save" value="Save data to file" /&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>