0
我想用PHP和Javascript创建一个测验。为什么preventDefault函数不能始终工作？
用户点击答案后，ajax请求开始，并在响应中给出结果。如果确实如此，则点击按钮将获得“成功”类，如果为假，则为“错误”类。
之后，按钮被禁用，用户可以点击下一个问题。 但问题是，在一两个问题后，javascript函数不起作用，并且正在调用窗体的默认操作。
$(document).ready(function(){
\t // Get the form.
\t var form = $('#bilderquiz');
\t // Set up an event listener for the contact form.
\t $(form).submit(function(e) {
\t \t // Stop the browser from submitting the form.
\t \t
\t \t // Serialize the form data.
\t \t var formData = $(form).serialize();
\t \t // Submit the form using AJAX.
\t \t e.preventDefault();
\t \t $.ajax({
\t \t \t type: 'POST',
\t \t \t url: $(form).attr('action'),
\t \t \t data: formData
\t \t \t , async: false
\t \t })
\t \t .done(function(response) {
\t \t \t
\t \t \t var submittedAnswer = $("input[type=submit][clicked=true]");
\t \t \t var allAnswers = document.querySelectorAll(".answerButton");
\t \t \t
\t \t \t alert(response);
\t \t \t
\t \t \t if(response == 'trueAnswer'){
\t \t \t \t submittedAnswer.removeClass('wrongAnswer');
\t \t \t \t submittedAnswer.addClass('trueAnswer');
\t \t \t \t $(".answerButton").attr('disabled', true);
\t \t \t } else{
\t \t \t \t submittedAnswer.removeClass('trueAnswer');
\t \t \t \t submittedAnswer.addClass('wrongAnswer');
\t \t \t \t $(".answerButton").attr('disabled', true);
\t \t \t }
\t \t })
\t \t .fail(function(data) {
\t \t \t // Set the message text.
\t \t \t if (data.responseText !== '') {
\t \t \t \t $(formMessages).text(data.responseText);
\t \t \t } else {
\t \t \t \t $(formMessages).text('Oops! An error occured and your message could not be sent.');
\t \t \t }
\t \t });
\t });
\t
});
function setClicked(input){
\t $(input).parents("form").removeAttr("clicked");
\t $(input).attr("clicked", "true");
}<div class="answerChar">A</div>
<form id="bilderquiz" action="includes/functions.php" method="post">
<button class="answerButton" type="submit" id="selection" name="selection" value="0" onclick="setClicked(this)">
<?php echo $questionData['answerButtons'][0] ;?>
</button>
</form>
</div>
<div class="col-sm-6">
<div class="answerChar">B</div>
<form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<button class="answerButton" type="submit" id="selection" name="selection" value="1" onclick="setClicked(this)">
<?php echo $questionData['answerButtons'][1];?>
</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="answerChar">C</div>
<form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<button class="answerButton" type="submit" id="selection" name="selection" value="2" onclick="setClicked(this)">
<?php echo $questionData['answerButtons'][2];?>
</button>
</form>
</div>
<div class="col-sm-6">
<div class="answerChar">D</div>
<form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<button class="answerButton" type="submit" id="selection" name="selection" value="3" onclick="setClicked(this)">
<?php echo $questionData['answerButtons'][3];?>
</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<button class="submitButton" type="submit" id="selection" name="selection" value="4" onclick="setClicked(this)">Nächste Frage</button>
</form>
</div>
</div>我的第二个问题是，这一行也不起作用：
submittedAnswer.removeClass('wrongAnswer');
submittedAnswer.addClass('trueAnswer');