OnSubmit function 不适用于输入类型=“提交”

Question

我正在使用 django 制作一个测验应用程序，这是我第一次使用 django 工作 其他一切工作正常，而不是每当我按下按钮提交答案时，页面就会重新加载。

这是我的 html 代码：

<section>
    <div id = "results"></div>
        <form name = "quizForm" onsubmit = "return submitAnswers(answers = [{% for q in questions%}'{{ q.answer }}',{% endfor %}])">
                {% for q in questions %}
                    <h3> {{ q.id }}.  {{ q.question }}</h3>
                    ..........
                {% endfor %}
                <input type = "submit" value = "Submit Answer">
            </form>
            <br><br>
        </section>

这是与按钮相关的js代码：

function submitAnswers(answers) {

    var total = answers.length;
    var score = 0;
    var choice = []

    //dynamic method to get selected option
    for (var i = 1; i <= total; i++) {
        choice[i] = document.forms["quizForm"]["q" + i].value;
    }

    //dynamic method 1 for checking answer
    for (i = 1; i <= total; i++) {
        if (choice[i] == answers[i - 1]) {
            score++;
        }
    }

    //Display Result
    var results = document.getElementById('results');
    results.innerHTML = "<h3>You scored <span>" + score + "</span> out of <span>" + total + "</span></h3>"
    alert("You scored " + score + " out of " + total);

    return false;
}

根据这个脚本，每当我按下提交按钮时，我必须看到一个警报，但页面只是重新加载而不显示任何警报消息。 我是使用 django 应用程序的新手，如果我缺少某些东西，请指导。 谢谢你！

Answer 1

{{ q.id }} 是什么。 {{ 问题 }}？ 我相信这是一个语法错误

Answer 2

我认为您需要删除表单上的操作，因为表单需要将其提交回服务器。 并将事件添加到输入。 还缺少一个div。 我不知道预处理是做什么的，所以我只是复制它。 就像是

<section>
    <div id = "results"></div>
        <form name = "quizForm">
                {% for q in questions %}
                    <h3> {{ q.id }}.  {{ q.question }}</h3>
                    ..........
                {% endfor %}
                <input type = "button" value = "Submit Answer"
                 oninput = "return submitAnswers(answers = [{% for q in questions%}'{{ q.answer }}',{% endfor %}])">
        </form>
        <br><br>
   </div>
</section>
...

Answer 3

如果你正在设置

<input type='submit'>

它将提交表单并重新加载页面，您应该将其设置为

<input type='button'>

并处理 ajax 呼叫。