提交 javascript 表单时如何防止我的页面刷新

Question

我有一个似乎无法解决的问题。我正在创建一个性格测试，当我提交表单时，暂时在 "answer box" 中它会显示代码，但随后会快速刷新页面并清除所有数据。我想知道问题是否与我的 javascript 函数有关 "tabulateanswers" 正在中断，但我看不出是什么导致了它。我之前在 javascript 中添加了一个弹出框以尝试强制停止刷新，我可以看到结果是否正在显示，但经过一些调整后，我也无法再显示此框。如果有人可以看看我的 javascript 并为我指出正确的方向/告诉我哪里出错了？很抱歉，如果这个问题得到了回答，我无法找到它。

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!";
}

Answer 1

只需使用jQuery:

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

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

Answer 2

如果您在提交时调用 tabulateAnswers，您将能够 return false; 在它的末尾防止这种行为

由于您使用的是 onclick，因此您还希望 prevent the default 操作不会像这样发生：

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

另一种选择是使用不会触发表单提交的 button 输入类型。

提交 javascript 表单时如何防止我的页面刷新

How to prevent my page from refreshing when submitting javascript form

html

javascript

css

popupwindow