Switching back and forth between JQuery and CSS display changes

Question

Switching back and forth between JQuery and CSS display changes

My challenge involves utilizing a JQuery file to present one question at a time in a quiz format. Upon clicking the submit button, the intention is to progress to the subsequent question. However, I have encountered an issue where the transition occurs momentarily upon button press before reverting back to the initial question.

The code snippet I am working with is outlined below:

$(document).ready(function() {
"use strict";
// jQuery logic for each question
$('button#FlexibilityNext01').click(function() {
$('#FlexibilityQ01').css({'display':'none'});
$('#FlexibilityQ02').css({'display':'block'});
});

// Similar logic for Questions 02 through 09

// Handling final question and retake option
$('button#FlexibilityFinishQuiz').click(function() {
$('#FlexibilityQ10').css({'display':'none'});
$('#RetakeQuiz').css({'display':'block'});
});

$('#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" -->

<!-- HTML markup for questions 02-10 follows similar structure -->

I have attempted various display manipulation methods such as hiding/showing elements and changing CSS properties using both `$('#id')` and `$("#id")`, but all seem to manifest the same issue.

jquery html css

Answer 1

Answer №1

When you use submit buttons, you are instructing the page to send the form when the button is clicked. If no action is specified for the form, it will default to the current page. So, each time a submit button is clicked, the click event is triggered, and your bound handler executes, revealing the next question. However, it then submits the form to itself, causing the page to reload. The reloaded page does not retain the previous state before the form was submitted, so it displays the initial state (the first question) again.

From the code provided, there seems to be no need for the buttons to be of type submit. Unless there is a reason not shown in this code, you can simply change them to type="button", which will solve the issue. This change would also allow you to remove all the <form> elements.

Answer 2

When you use submit buttons, you are instructing the page to send the form when the button is clicked. If no action is specified for the form, it will default to the current page. So, each time a submit button is clicked, the click event is triggered, and your bound handler executes, revealing the next question. However, it then submits the form to itself, causing the page to reload. The reloaded page does not retain the previous state before the form was submitted, so it displays the initial state (the first question) again.

From the code provided, there seems to be no need for the buttons to be of type submit. Unless there is a reason not shown in this code, you can simply change them to type="button", which will solve the issue. This change would also allow you to remove all the <form> elements.

Answer 3

Answer №2

If you have all the questions visible on your page and want to show/hide them, it would be more efficient to use links like <a href="#" class="next"> instead of forms/buttons for navigation. You can simply have two links - one for moving to the next question and another for going back to the previous one, while keeping track of the current position in a variable. Check out an example like this.

In any case, a quick solution here is to prevent form submission using $.preventDefault().

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

Answer 4

If you have all the questions visible on your page and want to show/hide them, it would be more efficient to use links like <a href="#" class="next"> instead of forms/buttons for navigation. You can simply have two links - one for moving to the next question and another for going back to the previous one, while keeping track of the current position in a variable. Check out an example like this.

In any case, a quick solution here is to prevent form submission using $.preventDefault().

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

Answer 5

Answer №3

Considering your mention of needing to send this view to the server, I will provide an answer that covers that aspect as well. It would have been helpful if you had included this in your original question.

It is important to have a good understanding of how event handlers function in both JavaScript and jQuery. Different elements trigger various events apart from just click, so it is crucial to understand the default behavior of different types of elements in the browser. For instance, the default action of a "submit" button is to POST the form back to the page, but it can easily be disabled.

I've optimized your code to make it more concise yet still effective - a bit more complex, but easier to maintain overall :)

$(document).ready(function() {

  var currentQuestion = 1

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


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

    // Trigger the next function when 'submit' button is clicked
    // You could enhance readability by adding classes to the buttons.
    question.find('button[type="submit"]').on('click', next);

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

    function next() {
      // Increase the question counter by 1. Note that the current question
      // variable is *outside* of this `closure`. Look up that term for more information.
      currentQuestion++

      // If the counter exceeds the total number of questions we have,
      // set it back to 10
      if (currentQuestion > 10) {
        currentQuestion = 10
      }

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

    // Similar to next but in reverse direction.
    function prev() {
      currentQuestion--
      if (currentQuestion < 1) {
        currentQuestion = 1
      }
      updateQuestions()
    }

  })

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

      // Extract and convert '01' into a numeric value.
      var num = parseInt(id.replace('FlexibilityQ', ''), 10)
      if (num === currentQuestion) {
        question.show()
      } else {
        question.hide()
      }

      // Special logic for handling the finish stage
      // if (num === 10) { doSomethingSpecial() }
    })
  }

})

Answer 6

Considering your mention of needing to send this view to the server, I will provide an answer that covers that aspect as well. It would have been helpful if you had included this in your original question.

It is important to have a good understanding of how event handlers function in both JavaScript and jQuery. Different elements trigger various events apart from just click, so it is crucial to understand the default behavior of different types of elements in the browser. For instance, the default action of a "submit" button is to POST the form back to the page, but it can easily be disabled.

I've optimized your code to make it more concise yet still effective - a bit more complex, but easier to maintain overall :)

$(document).ready(function() {

  var currentQuestion = 1

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


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

    // Trigger the next function when 'submit' button is clicked
    // You could enhance readability by adding classes to the buttons.
    question.find('button[type="submit"]').on('click', next);

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

    function next() {
      // Increase the question counter by 1. Note that the current question
      // variable is *outside* of this `closure`. Look up that term for more information.
      currentQuestion++

      // If the counter exceeds the total number of questions we have,
      // set it back to 10
      if (currentQuestion > 10) {
        currentQuestion = 10
      }

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

    // Similar to next but in reverse direction.
    function prev() {
      currentQuestion--
      if (currentQuestion < 1) {
        currentQuestion = 1
      }
      updateQuestions()
    }

  })

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

      // Extract and convert '01' into a numeric value.
      var num = parseInt(id.replace('FlexibilityQ', ''), 10)
      if (num === currentQuestion) {
        question.show()
      } else {
        question.hide()
      }

      // Special logic for handling the finish stage
      // if (num === 10) { doSomethingSpecial() }
    })
  }

})

Switching back and forth between JQuery and CSS display changes

Answer №1

Answer №2

Answer №3

Similar questions

PHP-powered webcasting platform

Issues with Firefox's flexbox functionality are preventing it from working

Can we find a method to incorporate multicolored borders?

The Vue2 @click event does not function properly when using v-html within a different component

The use of non-breaking space symbol ( ) does not function properly in Weblogic 14

How can I insert mock data into a datatable using Django?

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Execute code after selecting the link

Tips for dynamically changing the content of a child div element after a successful ajax call using PHP

Struggling with establishing a connection between Jquery and a .php file

Query: How can I retrieve the value of a td element in a dynamic table?

What are the various ways to send data using Ajax to multiple elements?

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

Using Javascript to dynamically enable or disable an input field depending on the choice made in another field

Having trouble compiling your Vue project and running into the "No mixed spaces and tabs" error?

What is the best way to rearrange the elements in a database after they have been displayed?

Transfer files and data efficiently using Ajax

Issue with the div elements not aligning next to each other

"Utilizing node.js to create a custom regular expression for removing anchor tags

Displaying dynamic data in a Bootstrap modal using Laravel