My forms data gets cleared when the submit button is pressed

Question

https://ghostbin.com/paste/7mkdg

I have this code, however on pressing the calculate button, it clears all the data really fast and the result isn't displayed. I can see it briefly in the address bar, and in the output box (the readonly one) but it disappears in less than a second.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="main-section"> <div class="dark-overlay"> <div class="team-inner"> <div class="container"> <div class="row"> <div class="col-6"> <form class="" name="calcGravAcceleration"> <div class="form-group b"> <label for="inputAngVelocity1">Angular Velocity</label> <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)"> </div> <div class="form-group"> <label for="inputRadius1">Radius</label> <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle"> </div> <div class="form-group"> <label>Gravitational Acceleration</label> <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly> </div> <button onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button> </form> </div> <div class="col-6"> </div> </div> </div> </div> </div> </section> <script> function calcGravAccel(){ var angVel = document.getElementById("inputAngVelocity1").value; var radius = document.getElementById("inputRadius1").value; var squaredAngVel = Math.pow(angVel, 2); var gravityAccel = squaredAngVel*radius; var result = document.getElementById("gravAccelResult"); result.value="" + gravityAccel; } </script>

Answer 1

• Change your button to input type button to avoid the submission of your form.

---

<input onClick='calcGravAccel()' type='button' class="btn btn-primary" value='Calculate Gravitational Acceleration'></input>

• Or remove the form element.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="main-section"> <div class="dark-overlay"> <div class="team-inner"> <div class="container"> <div class="row"> <div class="col-6"> <form class="" name="calcGravAcceleration"> <div class="form-group b"> <label for="inputAngVelocity1">Angular Velocity</label> <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)"> </div> <div class="form-group"> <label for="inputRadius1">Radius</label> <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle"> </div> <div class="form-group"> <label>Gravitational Acceleration</label> <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly> </div> <input onClick='calcGravAccel()' type='button' class="btn btn-primary" value='Calculate Gravitational Acceleration'></input> </form> </div> <div class="col-6"> </div> </div> </div> </div> </div> </section> <script> function calcGravAccel(e){ var angVel = document.getElementById("inputAngVelocity1").value; var radius = document.getElementById("inputRadius1").value; var squaredAngVel = Math.pow(angVel, 2); var gravityAccel = squaredAngVel*radius; var result = document.getElementById("gravAccelResult"); result.value="" + gravityAccel; } </script>

Answer 2

You should specify the type of the button as type="button" . The default type for button is submit which is causing your form to submit when you click which in turn is refreshing the page. Change to this:

<button type="button" onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button>

Answer 3

When you have a <button> on a <form> , the default behavior of that button is to submit the form. You need to prevent that default behavior if you don't want it. Get hold of the event parameter to the click handler, and invoke the preventDefault method. Since you have in-line event handlers you will have to modify those slightly to pass along the event parameter. If you used javascript to assign those handlers you wouldn't have to.

<button onclick="calcGravAccel(event)" class="btn btn-primary">Calculate Gravitational Acceleration</button>

...

<script>
    function calcGravAccel(event){
        event.preventDefault();
        var angVel = document.getElementById("inputAngVelocity1").value;
        var radius = document.getElementById("inputRadius1").value;

        var squaredAngVel = Math.pow(angVel, 2);

        var gravityAccel = squaredAngVel*radius;

        var result = document.getElementById("gravAccelResult");

        result.value="" + gravityAccel;

    }
</script>

Answer 4

 function calcGravAccel(){ var angVel = document.getElementById("inputAngVelocity1").value; var radius = document.getElementById("inputRadius1").value; var squaredAngVel = Math.pow(angVel, 2); var gravityAccel = squaredAngVel*radius; document.getElementById("gravAccelResult").value = gravityAccel; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="main-section"> <div class="dark-overlay"> <div class="team-inner"> <div class="container"> <div class="row"> <div class="col-6"> <form class="" name="calcGravAcceleration"> <div class="form-group b"> <label for="inputAngVelocity1">Angular Velocity</label> <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)"> </div> <div class="form-group"> <label for="inputRadius1">Radius</label> <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle"> </div> <div class="form-group"> <label>Gravitational Acceleration</label> <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly> </div> </form> <button onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button> </div> </div> </div> </div> </div> </section> <script> </script>

Answer 5

Just Add retun to the function call and return false in the function, if you dont want the form to submit

 function calcGravAccel() { var angVel = document.getElementById("inputAngVelocity1").value; var radius = document.getElementById("inputRadius1").value; var squaredAngVel = Math.pow(angVel, 2); var gravityAccel = squaredAngVel * radius; var result = document.getElementById("gravAccelResult"); result.value = "" + gravityAccel; return false; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!--SECTION--> <section id="main-section"> <div class="dark-overlay"> <div class="team-inner"> <div class="container"> <div class="row"> <div class="col-6"> <form class="" name="calcGravAcceleration"> <div class="form-group b"> <label for="inputAngVelocity1">Angular Velocity</label> <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)"> </div> <div class="form-group"> <label for="inputRadius1">Radius</label> <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle"> </div> <div class="form-group"> <label>Gravitational Acceleration</label> <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly> </div> <button onclick="return calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button> </form> </div> <div class="col-6"> </div> </div> </div> </div> </div> </section>