Question

我有一个包含各种字段的代码......

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

在这里点击一个名为'Compute'的按钮，调用load1（）函数...... 这个load1（）函数做了一些计算并保存了计算文件.eg：file1.doc ...接下来我按下'reset'按钮得到空字段...现在当我再次按下'Compute'按钮时，保存当前计算文件，例如：file2.doc以及之前的计算文件（file1.doc）。这是因为之前的内容未被删除..

任何人都可以建议我如何执行类似于Ctrl + F5的动作，点击一个合适的按钮（最好是重置按钮本身，它会调用另一个函数以便刷新）来刷新内容..所以只有保存当前计算文件（file2.doc）而不是所有以前的文件（file1.doc）......

Answer 1

您可以在表单执行重置操作时执行一些操作，方法是使用：

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.
});

这样的事情：

(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>

如何在javascript中刷新变量的内容

1 个答案: