JQuery CSS Display Change Switches Back

Question

I have a JQuery file to display only one question of a quiz. When you click the submit button it should advance to the next question, which it does, but only for a split second when the button is pressed, after which it switches back to the first question.

My code is as follows:

$(document).ready(function() {
	"use strict";
// Question 01
	$('button#FlexibilityNext01').click(function() {
		$('#FlexibilityQ01').css({'display':'none'});
		$('#FlexibilityQ02').css({'display':'block'});
	});
	
// Question 02
	$('button#FlexibilityNext02').click(function() {
		$('#FlexibilityQ02').css({'display':'none'});
		$('#FlexibilityQ03').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev02').click(function() {
		$('#FlexibilityQ01').css({'display':'block'});
		$('#FlexibilityQ02').css({'display':'none'});
	});

// Question 03	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ03').css({'display':'none'});
		$('#FlexibilityQ04').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev03').click(function() {
		$('#FlexibilityQ02').css({'display':'block'});
		$('#FlexibilityQ03').css({'display':'none'});
	});
	
// Question 04	
	$('button#FlexibilityNext04').click(function() {
		$('#FlexibilityQ04').css({'display':'none'});
		$('#FlexibilityQ05').css({'display':'block'});
	});
	
	
	$('button#FlexibilityPrev04').click(function() {
		$('#FlexibilityQ03').css({'display':'block'});
		$('#FlexibilityQ04').css({'display':'none'});
	});
	
// Question 05	
	$('button#FlexibilityNext05').click(function() {
		$('#FlexibilityQ05').css({'display':'none'});
		$('#FlexibilityQ06').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev05').click(function() {
		$('#FlexibilityQ04').css({'display':'block'});
		$('#FlexibilityQ05').css({'display':'none'});
	});
	
// Question 06	
	$('button#FlexibilityNext06').click(function() {
		$('#FlexibilityQ06').css({'display':'none'});
		$('#FlexibilityQ07').css({'display':'block'});
	});
	
	$('button#FlexibilityPrev07').click(function() {
		$('#FlexibilityQ06').css({'display':'block'});
		$('#FlexibilityQ07').css({'display':'none'});
	});
	
// Question 07
	$('button#FlexibilityNext07').click(function() {
		$('#FlexibilityQ07').css({'display':'none'});
		$('#FlexibilityQ08').css({'display':'block'});
	});
	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ07').css({'display':'block'});
		$('#FlexibilityQ08').css({'display':'none'});
	});
	
// Question 08	
	$('button#FlexibilityNext08').click(function() {
		$('#FlexibilityQ08').css({'display':'none'});
		$('#FlexibilityQ09').css({'display':'block'});
	});
	

	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ08').css({'display':'block'});
		$('#FlexibilityQ09').css({'display':'none'});
	});
	
// Question 09
	$('button#FlexibilityNext09').click(function() {
		$('#FlexibilityQ09').css({'display':'none'});
		$('#FlexibilityQ10').css({'display':'block'});
	});
	
	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ09').css({'display':'block'});
		$('#FlexibilityQ10').css({'display':'none'});
	});
	
// Question 10
	$('button#FlexibilityFinishQuiz').click(function() {
		$('#FlexibilityQ10').css({'display':'none'});
		$('#RetakeQuiz').css({'display':'block'});
	});

	$('button#FlexibilityNext03').click(function() {
		$('#FlexibilityQ10').css({'display':'block'});
		$('#RetakeQuiz').css({'display':'none'});
	});
	
// RetakeQuiz
	$('#FlexibilityRetakeQuiz').click(function() {
		$('#FlexibilityRetakeQuiz').css({'display':'none'});
		$('#FlexibilityQ01').css({'display':'block'});
	});
	
});

<div class="Question" id="FlexibilityQ01">
      <form id="FlexibilityFormQ01"> 
        <!-- form question here -->
      <button type="submit" id="FlexibilityNext01">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q1" -->


<div class="Hidden Question" id="FlexibilityQ02">
      <form id="FlexibilityFormQ02"> 
      <button type="button" id="FlexibilityPrev02">Previous Question</button>
       <button type="submit" id="FlexibilityNext02">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q2" -->


<div class="Hidden Question" id="FlexibilityQ03">
      <form id="FlexibilityFormQ03"> 
      <button type="button" id="FlexibilityPrev03">Previous Question</button>
       <button type="submit" id="FlexibilityNext03">Next Question</button>
      </form>
</div>  <!-- class="Question" id="Q3" -->


<!-- Questions 4-9 are the same exact format but with changed numbers -->


<div class="Hidden Question" id="FlexibilityQ10">
      <form id="FlexibilityFormQ10"> 
      <button type="button" id="FlexibilityPrev10">Previous Question</button>
    <button type="submit" id="FlexibilityFinishQuiz">Finish Quiz</button>
    </form>
</div>  <!-- class="Question" id="Q10" -->

I also tried using:

$('#id').hide();
$('#id').show();

and

$("#id").css("display", "none");
$("#id").css("display", "block");

