HTML Form submitting automatically

Question

I am new to HTML and JavaScript. I just made a simple page to add two numbers. The output that I am getting is correct but when I click the sum button the sum is there for a fraction of second and then again the page reloads itself.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <script>
        function get_sum() {
            let num_a = parseInt(document.getElementById('first').value);
            let num_b = parseInt(document.getElementById('second').value);
            document.getElementById('sum').innerText = (num_a + num_b).toString(10);
        }

    </script>
</head>
<body>
<form id="form" onsubmit="return get_sum()">
    <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
    <br>
    <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
    <button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>

Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — VLAZ, Aug 03 '20 at 17:41
You have to `return false` from `get_sum` in order to prevent the submission. — VLAZ, Aug 03 '20 at 17:41
Yeah, it works on `return false;` but what is the need of this? — Sherlock, Aug 03 '20 at 17:47

score 4 · Answer 1 · answered Aug 03 '20 at 17:41

You need to pass the event and add event.preventDefault(); at the beginning of the function to prevent page from reloading since it's a submit button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <script>
        function get_sum(event) {
            event.preventDefault();
            let num_a = parseInt(document.getElementById('first').value);
            let num_b = parseInt(document.getElementById('second').value);
            document.getElementById('sum').innerText = (num_a + num_b).toString(10);
        }

    </script>
</head>
<body>
<form id="form" onsubmit="return get_sum(event)">
    <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
    <br>
    <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
    <button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>

score 1 · Answer 2 · answered Aug 03 '20 at 17:43

1

The onsubmit must return false to prevent browser from submitting it to server.

Like this

<form id="form" onsubmit="get_sum(); return false;">

answered Aug 03 '20 at 17:43

Pavel Polivka

858
4
22

It worked, but why do I need to give `return false;`? – Sherlock Aug 03 '20 at 17:45
2

Basically form is designed to be submitted to some backend code. You are not doing it and handling the form in the frontend only. The false will stop the submit from going to full loop and submitting it to the server. – Pavel Polivka Aug 03 '20 at 17:47
Thanks for the clarification – Sherlock Aug 03 '20 at 17:49

Mark Schultheiss · Answer 3 · 2020-08-03T17:58:26.263

You can add an event listener to handle the click after you change the type to "button". Or you can stop the event from propagating to the actual "submit" action. OR, do both to prevent the submit of the form.

Why both? A form can also be submitted by hitting "return/enter" or via script.

This is perhaps a bit of overkill but shows how to handle the events.

function get_sum(event) {
  event.preventDefault();
  let num_a = parseInt(document.getElementById('first').value);
  let num_b = parseInt(document.getElementById('second').value);
  document.getElementById('sum').innerText = (num_a + num_b).toString(10);
}
const sumButton = document.getElementById('sum-click');
sumButton.addEventListener("click", get_sum, false);

const form = document.getElementById('form');
form.addEventListener('submit', get_sum);

<form id="form">
  <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
  <br>
  <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
  <button id="sum-values" type="submit">Sum </button>
  <button id="sum-click" type="button">Sum (Not submit)</button>
</form>
<h1 id="sum"></h1>

HTML Form submitting automatically

3 Answers3