HTML form with javascript for exporting feild contents - cant stop form from resetting on button click

Question

I inherited an HTML form that had no coding in it, just a GUI. I then found and modified code from here to export the content of each cell out into a text file.

The original code I used does not refresh the screen on button press, but when merging it with my GUI it does. I would either like to find a new way of exporting the data out into a text file and to keep the data in the cells (in case the user made a mistake and wants to re-export it) or have a line of code to prevent the refresh from happening altogether.

I'm also aware that the code doesn't work in IE11 which is something else I would like to fix but this is a little more pressing at the moment.

The full code I have is a per below (including GUI and 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);
}

/* ============ General Rules  ============ */

body {
  font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
}

h2 {
  color: #FFFFFF;
  background-color: #10069f;
  font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
  padding: 5px;
}

label {
  font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
}

body {
  background-color: #efeff4;
}

div.section {
  margin: auto;
  width: 80%;
  padding: 1em;
  overflow: auto;
  background-color: #FFFFFF;
}

div.headings {}

div.content {
  margin-left: 10%;
}

div.line_item {
  overflow: auto;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  width: /*calc(100%-10px)*/
  ;
}

div.form_label {
  width: 50%;
  float: left;
}

div.form_element {
  width: 50%;
  float: left;
}

table.content_tab {
  /* width:70%;  */
  margin-left: 15%;
}

td.mod_disc_h {
  width: 20em;
  font-weight: bold;
}

td.mod_no_h {
  width: 20em;
  font-weight: bold;
}

td.mod_sn_h {
  width: 20em;
  font-weight: bold;
}

td.mod_ET_h {
  width: 20em;
  font-weight: bold;
}

td.mod_DIS_h {
  width: 20em;
  font-weight: bold;
}

td.mod_TSN_h {
  width: 30em;
  font-weight: bold;
}

td.mod_disc {
  background-color: #DDDDDD;
}

td.mod_no {
  background-color: #DDDDDD;
}

td.mod_sn {}

td.mod_ET {
  background-color: #DDDDDD;
}

td.mod_DIS {}

td.mod_TSN {}


/*
    tr {border: 1px solid black;}
    */

td.main_form {
  font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
}


/* HELP POPUP */

a.dt_help_but:hover {
  background-color: #AAAAAA;
  cursor: help;
}

sup {
  vertical-align: top;
  font-size: 0.6em;
}

select.mod {
  width: 6em;
}

select.dt {
  width: 10em;
}

select.yn {
  width: 10em;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

<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 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>
</FORM>

score 2 · Answer 1 · answered Jul 21 '20 at 14:33

Your problem lies in this construction:

<form>
  ...
  <button onclick="saveFormAsTextFile()">
    Save to File
  </button>
  ...
</form>

If the button type is not explicitly set it will submit the form. Either define the button type "button" (Fiddle):

<button type="button">...</button>

Or prevent the form from being submitted (Fiddle):

<form onsubmit="return false;">

Regarding IE11: it seems Internet Explorer has its own Blob() implementation; see this SO Q&A here.

Thanks for the reply, defining the button did the trick! now to resolve the IE11 bit. thanks again — flyinmonkey, Jul 23 '20 at 06:03

score 1 · Answer 2 · answered Jul 21 '20 at 14:43

Method 1: Return false on button click.

 <button onclick="return saveFormAsTextFile()">

In this method need to return false at the end of saveFormAsTextFile() function.

Method 2: Return false on form submit. .

<form onsubmit="return false;">

Method 3: This is the best way because user may submit the form using Enter key or any other possible methods even a 3rd party script. Attach the saveFormAsTextFile() to the form submit event instead of button click and return false at the end of saveFormAsTextFile():

<form onsubmit="return saveFormAsTextFile()">

Method 4: Disable the submit functionality of button by setting proper button type:

<button type="button" onclick="saveFormAsTextFile()"></button>

Method 5: If you don't like return false you can Remove the <form> tag and work with orphan input elements! This is not html valid but works!

HTML form with javascript for exporting feild contents - cant stop form from resetting on button click

2 Answers2