Question

我正在尝试提交表单，而不是在当前隐藏的新div中显示表单的响应，但是，每次我点击“提交”时，它都会进入错误页面。当我在提交按钮内使用onclick时，它可以工作。但是，我希望它在提交表单之前检查用户是否已回答所有问题。

这是我的html，仅用于以下形式：

<footer class="major container medium">
<div id="hideSignUp">
                <h3>Signup Today!</h3>
                <p>Simply enter your email and answer a few quick questions.<br>As an added BONUS, you'll receive an opportunity for a Free bottle of Grass-Fed, Low Carb Protein!</p>
                <button onclick="buildQuiz()" class="button">GET MY EBOOK NOW</button>
            </div>
                <div id="showQuiz" style="display:none"> 
                        <form method="POST" id="quiz" onsubmit="return results();">
                            <select name="gender" id="gender" required>
                                <option value="">GENDER:</option> 
                                <option value="male">MALE</option>
                                <option value="female">FEMALE</option>
                            </select>
                            <br>
                            <select name="age" id="age" required>
                                <option value="">AGE</option>
                                <option value="18-24">18-24</option>
                                <option value="25-34">25-34</option>
                                <option value="35-44">35-44</option>
                                <option value="45-54">45-54</option>
                                <option value="55-64">55-64</option>
                                <option value="65orolder">65 or older</option>
                            </select>
                            <br>
                            <select name="fitnessgoal" id="goal" required>
                                <option value="">WHAT IS YOUR FITNESS GOAL?</option>
                                <option value="loseW">LOSE WEIGHT</option>
                                <option value="buildM">BUILD MUSCLE</option>
                                <option value="betterH">BETTER OVERALL HEALTH</option>
                                <option value="trainE">TRAIN FOR AN EVENT</option>
                            </select>
                            <br>
                            <select name="vitamin" id="vitamin" required>
                                <option value="">DO YOU USE ANY VITAMINS OR SUPPLEMENTS?</option>
                                <option value="yes">YES</option>
                                <option value="no">NO</option>
                            </select>
                            <br>
                            <select name="meal" id="meal" required > 
                                    <option value="">WHAT KIND OF MEALS ARE YOU MOST INTERESTED IN?</option>
                                    <option value="keto">KETO</option>
                                    <option value="paleo">PALEO</option>
                                    <option value="both">KETO + PALEO</option>
                                    <option value="vegan">VEGAN</option>
                            </select>
                            <br>PLEASE ENTER YOUR EMAIL:<br>
                            <input type="email" name="email" id="email" required><br>
                            <input type="submit" value="Submit">
                        </form>
                        <div id="results" style="display:none">
                            GENDER: <p id="genderResult"></p>
                            AGE: <div id="ageResult"></div><br>
                            FITNESS GOAL: <div id="goalResult"></div><br>
                            VITAMINS/SUPPLEMENTS: <div id="vitaminsResult"></div><br>
                            MEAL PREFERENCE: <div id="mealResult"></div><br>
                            EMAIL: <div id="emailResult"></div>
                        </div>
                    </div>
            </footer>

这是我的JavaScript

var button = document.querySelector("button");

function buildQuiz(){
var signUpBtn = document.getElementById("hideSignUp")
var quiz = document.getElementById("showQuiz")
if(signUpBtn.style.display === "block" && quiz.style.display === "none"){
    signUpBtn.style.display = "none";
    quiz.style.display = "block";
} else{
    signUpBtn.style.display = "block";
    quiz.style.display = "none";
}


}
 function genderResultsFunc(){
var gender = document.getElementById("gender");
var genderResult = gender.options[gender.selectedIndex].text;
document.getElementById("genderResult").innerHTML = genderResult;
}

function results(){
var quizResults = document.getElementById("results");
if(quizResults.style.display === "none"){
    quizResults.style.display = "block";
    quiz.style.display = "none";
    genderResultsFunc();
}else {
    quizResults.style.display = "none";
    quiz.style.display = "block";
}
}

button.addEventListener("click", buildQuiz);
document.getElementById('quizResults').addEventListener('click', results);

Answer 1

您的提交处理程序不返回任何内容

function results() {
  var quizResults = document.getElementById("results");
  if (quizResults.style.display === "none") {
    quizResults.style.display = "block";
    quiz.style.display = "none";
    genderResultsFunc();
    return true;
  } else {
    quizResults.style.display = "none";
    quiz.style.display = "block";
    return false;
  }
}

提交表单按钮，提示错误“此页面正在运行”！

1 个答案: