我可以在没有表格的情况下显示用户选择

Question

Is there a PHP or jQuery alternative to using forms for recording choices made by users?

Let me give you some background...

I want to create some tests and quizzes for my website, combining PHP, JQuery, Bootstrap, etc. I'm an intermediate PHP coder and have just recently begun learning about jQuery and Boostrap, so I don't really know enough to see the big picture yet.

Anyway, I found a simple PHP-based quiz tutorial, then modified it so that the questions and answers are stored in a database table. I've also added one jQuery function - styles that can be toggled - though it has a few bugs. Eventually, I'd like to modify it somehow so that it stores data - so users can find their previous scores, for example.

I modified the code so that, when a user clicks the submit button, instead of forwarding the user to a new page, the user stays on the same page. (The idea is that the user can select a series of answers, and when the user clicks the submit button, CSS is used to highlight the correct and incorrect answers.) The problem is that when you refresh the page you get a "Confirm Form Resubmission" message.

Another problem is that I can either 1) submit the user's answers with an INPUT function or 2) toggle styles with a BUTTON. I need to figure out how to do both functions with one or the other (when a user clicks "Submit," the page displays new styles, along with the user's score).

So before I begin working on these problems (and a few others), I want to make sure I'm going in the right direction. Should I get to work on these problem, or should I simply scrap the form, replacing it with some PHP or jQuery alternative? If there is such an alternative, what's it called, so I can research it?

I've been reading about some jQuery functions, but I haven't found the magic bullet yet.

I posted my code below, so you can get some idea of where I'm at.

<form action="" method="post" id="quiz">

$stmt = $pdo->prepare("SELECT Q.QID, Q.URL, Q.Value, Q.Question, Q.Answer, Q.Correct
FROM 1_quiz Q
ORDER BY Q.N
");
 $stmt->execute(array(
 'MyURL'=>$MyURL
));

$Q1 = null;

echo '<div class=\"OuterWrapper\">';

while ($row = $stmt->fetch()) {
 $QID = $row['QID'];
 $URL = $row['URL'];
 $Value = $row['Value'];
 $Question = $row['Question'];
 $Answer = $row['Answer'];
 $Correct = $row['Correct'];
 $Correct = str_replace('1', 'correct', $Correct);
 $Correct = str_replace('2', 'wrong', $Correct);

$Q2 = '
<div class="Question"><b>'.$Question.'</b></div>';

if ($row["Question"] != $Q1) {
$Q1 = $row["Question"];
echo "</div>
<div class=\"OuterWrapper\">{$Q2}
";
}

echo '  <div class="Answer '.$Correct.'"><input type="radio" name="'.$QID.'" id="quiz"  value="'.$Value.'" /> '.$Answer.'</div>' . "
";
}
echo '</div>
';

<script>
$(document).ready(function(){
$("input#quiz").click(function(){
$(".Answer").toggleClass("Submit");
});
});
</script>

<input type="submit" value="Submit Quiz" id="quiz" style="">
</form>
<button type="submit" value="Submit Quiz" id="quiz" style="">Button</button>
        $answer1 = $_POST['1'];
        $answer2 = $_POST['2'];
        $answer3 = $_POST['3'];

        $totalCorrect = 0;

        if ($answer1 == "A") { $totalCorrect++; }
        if ($answer2 == "C") { $totalCorrect++; }
        if ($answer3 == "C") { $totalCorrect++; }

        echo "<div id='results'>$totalCorrect / 3 correct</div>";