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 个答案: