How to refresh the contents of the variables in javascript

Question

I have a code that has various fields...

<div id="tabs-5" data-content-theme="b" data-theme="b" class="ui-body ui-body-b ui-corner-all">
  <form id="fileEn">
    <div data-role="fieldcontain">
      <label for="files">Upload Image Files</label>
      <input id="files" type="file" data-clear-btn="true" value="" multiple/>
      <div id="progress_bar">
        <div class="percent">0%</div>
      </div>
      <output id="result1"></output>
      <output id="result2"></output>
      <output id="result3"></output>
      <output id="result4"></output>
    </div>
    <div data-role="fieldcontain">
      <label for="pwdF">Enter Password:</label>
      <input type="password" name="pwdF" id="val4" value="" />
    </div>
    <div data-role="fieldcontain">
      <label for="bitsF" class="select">Choose bits:
      </label>
      <select name="bitsF" id="val5">
        <option value="128">128</option>
        <option value="192">192</option>
        <option value="256">256</option>
      </select>
    </div>
    <input type="button" id="btn" onclick="load1();return false;" value="Compute" data-theme="b" data-inline="true" />
    <input type="reset" value="Reset" data-theme="b" data-inline="true" />
  </form>
</div>

Here onclick of a button called 'Compute' the load1() function is called... This load1() function does some computation and saves the computed file..eg:file1.doc...next i press the 'reset' button to get empty fields...now when i press the 'Compute' button again,the current computed file eg:file2.doc as well as the previous computed file(file1.doc) are saved..this is because the previous contents were not removed..

Can anyone please suggest so as to how i can perform the action similar to Ctrl+F5 onclick of a suitable button (preferably reset button itself which inturn calls a different function inorder to refresh)to refresh the contents..so that only the current computed file is saved (file2.doc) and not all the previous ones(file1.doc)...

Answer 1

You can do some actions when the form performs the reset action, by using:

var fileEn = document.getElementById("fileEn"); // Get the form identifier.
fileEn.addEventListener("reset", function() { // When the form performs the reset action.
   reset(); // Call the reset function.
});

Something like this:

 (function() { window.onload = function() { function load1() { alert("The compute button has been pressed."); } function reset() { alert("The reset button has been pressed."); var files = document.getElementById("files"); files.value = ""; // To reset the input file field. } var btn = document.getElementById("btn"); btn.addEventListener("click", function() { load1(); }); var fileEn = document.getElementById("fileEn"); // Get the form identifier. fileEn.addEventListener("reset", function() { // When the form performs the reset action. reset(); // Call the reset function. }); }; })();

 <div id="tabs-5" data-content-theme="b" data-theme="b" class="ui-body ui-body-b ui-corner-all"> <form id="fileEn"> <div data-role="fieldcontain"> <label for="files">Upload Image Files</label> <input id="files" type="file" data-clear-btn="true" value="" multiple/> <div id="progress_bar"> <div class="percent">0%</div> </div> <output id="result1"></output> <output id="result2"></output> <output id="result3"></output> <output id="result4"></output> </div> <div data-role="fieldcontain"> <label for="pwdF">Enter Password:</label> <input type="password" name="pwdF" id="val4" value="" /> </div> <div data-role="fieldcontain"> <label for="bitsF" class="select">Choose bits: </label> <select name="bitsF" id="val5"> <option value="128">128</option> <option value="192">192</option> <option value="256">256</option> </select> </div> <input type="button" id="btn" value="Compute" data-theme="b" data-inline="true" /> <input type="reset" value="Reset" data-theme="b" data-inline="true" /> </form> </div>