How can I easily stop the page from reloading when submitting a form?

Question

When I click submit on the form, something else is supposed to pop up. But when I click submit, it reloads the page so the thing doesn't pop up.

I have not been able to find the answer I am looking for. I'm not done with the project, so if it looks incomplete, that's why.

Here is the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="header">
            <span class="siteheader">ChubbyMan'sMath.com</span>  
            <div class="title">Area Calculator</div>
    </div>

    <p class="question">What shape do you want to find the area of?</p>
    <p id="n1" onclick="showForm();">1. Square</p> <!-- answer --> <p id="squareanswer">The area is 100.</p>
    <p id="n2">2. Rectangle</p>
    <p id="n3">3. parallelogram</p>
    <p id="n4">4. Circle</p>
    <p id="n5">5. Triangle</p>
    <p id="n6">6. Rhombus</p>
    <p id="n7">7. Trapezoid</p>

    <form name="squareform" id="squareform">
        <input id="squareinput"   type="text" placeholder="x">
        <input type="submit" value="Submit" id="squarebutton" onclick="square()">
    </form>

</body>
<script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:900&display=swap" rel="stylesheet">
</html>

(CSS)

* {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif; 
}

.header {
    width: 100%;
    height: 200px;
    background-color: rgb(62, 110, 243);
}

body {
    background-color: lightblue;
}

.siteheader {
    background-color: darkblue;
    font-size: 150%;
    color: white;
    position: absolute;
    left: 40px;
    top: 30px;
    padding: 10px;
}

.title {
    position: absolute;
    font-size: 300%;
    color: lightgray;
    left: 35%;
    top: 80px;
}

.question {
    position: absolute;
    font-size: 125%;
    left: 90px;
    top: 250px;

}

#n1 {
    position: absolute;
    left: 90px;
    top: 300px;
}

#n2 {
    position: absolute;
    left: 90px;
    top: 350px;
}

#n3 {
    position: absolute;
    left: 90px;
    top: 400px;
}

#n4 {
    position: absolute;
    left: 90px;
    top: 450px;
}

#n5 {
    position: absolute;
    left: 90px;
    top: 500px;
}

#n6 {
    position: absolute;
    left: 90px;
    top: 550px;
}

#n7 {
    position: absolute;
    left: 90px;
    top: 600px;
}

#squareform {
    position: absolute;
    left: 200px;
    top: 295px;
    display: none;  
}

#squareanswer {
    position: absolute;
    left: 400px;
    top: 295px;
    display: none;
}

(JAVASCRIPT

var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
var squareInput = document.getElementById('squareinput').value;

function showForm () {
    document.getElementById('squareform').style.display  = "block";
};

function square() {
    document.getElementById('squareanswer').style.display  = "block";
};



n2.onclick = function rectangle() {

};

You should prevent default event on form submit after that show your popup to the user. — Mohammadreza Khedri, Jul 02 '19 at 02:20
Possible duplicate of [prevent form submission (javascript)](https://stackoverflow.com/questions/24248576/prevent-form-submission-javascript) — Raul Sauco, Jul 02 '19 at 02:32

score 1 · Accepted Answer · answered Jul 02 '19 at 02:35

1

Just add return false to onclick event:

<input type="submit" value="Submit" id="squarebutton" onclick="square(); return false;">

answered Jul 02 '19 at 02:35

Ritesh Khandekar

3,885
3
15
30

score 0 · Answer 2 · answered Jul 02 '19 at 02:24

As you are not using any form-handlers, you don't require the button type to be submit. You can simply use a input with type button and it will work fine. Just change the submit button code to following-

<input type="button" value="Submit" id="squarebutton" onclick="square()">

Hope it helps.

score 0 · Answer 3 · answered Jul 02 '19 at 02:25

This is by design; this is how HTML forms work. When the user clicks a button in a form with type="submit", the form will submit to the page specified in the action="" attribute of the form tag. If no other page is specified (or if the attribute is omitted) then the form data is sent to the same page (that is, the originating page; that is, the page the form is on) - which is seen as a page refresh.

To avoid this (default) behavior, you can interrupt the submit process and return false - or, you can switch from using a form to using AJAX.

How to interrupt the form submit process

What is AJAX and how to use it

Form submitting when clicked

Should I have One form or two seperate forms

score 0 · Answer 4 · answered Jul 02 '19 at 02:32

if you don't want to submit the form and don't want the page to be reloaded you can simply use novalidate attribute to the form and it will the work for you.

    <form name="squareform" id="squareform" novalidate>
       <input id="squareinput"   type="text" placeholder="x">
       <input type="submit" value="Submit" id="squarebutton" onclick="square()">
    </form>

How can I easily stop the page from reloading when submitting a form?

4 Answers4