Faizan Haque Faizan Haque - 2 months ago 7
HTML Question

jQuery previous button needs to be invisible on first Q.)1 & jQuery Next button needs to be invisible on last page which is Q.)10

Okay, so I'm running into a slight problem, I have two jQuery buttons "previous" and "Next", now what i need to do is to make previous button invisible on first question because you can not go backwards and next button invisible on the last page because it is the last final page. What is the best way possible to go about this. Here's my code.....

if (i.Question_Type == "DROPDOWN")
{

<div class="container text-center">


<div class="row idrow" data-questions="@counter">
@{counter++;
}




<div id="question1" class="form-group">
<label class="lab text-center" for="form-group-select">
@i.Question_Order @Html.Raw(@i.Question)
</label>
<select class="form-control" id="form-group-select">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<option> @i.qOps.options[t]</option>
}
else
{
<option> @x</option>

}
}
</select>
</div>







</div>

</div>

}

if (i.Question_Type == "RADIO")
{




<div class="container">
<div class="row idrow" data-questions="@counter">
@{counter++;
}
<div class="form-group">
<label class="lab" for="questions">
@i.Question_Order @i.Question
</label>
<div class="row">
<div class="col-xs-12">
<div id="question1" class="radio-inline">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
}
else
{

<label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>

}
}
</div>

</div>

</div>
</div>


</div>
</div>

}
if (i.Question_Type == "CHECKBOX")
{
for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
{
@*<div class="container">
<div class="row">

<label>@y</label> <input type="checkbox" name="question">

</div>
</div>*@
}
}

}
<div class="azibsButtons">
<button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>

<button type="button" id="next" class="btn btn-primary pull-right">Next</button>
</div>



<script>
$(document).ready(function () {
$(".idrow").each(function (i) {

var inner = $(this).data('questions');
if (inner == 0) {

$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');

}
});
$("#next").click(function () {

$(".idrow").each(function (i) {

var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal++;
inp.addClass('hidden');


$('[data-questions=' + dataVal + ']').removeClass('hidden');

return false;

}
});
});

$("#previous").click(function () {

$(".idrow").each(function (i) {

var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal--;
inp.addClass('hidden');


$('[data-questions=' + dataVal + ']').removeClass('hidden');

return false;

}

});
});


});

</script>

Answer Source

Your code should be something like this .. try this and let me know if you need any explanation

$(document).ready(function () {
  ShowTheelement(0);
  $("#previous").addClass('hidden');

  var dataVal = 0;

  $("#next").click(function () {
    dataVal++;
    $("#previous").removeClass('hidden');
    dataVal ==  $(".idrow[data-questions]").length ? $(this).addClass('hidden'): $(this).removeClass('hidden');
    ShowTheelement(dataVal);
  });

    $("#previous").click(function () {
      dataVal--;
      $("#next").removeClass('hidden');
      dataVal ==  0 ? $(this).addClass('hidden'): $(this).removeClass('hidden');
      ShowTheelement(dataVal);
  });
});

function ShowTheelement(dataVal){
    $(".idrow").addClass('hidden');
    $(".idrow[data-questions='"+dataVal+"']").removeClass('hidden');
}