page redirect back after form submit in javascript

Question

I was trying to add the two operator using javascript and then I wished to try it in ajax then I wanted to see the difference between two codes action but whenever I implemented the addition in javascript I got stuck because thepage show the result for a sec then it redirect back. Can anyone please tell me what is the wrong with this code?

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <script>
        function loadFunction(){
            //window.alert("hello");
            var x= document.getElementById("d1");
            var y =document.forms["myForm"]["op1"].value;
            var z =document.forms["myForm"]["op2"].value;
            x.innerHTML="<h2>" +(parseInt(y)+parseInt(z)) + "</h2>";
            x.style.width="35%";
            x.style.border="1px solid #050";    
        }
    </script>
</head>
<body>
    <form id="myForm" onsubmit="loadFunction()" method="POST">
        <input type="text" id="op1" placeholder="operator 1" required></input> + 
        <input type="text" id="op2" placeholder="operator 2" required></input>
        <button type="submit">show the result</button>
    </form>
    <div id="d1">
        <h2>The summation will print here!!!</h2>
    </div>      
</body>
</html>

possible duplicate of [Submit a form using jQuery](http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) — Cymen, Jun 24 '15 at 19:07
Try adding `return false;` at the end of `loadFunction()` to prevent the form from posting. — Sharlike, Jun 24 '15 at 19:11
nope i was trying it in javascript and i need to test the ajax in javascript@Cymen — Ethereal soul, Jun 24 '15 at 19:11
i have tried adding `return false;` at the end of the `loadFunction()` but it didnt do anything@Sharlike — Ethereal soul, Jun 24 '15 at 19:14
Take a look at @Tomek's answer. Your form submit is reloading the page. — Sharlike, Jun 24 '15 at 19:17

score 3 · Accepted Answer · answered Jun 24 '15 at 19:12

3

The default action that browser performs each time you submit the form is to make those redirections. You have to explicitly turn this off. To do that add a event.preventDefault(), like this:

<script>
    function loadFunction(event){
        //window.alert("hello");
        var x= document.getElementById("d1");
        var y =document.forms["myForm"]["op1"].value;
        var z =document.forms["myForm"]["op2"].value;
        x.innerHTML="<h2>" +(parseInt(y)+parseInt(z)) + "</h2>";
        x.style.width="35%";
        x.style.border="1px solid #050";

        event.preventDefault();    
    }
</script>

answered Jun 24 '15 at 19:12

Tomek Sułkowski

7,081
2
17
15

You have to add `event` also to where you attach the function to your form here: `
`. Here's a working demo: http://jsbin.com/picalu/edit?html,output
– Tomek Sułkowski Jun 24 '15 at 19:18
yes its working now ..thanks for the help.@Tomek Sułkowski ..i need to know one more thing .if its reloading the page or not? – Ethereal soul Jun 24 '15 at 19:20
1

No, it's not. If you prevent the default action, the only thing that's happening is what you have in your `loadFunction` function. – Tomek Sułkowski Jun 24 '15 at 19:23
can you please show an example between non ajax javascript and ajax javascript?@Tomek Sułkowski – Ethereal soul Jun 24 '15 at 19:27
To understand better what AJAX is and how to use it try one of those tutorials: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started or http://www.w3schools.com/ajax/ – Tomek Sułkowski Jun 24 '15 at 19:49

score 1 · Answer 2 · answered Jun 25 '15 at 09:46

The other possibility is to return false in onsubmit like that:

<script>
    function loadFunction(){
        //...
        return false;
    }
</script>

and

<form id="myForm" onsubmit="return loadFunction()" method="POST">

You can then control if form should be submitted by returning either true or false from loadFunction().

page redirect back after form submit in javascript

2 Answers2