using button type button

to prevent form submission

by Sascha

HTML

<!--<FORM onsubmit="return false;">-->
<FORM>
  <DIV class="section">
    <DIV class="headings">
      <h2>Intro</h2>
    </DIV>
    <DIV class="content">
      <DIV class="line_item">
        <DIV class="form_label">
          <LABEL for="FORM">This form isnt complete yet...</LABEL>
        </DIV>
        <DIV class="line_item">
          <label for="filename">
            <i>Filename</i>
            <input id="filename" value="" size="40" placeholder="the number or something useful">
          </label>
          <button type="button" onclick="saveFormAsTextFile()">
            Save to File
          </button>
        </DIV>
      </DIV>
    </DIV>
    <DIV class="section">
      <DIV class="headings">
        <h2>Document Info</h2>
      </DIV>
      <DIV class="content">
        <DIV class="line_item">
          <DIV class="form_label">
            <LABEL for="File">File No. </LABEL>
          </DIV>
          <DIV class="form_element">
            <INPUT type="text" id="FILE" />
          </DIV>
        </DIV>
        <DIV class="line_item">
          <DIV class="form_label">
            <LABEL for="ISS">Iss. </LABEL>
          </DIV>
          <DIV class="form_element">
            <INPUT type="text" id="ISS" />
          </DIV>
        </DIV>
        <DIV class="line_item">
          <DIV class="form_label">Date: </DIV>
          <DIV class="form_element">
            <span id="datetime"></span>
            <script>
              var dt = new Date();
              document.getElementById("datetime").innerHTML = dt.toLocaleDateString();

            </script>
          </DIV>
        </DIV>
        <DIV class="line_item">
          <DIV class="form_label">
            <LABEL for="cos_no">Customer No. </LABEL>
          </DIV>
          <DIV class="form_element">
            <INPUT type="text" id="co_no" />
          </DIV>
        </DIV>
      </DIV>
    </DIV>
  </DIV>
</FORM>

JavaScript

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = dd + '-' + mm + '-' + yyyy;

function saveFormAsTextFile()

{
  var textToSave =
    'Date:' + today + '\n' +
    'File No:' + document.getElementById('FILE').value + '\n' +
    'Issue No:' + document.getElementById('ISS').value + '\n' +
    'customer No:' + document.getElementById('co_no').value

  var textToSaveAsBlob = new Blob([textToSave], {
    type: "text/plain"
  });
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  var fileNameToSaveAs = document.getElementById("filename").value;

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);

  downloadLink.click();
}

function destroyClickedElement(event) {
  document.body.removeChild(event.target);
}