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

【问题标题】：How to prevent my page from refreshing when submitting javascript form提交javascript表单时如何防止我的页面刷新
【发布时间】：2020-05-26 21:57:43
【问题描述】：

我有一个似乎无法解决的问题。我正在创建一个性格测试，当我提交表单时，暂时在“答案框”中会显示代码，但随后会快速刷新页面并清除所有数据。我想知道问题是否与我的 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!";
}

【问题讨论】：

您是否尝试将按钮类型更改为button？
Java 是一种完全独立的语言，你所拥有的是 JavaScript。关于您的问题，单击表单内的按钮将提交它。由于您的表单没有action 属性，因此该页面基本上会重新加载。由于您实际上并没有真正使用任何表单功能，因此您只需删除 <form> 标记即可解决此问题。
这能回答你的问题吗？ JavaScript code to stop form submission
这能回答你的问题吗？ JavaScript Prevent Form Submit

标签： javascript html css popupwindow

【解决方案1】：

如果您在提交时调用了tabulateAnswers，则可以在其末尾调用return false; 并防止这种行为

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

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

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

【讨论】：

谢谢，尽管我选择了按钮选项，但您的建议奏效了。我将不得不学习如何使用其他选项

【解决方案2】：

只需使用 jQuery：

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

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

【讨论】：

jQuery 不是必须的；你可以用 vanilla JS 做同样的事情。
是的，我只是喜欢用 jQuery 做事，因为它更简单。