表单提交后的空输入字段/值

Question

我有一个非常简单的表单，我希望在提交时将值清空，以便在不刷新页面的情况下再次使用。 我所拥有的由于某种原因不起作用。 我最初的想法是在表单提交时将输入的值设置为空字符串，但是当我将它们登录到控制台时，它们不会这样做。 有谁知道我在这里做错了什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form">
      <input id="volume" type="text" />
      <input id="denied" type="text" />
      <input id="charges" type="number" step="any" />
      <button id="submit" type="btn-submit">Submit</button>
    </form>

    <div class="results">
      <p class="rate">Current Denial Rate: </p>
      <p class="recoverable">Recoverable Dollars: </p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

let form = document.getElementById("form");
let volume = document.getElementById("volume");
let denied = document.getElementById("denied");
let charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");

form.onsubmit = function (e) {
  e.preventDefault();
  volume = volume.value;
  denied = denied.value;
  charges = charges.value;

  let curDenialRate = parseFloat((denied / volume) * 100);
  charges = parseFloat(charges * 0.4);

  function formatNumber(num) {
    let formattedNum = num.toFixed(2);
    return formattedNum;
  }

  let recoverableDollars = "$" + formatNumber(charges);
  curDenialRate = formatNumber(curDenialRate) + "%";

  rate.append(curDenialRate);
  recoverable.append(recoverableDollars);

  volume = " ";
  denied = " ";
  charges = " ";

  return false;
};

Answer 1

使用HTMLFormElement.reset() ：

 let form = document.getElementById("form"); const volume = document.getElementById("volume"); const denied = document.getElementById("denied"); const charges = document.getElementById("charges"); let submit = document.getElementById("btn-submit"); let results = document.querySelector(".results"); let rate = document.querySelector(".rate"); let recoverable = document.querySelector(".recoverable"); form.onsubmit = function(e) { e.preventDefault(); let a = volume.value; let b = denied.value; let c = charges.value; let curDenialRate = parseFloat((b / a) * 100); c = parseFloat(c * 0.4); function formatNumber(num) { let formattedNum = num.toFixed(2); return formattedNum; } let recoverableDollars = "$" + formatNumber(c); curDenialRate = formatNumber(curDenialRate) + "%"; rate.append(curDenialRate); recoverable.append(recoverableDollars); form.reset(); return false; };

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form id="form"> <input id="volume" type="text" /> <input id="denied" type="text" /> <input id="charges" type="number" step="any" /> <button id="submit" type="btn-submit">Submit</button> </form> <div class="results"> <p class="rate">Current Denial Rate: </p> <p class="recoverable">Recoverable Dollars: </p> </div> <script src="script.js"></script> </body> </html>

Answer 2

您清除值的方式将不起作用。 您正在尝试更改变量，但这不会影响 DOM 元素或其值。

您必须使用以下带有value属性的代码来更改该值。

 document.getElementById("volume").value= " ";
 document.getElementById("denied").value= " ";
 document.getElementById("charges").value= " ";

表单提交后的空输入字段/值

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-07-01 16:08:57

解决方案2
0 2021-07-01 16:03:24

表单提交后的空输入字段/值

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-07-01 16:08:57

解决方案2 0 2021-07-01 16:03:24

解决方案1
1 已采纳 2021-07-01 16:08:57

解决方案2
0 2021-07-01 16:03:24