CODEWITHSUNDEEP
javascripthtmlsum
Sherlock
Sherlock

Reputation: 177

HTML Form submitting automatically

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>

Upvotes: 0

Views: 69

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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>

Upvotes: 0

Pavel Polivka
Pavel Polivka

Reputation: 878

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

Like this

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

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28414

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>

Upvotes: 4

Related Questions