How to prevent my page from refreshing when submitting javascript form

Question

I have an issue that I cant seem to resolve. Im creating a personality test and when I submit the form , temporarily in the "answer box" it will display the code but then quickly refresh the page and clear all the data. Im wondering if the issue is with my javascript function "tabulateanswers" is breaking but I cant see what would be causing it. I previously added a pop up box to the javascript to attempt to force stop the refresh and I could see if the results were being displayed but after a bit of tweaking I can no longer get this box to display either. If anyone can take a look at my javascript and point me in the right direction / tell me where Im going wrong? Apologies if this has been answered I could not locate it searching.

HTML:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Personality test</title>
  <meta name="description" content="Personality test">
  <meta name="author" content="RD">

  <link rel="stylesheet" href="test.css">

</head>

<header>
 <h1>An online personality test based on the AAA </h1>
</header>
</br>

<body>

  <script src="test.js"></script>

<div id="wrapper">



  <form id="quiz">
    <!-- Question 1 -->
    <h2>I prefer to do things with others rather than on my own.</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label><input type="radio" name="q1" value="c1">
      1 - Definitely Agree
    </label><br />
    <label><input type="radio" name="q1" value="c2">
      2 - Slightly Agree
    </label><br />
    <label><input type="radio" name="q1" value="c3">
      3 - Slightly Disagree
    </label><br />
    <label><input type="radio" name="q1" value="c4">
      4 - Definitely Disagree
    </label><br />

<hr>
<!-- Question 47 -->
    <h2>I enjoy meeting new people.</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label><input type="radio" name="q46" value="c1">
      1 - Definitely Agree
    </label><br />
    <label><input type="radio" name="q46" value="c2">
      2 - Slightly Agree
    </label><br />
    <label><input type="radio" name="q46" value="c3">
      3 - Slightly Disagree
    </label><br />
    <label><input type="radio" name="q46" value="c4">
      4 - Definitely Disagree
    </label><br />

<hr>    <!-- Question 48 -->
    <h2>I am a good diplomat.</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label><input type="radio" name="q47" value="c1">
      1 - Definitely Agree
    </label><br />
    <label><input type="radio" name="q47" value="c2">
      2 - Slightly Agree
    </label><br />
    <label><input type="radio" name="q47" value="c3">
      3 - Slightly Disagree
    </label><br />
    <label><input type="radio" name="q47" value="c4">
      4 - Definitely Disagree
    </label><br />

<hr>    <!-- Question 49 -->
    <h2>I am not very good at remembering people's date of birth.</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label><input type="radio" name="q48" value="c1">
      1 - Definitely Agree
    </label><br />
    <label><input type="radio" name="q48" value="c2">
      2 - Slightly Agree
    </label><br />
    <label><input type="radio" name="q48" value="c3">
      3 - Slightly Disagree
    </label><br />
    <label><input type="radio" name="q48" value="c4">
      4 - Definitely Disagree
    </label><br />


<hr>    <!-- Question 50 -->
    <h2>I find it very easy to play games with children that involve pretending.</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label><input type="radio" name="q49" value="c1">
      1 - Definitely Agree
    </label><br />
    <label><input type="radio" name="q49" value="c2">
      2 - Slightly Agree
    </label><br />
    <label><input type="radio" name="q49" value="c3">
      3 - Slightly Disagree
    </label><br />
    <label><input type="radio" name="q49" value="c4">
      4 - Definitely Disagree
    </label><br />
    <hr>


    </br>



    <button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>

  </form>


  </br>

  <div id="answer">Your result will show up here!</div>


</body>

</html>

Javascript:

// function to calculate the result of the survey
function tabulateAnswers() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;


  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i=0; i<choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 2;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 3;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 4;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.

  var answer = c1score + c2score + c3score + c4score ;
  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer');

  answerbox.innerHTML = fullanswer;


alert("I am an alert box!");

}

// program the reset button

function resetAnswer() {
  var answerbox = document.getElementById('answer');
  answerbox.innerHTML = "Your result will show up here!";
}

Java is a completely separate language, what you have there is JavaScript. Regarding your issue, clicking a button inside a form will submit it. Since your form doesn't have an `action` attribute, the page will essentially reload. Since you're not really using any form feature anyway, you can simply remove the `
` tag to fix this. — , May 26 '20 at 22:03
Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — , May 26 '20 at 22:06
Does this answer your question? [JavaScript Prevent Form Submit](https://stackoverflow.com/questions/22437249/javascript-prevent-form-submit) — Reg Edit, May 26 '20 at 22:07

score 0 · Accepted Answer · answered May 26 '20 at 22:09

0

If you called tabulateAnswers onsubmit, you'd be able to return false; at the end of it and prevent this behaviour

Since you're using onclick, you'll also want to prevent the default action from happening like so:

function tabulateAnswers(_event) {
    ...
    _event.preventDefault();
    return false;
}

Another option is to use the button input type instead that doesn't trigger a form submission.

answered May 26 '20 at 22:09

Oleg

24,465
8
61
91

Thank you, your advice worked though i went with the button option. i will have to learn how to work with the other option – Ryan Donohue May 27 '20 at 13:41

score -2 · Answer 2 · answered May 26 '20 at 22:01

-2

Just use jQuery:

<form id="form">
  <input type="submit" value="Submit" />
</form>

<script>
$("#form").submit(e => {
  e.preventDefault();
  // Handle form
});
</script>

answered May 26 '20 at 22:01

Puk

319
1
11

1

jQuery isn't necessary to do this; you can do the same thing with vanilla JS. – May 26 '20 at 22:05
That's true, I just like to do things with jQuery as it makes it just simpler. – Puk May 26 '20 at 22:25

How to prevent my page from refreshing when submitting javascript form

2 Answers2