Empty input fields/values after form submit

Question

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

Spectric · Accepted Answer · 2021-07-01 17:07:17Z

1

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

edited Jul 1, 2021 at 17:07

answered Jul 1, 2021 at 16:08

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RRhodes Over a year ago

This is perfect! Thank you! If I may ask a followup question, when I use the forms a second time, my results are NaN. If this because of the preventdefault()?

Spectric Over a year ago

@RRhodes Yes, there's an issue. Inside the form, you set volume = volume.value; which means after submitting once volume is a number, so volume.value returns undefined. Just refactor the variable name. This is more obvious when you make volume a constant.

Spectric Over a year ago

@RRhodes I've updated the answer and refactored the variable names. It should work now.

RRhodes Over a year ago

Awesome! Thanks so much.

Tushar Shahi · Accepted Answer · 2021-07-01 16:09:34Z

0

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.

You will have to use the below code with value property to change the value.

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

edited Jul 1, 2021 at 16:09

answered Jul 1, 2021 at 16:03

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

2 Comments

ikiK Over a year ago

Sorry I was wrong, he modified and re-asiegnd it at start... volume = volume.value; etc..

Tushar Shahi Over a year ago

Haha, once again I missed that. This has been a rollercoaster.

Collectives™ on Stack Overflow

Empty input fields/values after form submit

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related