简体   繁体   English

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

[英]Empty input fields/values after form submit

I've got a very simple form and I'm want the values to empty when I submit in order to use again without refreshing the page.我有一个非常简单的表单,我希望在提交时将值清空,以便在不刷新页面的情况下再次使用。 What I've got isn't working for some reason.我所拥有的由于某种原因不起作用。 My initial idea was to set the values of the inputs to empty strings on form submit, but when I log them into the console they don't do that.我最初的想法是在表单提交时将输入的值设置为空字符串,但是当我将它们登录到控制台时,它们不会这样做。 Anyone know what I'm doing wrong here?有谁知道我在这里做错了什么?

<!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;
};

Use HTMLFormElement.reset() :使用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>

How you are clearing values will not work.您清除值的方式将不起作用。 You are trying to change the variable but that will not affect the DOM element or its value.您正在尝试更改变量,但这不会影响 DOM 元素或其值。

You will have to use the below code with value property to change the value.您必须使用以下带有value属性的代码来更改该值。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM