I have a form questionnaire with 12 divisions. The first div is display block and the others are display none. The div's are then shown and hidden with a tab function on click. The last div is a review of the form which is loaded by an ajax call. The code below is working fine up to the point where I want to add a button so user can go back and answer the unanswered questions
this code is working fine ** $(document).ready(function () { var tab_pool = ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6", "Q7", "Q8", "Q9", "Q10", "Q11", "Q12"]; var visible = $(".tab:visible").attr('class').split(" ")[1]; var curr_ind = $.inArray(visible, tab_pool);
$('.next').click(function () {
$("#processing").show();
$.ajax({
type: "POST",
url: "process.php",
data: $('.data').serialize() + "&data=" + data,
success: function (data, status, xhr) {
if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
$("#processing").hide();
} else {
$("#processing").hide();
alert("Save failed");
return false;
}
}
});
// There are conditions here such as if this then
// curr_ind = curr_ind + whatever to move to next relevant question
if (curr_ind < 11) {
$(".tab:visible").delay(750).hide(0);
$("#processing").delay(750).hide(0);
curr_ind = curr_ind + 1;
$("." + tab_pool[curr_ind]).delay(750).show(0);
$(".finished").delay(750).hide(0);
$(".back").delay(750).show(0);
}
// if the user has reached the end then below we show the review of questionaire
if (curr_ind === 11) {
$("#processing").delay(750).hide(0);
$(".finished").delay(750).show(0);
$.ajax({
type: "POST",
url: 'review.php',
data: "username=" + username,
success: function (data, status, xhr) {
if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
$("#review").show();
$('#review').html(data);
} else {
alert("Review not available");
return false;
}
}
});
}
});
// after the first question a back button is display for
// user to go back to previous question
$('.back').click(function () {
if (curr_ind > 0) {
$(".tab:visible").hide();
// There ar conditions here so user is brought back to
// the right div and not one that was skipped from conditions above
$("." + tab_pool[curr_ind]).show();
document.getElementById(tab_pool[curr_ind]).checked=false;
$(".finished").hide();
$(".next").show();
}
if (curr_ind === 0) {
$(".back").hide();
}
});
end working code **
// **** what I want here is a button for unanswered questions that will bring user
// back to that specific unaswered question
// I tried assigning a class and a numeric value to those buttons but
// for some reason I get a new blank page???
// I tried a few variations of the code below
function answerQ (value) {
var returnTo = value;
curr_ind = curr_ind - returnTo;
$(".tab:visible").hide();
$("." + tab_pool[curr_ind]).show();
document.getElementById(tab_pool[curr_ind]).checked=false;
$(".finished").hide();
$(".back").hide();
$(".next").show();
}
});
** a sample of the button to go back to unanswered question
ANSWER