but all seem to be having the same problem.

Elezar · Accepted Answer · 2016-01-20 02:08:11Z

3

By using submit buttons, you're telling the page to submit the form when the button is clicked. Since no action is specified for the form, it's going to default to the current page. So, each time one of the submit buttons is clicked, the click event is triggered, and your bound handler is executed, which makes the next question visible. However it then submits the form to itself, which reloads the page. The reloaded page has no clue about the state it was in before the form was submitted, so it shows the initial state (the first question) again.

Based on the code you've posted, there's no reason for the buttons to have a type of submit. So unless there's a reason not included in this code, you can just change them to type="button" and it will fix the problem. That would also allow you to get rid of all the <form> elements.

answered Jan 20, 2016 at 2:08

Elezar

1,5271 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Liz Over a year ago

If I'm also using the submit function to send the data to a MySQL database via PHP is there a way to get around this problem without changing the type from submit to button?

Jon Jaques Over a year ago

Yes, but you would probably need to ajax - or build the view server-side. Formulating answer below...

Elezar Over a year ago

Well, this is where using AJAX would be ideal. It would allow you to make calls to the server to send the data to MySQL, without actually submitting the form. However, if you're unable/unwilling to do that, the alternative would be to send the state of the page (i.e., which question the user is currently on) when you submit the form, have your PHP code write that back out, then have JS read that value to determine which question to show.

Elezar Over a year ago

Note that if you do that, you'll also need to have your PHP code validate the "current state" data that's been submitted, to make sure it's not malicious code that someone is trying to insert into the page (a cross-site scripting attack). Or write it out in a way that ensures any code it includes can't be executed. If the only thing you're sending is the question number, the easiest way to validate it is to make sure it is just a number. Really, AJAX would be much simpler/safer, though.

DACrosby · Accepted Answer · 2016-01-20 02:25:19Z

0

If all of your questions are on the page and you're just showing/hiding them, you'd be better suited using <a href="#" class="next"> type entries instead of forms/buttons for this navigation. Actually just two links total - one for next, one for previous, then store where you currently are in the questionnaire in a variable. Something like this.

Anyways, the quick fix here is to simply prevent the forms from submitting using $.preventDefault().

$('_selector_').click(function(e) {
    e.preventDefault();
    $('_selector_').css({'display':'none'});
    $('_selector_').css({'display':'block'});
});

answered Jan 20, 2016 at 2:25

DACrosby

11.5k3 gold badges42 silver badges52 bronze badges

Comments

Jon Jaques · Accepted Answer · 2016-01-20 02:58:49Z

Since your comment mentions also needing to send this view to the server I will include an answer that addresses that. You should probably have included that in your initial question.

That being said, brush up on your knowledge about how event handlers work in JavaScript and jQuery. Certain elements give off certain events other than click, so you need to be aware of what the browser default is for certain types of elements. In this case, the default action of a "submit" button is to POST the form back to the page. Easy to disable that.

I took the liberty of DRYing up your code.. A little more complex, but less code overall - Easier to maintain :)

$(document).ready(function() {

  var currentQuestion = 1

  // ignore form submits
  $('.Question form').on('submit', function(e) {
    e.preventDefault() 
  })


  // Loop through all the questions
  $('.Question').each(function(i, qEl) {
    var question = $(qEl)

    // When the 'submit' button is clicked, fire our next function
    // You could make these more readable by adding classes to the buttons.
    question.find('button[type="submit"]').on('click', next);

    // Same for previous
    question.find('button[type="button"]').on('click', prev);

    function next() {
      // Add 1 to the question counter. Notice how the current question
      // variable is *outside* of this `closure`. Look that term up.
      currentQuestion++

      // If the counter goes outside how many questions we have
      // reset it to be 10
      if (currentQuestion > 10) {
        currentQuestion = 10
      }

      updateQuestions()
      // Here we could send off the form state, and wait till the 
      // server responds before we show the next question.
      // $.ajax({
      //   type: 'post',
      //   url: location.pathname,
      //   data: question.find('form').serialize()
      // }).then(updateQuestions)
    }

    // Same as next except the opposite.
    function prev() {
      currentQuestion--
      if (currentQuestion < 1) {
        currentQuestion = 1
      }
      updateQuestions()
    }

  })

  // Here we just loop through all the questions, and based on the 
  // currentQuestion variable, we only show the active one.
  function updateQuestions() {
    $('.Question').each(function(i, qEl) {
      var question = $(qEl)
      var id = question.attr('id')

      // Here we strip off the string, and parse '01' into a number.
      var num = parseInt(id.replace('FlexibilityQ', ''), 10)
      if (num === currentQuestion) {
        question.show()
      } else {
        question.hide()
      }

      // If you need to do special logic for the finish
      // you can just say
      // if (num === 10) { doSomethingSpecial() }
    })
  }

})

Also, YMMV with the ajax code above. You may need to adjust the details to your server environment.

Collectives™ on Stack Overflow

JQuery CSS Display Change Switches Back

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related