I am currently working on a basic webpage that includes a question and a set of radio buttons. Depending on the option selected by the user, the question will be hidden and either a correct or incorrect message will be displayed, both of which are initially hidden.
The functionality is achieved using JQuery on the form submission event. The idea is to hide the question, determine which radio button was selected, and then display the corresponding message using the .show() method. However, the issue I am facing is that everything is hidden correctly, but the messages are not being displayed. I have tried debugging by changing the order of actions and found that it actually hides the elements again upon form submission. Any suggestions on what might be causing this behavior?
Below is the code snippet:
$(document).ready(function(){
$('#passed').hide();
$('#allGo').hide();
$("#onlyPhilip").hide();
$("#nobodyGoes").hide();
$("#carBoatForm").submit(function(e){
e.preventDefault();
$("#question").hide();
if($('#withoutMark').is(':checked')){
$('#passed').show();
} else if($('#theyAllGo').is(':checked')){
$('allGo').show();
} else if ($('#onlyPhilipGoes').is(':checked')) {
$('#onlyPhilip').show();
} else if ($('#nobodyCanGo').is(':checked')) {
$('#nobodyGoes').show();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="question">
<div class="col-md-8 col-md-offset-3">
<h2 class="challengeTitle">Challenge 2</h2>
<h3 class="challengeHeading">The Big IF!</h3>
<p class="challengeText">Philip and Susan are taking a trip by boat. The boat's rules are that a car's total weight must be below 2066kg.
<br>Philip's car weighs 1865kg
<br>Philip weighs 75kg
<br>Susan weighs 50kg
<br>Then their friend Mark asks if he can come along. Mark weighs 67kg.</p>
<p class="challengeText">Which of the following statements are true?</p>
<form id="carBoatForm">
<input type="radio" name="boatAnswer" id="theyAllGo"> They can all go on the trip <br>
<input type="radio" name="boatAnswer" id="onlyPhilipGoes"> Only Philip can go on the trip <br>
<input type="radio" name="boatAnswer" id="withoutMark"> Philip and Susan can go, but Mark cannot <br>
<input type="radio" name="boatAnswer" id="nobodyCanGo"> Nobody can go <br>
<input type="submit" value="Enter">
</form>
</div><!--End Content Section -->
<div class="row">
<div class="col-md-8 col-md-offset-4">
<div id="passed">
<h2>Good Job!</h2>
<h3>Philip and Susan can go on the trip, but sadly Mark would put the total weight over by 1kg, so he cannot come along.</h3>
<button type="button" class="btn btn-primary"> Continue </button>
</div>
<div id="onlyPhilip">
<h2> Close but nope!</h2>
<h3>Although it is true that Philip could go on his own, the trip isn't restricted to only Philip being able to go.</h3>
<button type="button" class="btn btn-primary"> Try Again </button>
</div>
<div id="allGo">
<h2> Sorry this is wrong!</h2>
<h3>Try again focusing on the weights. Can they all definitely go on? Remember the boat checks the total weight of a car.</h3>
<button type="button" class="btn btn-primary"> Try Again </button>
</div>
<div id="nobodyGoes">
<h2> Incorrect!</h2>
<h3>Sure nobody has to go on the trip, but where's the fun in that! Try again, this time maybe let some people have fun.</h3>
<button type="button" class="btn btn-primary"> Try Again </button>
</div>
</div>
</div><!--End Section -->