Simple jQuery wizard form

Question

Simple jQuery wizard form

I'm trying to manage a quiz test in jquery and html that load automatically in the same page, but I'm having problems with div Q2, loading it every time with the same question. How can I manage this script to work just fine, I try pretty much everything on my mind but still can't seem to do it.

Here is the jquery code:

$(document).ready(function(){
 $("#q2").fadeOut("fast");
 $("#q3").fadeOut("fast");
 $("#q4").fadeOut("fast");

document.getElementById('q1').addEventListener('click', function() {
  $("#q1").fadeOut();
  $("#q2").fadeIn();
 }, false); 

document.getElementById('q2').addEventListener('click', function() {
  $("#q2").fadeOut();
  $("#q3").fadeIn();
 }, false); 

document.getElementById('q3').addEventListener('click', function() {
  $("#q3").fadeOut();
  $("#q4").fadeIn();
 }, false); 

});

HTML:

<div id="q1">               
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
   <label for="radio1" class="css-label">answer1</label>
 </div>
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio2" class="css-checkbox" />
   <label for="radio2" class="css-label">answer2</label>
  </div>
</div>

<div id="q2">               
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio3" class="css-checkbox" />
   <label for="radio3" class="css-label">answer3</label>
 </div>
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio4" class="css-checkbox" />
   <label for="radio4" class="css-label">answer4</label>
  </div>
</div>

<div id="q3">               
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio5" class="css-checkbox" />
   <label for="radio5" class="css-label">answer5</label>
 </div>
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio6" class="css-checkbox" />
   <label for="radio6" class="css-label">answer6</label>
  </div>
</div>

<div id="q4">               
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio7" class="css-checkbox" />
   <label for="radio7" class="css-label">answer7</label>
 </div>
 <div class="radio">
   <input type="radio" name="radiog_dark" id="radio8" class="css-checkbox" />
   <label for="radio8" class="css-label">answer8</label>
  </div>
</div>

I know this is not the best way to do it, but I have no idea how to manage it properly. I am still attending, and if you know how to do this, I would appreciate your help.

+3

javascript jquery html

Ivan Zg May 02 '15 at 13:08

source to share

1 answer

Björn · Accepted Answer · 2015-05-02T13:51:58+0000

A couple of problems I see with the way you are trying to do this:

All of your radio inputs have the same attribute name

. The grouping of radio signals is determined by their name, so you need a unique name for each set of radio receivers related to the question.
Your code is really hard. As questions are added or removed, the javascript code needs to change.

I would rewrite it something like this:

First add a class to each of your question divs, that is question

::

<div id="q1" class="question">

Regarding your javascript code:

// this variable will hold a list of all questions in the page (identified by the class 'question')
var $questions = $(".question");

// all questions start out hidden
$questions.hide();

// show the first question
$questions.first().fadeIn("fast");

// when a radio input is changed
$("input[type='radio']").on("change", function() {
    // remove the first question from the questions list and hide it
    var question = $questions.splice(0, 1);
    $(question).hide();

    // show the (now new) first question (if there are any left)
    $questions.first().length && $questions.first().fadeIn("fast"); 
});

var $questions = $(".question");

// hide all questions
$questions.hide();

// show the first question
$questions.first().fadeIn("fast");

$("input[type='radio']").on("change", function() {
  // remove the first question from the questions list and hide it
  var question = $questions.splice(0, 1);
  $(question).hide();

  // show the (now new) first question in our list (if there are any left)
  $questions.first().length && $questions.first().fadeIn("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q1" class="question">
  <div class="radio">
    <input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
    <label for="radio1" class="css-label">answer1</label>
  </div>
  <div class="radio">
    <input type="radio" name="radiog_dark" id="radio2" class="css-checkbox" />
    <label for="radio2" class="css-label">answer2</label>
  </div>
</div>

<div id="q2" class="question">
  <div class="radio">
    <input type="radio" name="radiog_dark2" id="radio3" class="css-checkbox" />
    <label for="radio3" class="css-label">answer3</label>
  </div>
  <div class="radio">
    <input type="radio" name="radiog_dark2" id="radio4" class="css-checkbox" />
    <label for="radio4" class="css-label">answer4</label>
  </div>
</div>

<div id="q3" class="question">
  <div class="radio">
    <input type="radio" name="radiog_dark3" id="radio5" class="css-checkbox" />
    <label for="radio5" class="css-label">answer5</label>
  </div>
  <div class="radio">
    <input type="radio" name="radiog_dark3" id="radio6" class="css-checkbox" />
    <label for="radio6" class="css-label">answer6</label>
  </div>
</div>

<div id="q4" class="question">
  <div class="radio">
    <input type="radio" name="radiog_dark4" id="radio7" class="css-checkbox" />
    <label for="radio7" class="css-label">answer7</label>
  </div>
  <div class="radio">
    <input type="radio" name="radiog_dark4" id="radio8" class="css-checkbox" />
    <label for="radio8" class="css-label">answer8</label>
  </div>
</div>

Run code Hide result

Simple jQuery wizard form

More articles: