I'm trying to build a web e-voting app with the usage of next and previous button, but whenever I click on the next button, the next div is not shown.
Here is my php jquery code
<div class="vote_div">
<form id="voting_form" method="post">
<?php
$post_query = $db_handle->prepare("SELECT DISTINCT `post_id` FROM `aspirants` ORDER BY `post_id`");
$post_query->execute();
$count_post = $post_query->rowCount();
if($count_post == 0)
{
echo error_admin_msg("No aspirant yet.");
}
else
{
$fetch_post = $post_query->fetchAll();
$i = 1;
foreach($fetch_post as $key=>$row)
{
?>
<div id="vote_div<?php echo $i;?>" class="all_vote_div">
<?php
$post_id = $row['post_id'];
$post_name = get_post_name($post_id);
$query = $db_handle->prepare("SELECT *FROM `aspirants` WHERE `post_id` = ? AND `qualify` = '1'");
$query->bindparam(1,$post_id);
$query->execute();
$count = $query->rowCount();
if($count == 0)
{
echo error_admin_msg("No aspirant yet for the post of <b>$post_name </b>.");
}
else
{
?>
<h3 align='center'>POST OF <?php echo strtoupper($post_name);?></h3>
<?php
$fetch_aspirants = $query->fetchAll();
foreach($fetch_aspirants as $fetch)
{
$aspirant_id = $fetch['aspirant_id'];
$unique_id = $fetch['unique_id'];
$aspirant_student_id = $fetch['aspirant_student_id'];
$aspirant_fullname = get_student_fullname($aspirant_student_id);
$aspirant_nickname = $fetch['nickname'];
$path = $fetch['path'];
if($path == "")
{
$folder = "../images/";
$full_path = $folder."default.png";
}
else
{
$full_path = "../aspirants/".$path;
}
?>
<div style='clear:both'></div>
<div class="col-md-4 col-sm-4">
<img src="<?php echo $full_path;?>" alt="<?php echo $aspirant_fullname;?>" class="img-responsive img-circle"/> <br/><br/><br/>
</div>
<div class="col-md-8 col-sm-8">
<h3> Fullname » <?php echo $aspirant_fullname;?> </h4><br/>
<h4> Nickname » <?php echo $aspirant_nickname;?> </h4><br/>
<input type="radio" id="post<?php echo $aspirant_id;?>" name="<?php echo $aspirant_id;?>" value="<?php echo $aspirant_id;?>"/> Vote
<input type="radio" checked='checked' style='display:none' value="none" id="post<?php echo $aspirant_id;?>" name="<?php echo $aspirant_id;?>"/>
</div>
<?php
}
}
if($i == 1)
{
?>
<div align="center">
<button id='<?php echo $i;?>' class='next btn btn-lg btn-success' type='button'> Next »</button>
</div>
<?php
}
else if($i > 1 || $i < $count_post)
{
echo "ppp";
?>
<div align="center">
<button id='<?php echo $i;?>' class='previous btn btn-lg btn-success' type='button'> Prev «</button>
<button id='<?php echo $i;?>' class='next btn btn-lg btn-success' type='button'> Next »</button>
</div>
<?php
}
else if($i == $count_post)
{
?>
<div align="center">
<button id='<?php echo $i;?>' class='previous btn btn-lg btn-success' type='button'> Prev «</button>
<button id='<?php echo $i;?>' class='next btn btn-lg btn-success' type='submit'><i class="icon-check"></i> Submit </button>
</div>
<?php
}
$i++;
}
}
?>
</form>
</div>
</div>
<script>
$('.all_vote_div').addClass('hide');
$('#vote_div'+1).removeClass('hide');
$(document).on('click','.next',function()
{
var last = parseInt($(this).attr('id'));
var nex = last+1;
//alert(nex);
$('#vote_div'+last).addClass('hide');
$('#vote_div'+nex).removeClass('hide');
});
$(document).on('click','.previous',function()
{
var last = parseInt($(this).attr('id'));
var pre = last-1;
$('#vote_div'+last).addClass('hide');
$('#vote_div'+pre).removeClass('hide');
});
</script>
I'll be glad if you can help out. Thanks