Form with input and output immediately reload the page after printing the output

Question

I need to do a simple homework where you enter two integers in two text fields of a form and then you compute the sum and you print it in a "text field (not editable)". My program seems to work but it prints the right output and immediately reload the page. I want the page to remain with the printed output if the user does not click again on "submit" button

Here is my code HTML & JS :

function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum = +x1 + +x2;
    document.getElementById("sum").innerHTML = +x1 + +x2;
}

<!DOCTYPE html>
<html>
<head>
    <title>Number in a form</title>
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="function.js">
    </script>
</head>
<body>
    <div id="mainDiv">
        <H3>Insert two positive numbers</H3>
         <form>
            First number:<br>
            <input id="n1" type="text" name="firstname"><br>
            Second number:<br>
            <input id="n2" type="text" name="lastname">
            <BR>
            <input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>

        </form> 
        The sum is:<br>
            <output id="sum" name="x" for="a b"></output>
    </div>

    <noscript>
        Sorry: Your browser does not support or has disabled javascript
    </noscript>
</body>
</html>

There are many questions already answered here in stack overflow that can help you. Just check "how to stop form submit" or something similar. Just for reference see this - https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission Edit: just to be sure that you know what the problem actually is, when the button is clicked the form is being submitted and your backend is refreshing the page, so by preventing the submit your backend won't receive anything and won't refresh your page. — George Pandurov, May 17 '19 at 15:33

score 2 · Answer 1 · edited May 17 '19 at 16:13

2

When form is submited, the page will be reloaded. To prevent this you should change input type attribute from submit to button.

<input type="submit" value="Submit" onClick="updateExpr()"/>

to

<input type="button" value="Submit" onClick="updateExpr()"/>

edited May 17 '19 at 16:13

jtate

2,612
7
25
35

answered May 17 '19 at 15:38

Jonah Wilcox

21
1

this is right and should probably be the accepted answer! my answer expands on that. - greetz – DigitalJedi May 17 '19 at 15:55

score 0 · Answer 2 · answered May 17 '19 at 15:26

0

You can simply avoid server call by changing your form tag

<form onSubmit="return false">

answered May 17 '19 at 15:26

Vivek Jain

44
6

score -1 · Answer 3 · answered May 17 '19 at 15:21

You dont really need a form to do something like this. Forms send values to the backend, e.g. a server. You only want to manipulate some front-end elements like a container to have some new text inside it.

a <form> tag typically sends you to some URI with some aprameters, this is done by the actions attribute.

<form action="addnames.php">

for example would call the addnames.php script on your server... You dont need a server tho..look below:

  function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum =x1 +x2;
    document.getElementById("sum").innerHTML = sum;
}

<h2>HTML Forms</h2>

  First name:<br>
  <input id="n1" type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input id="n2" type="text" name="lastname" value="Mouse">
  <br><br>
  <button type="submit" onclick="updateExpr()">Submit</button>
  <div id="sum">
  
  </div>
  <script>

  </script>

I`m glad this solved your issue :) Dont know why someone downvoted me tho haha ^^ — DigitalJedi, May 17 '19 at 15:29

score -1 · Answer 4 · answered May 17 '19 at 15:24

I would recommand you to add onSubmit method to the form instead of onclick to the input. Also you better add a return : false to your function and add onsubmit="return updateExpr()".

function updateExpr() {
    var x1 = document.getElementById("n1").value;
    var x2 = document.getElementById("n2").value;
    var sum = +x1 + +x2;
    document.getElementById("sum").innerHTML = +x1 + +x2;
    return false;
}

<!DOCTYPE html>
<html>
<head>
    <title>Number in a form</title>
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="function.js">
    </script>
</head>
<body>
    <div id="mainDiv">
        <H3>Insert two positive numbers</H3>
         <form onsubmit="return updateExpr()">
            First number:<br>
            <input id="n1" type="text" name="firstname"><br>
            Second number:<br>
            <input id="n2" type="text" name="lastname">
            <BR>
            <input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>

        </form> 
        The sum is:<br>
            <output id="sum" name="x" for="a b"></output>
    </div>

    <noscript>
        Sorry: Your browser does not support or has disabled javascript
    </noscript>
</body>

Another way of doing this would have been to add a button outside of the form linked to the function by onclick event

score -1 · Answer 5 · answered May 17 '19 at 15:28

juste add preventDefault(), like this

function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;

}

Form with input and output immediately reload the page after printing the output

5 Answers5