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>

Answer 1

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 .

Answer 2

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!