jQuery is not picking up right value from php for loop

Question

My for loop in php looks like this:

for ($i=1;$i<=10;$i++) {
 ?>
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" />
    <a href="javascript:void(0)" class="VerySmallFont">
          <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div>
    </a>

Now I want to extract value of $i from php to Jquery. Here's what I am doing in JS part for this -

<script type="text/javascript" language="javascript">
 $(document).ready(function() {
     $(".VerySmallFont").click(function(){
         var $Parent              = $(this).parent();                       
         var ThisQuestionNumber   = $Parent.find('[id^="GetQuestion-]:first').val();  
         var TestID        = $("#GetTestID").val();
         var ShowCQ = '1';
         $.ajax( {
             type : 'GET',
             url:'getquestiondata.php',
             data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber},
             success:function(data) {
                 $("#LoadingImage").hide();
                 $('#ShowQuestion').html(data);
             }
         });
     });
 });
</script>

I'm not getting value of the var ThisQuestion in my JS. I also tried using the class ThisQuestion instead of id selector GetQuestion but that doesn't work either. I'm not sure what the mistake that I'm making is.

Kevin · Accepted Answer · 2014-09-25 08:37:39Z

Upon looking at your markup it seems you're pointing the wrong element. In your jquery you're pointing to the parent. You should point to the previous sibling which is the hidden input.

var hidden = $(this).prev(); // point the input
var ThisQuestionNumber = hidden.val();

Full:

<?php
for ($i=1;$i<=10;$i++) {
 ?>
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" />
    <a href="javascript:void(0)" class="VerySmallFont">
          <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div>
    </a>
<?php } ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {

    $(".VerySmallFont").click(function(){

        var hidden = $(this).prev();
        var ThisQuestionNumber = hidden.val(); // point to the previous sibling
        var TestID = $("#GetTestID").val();
        var ShowCQ = '1';
        $.ajax({
            type : 'GET',
            url:'getquestiondata.php',
            data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber},
            success:function(data) {
                $("#LoadingImage").hide();
                $('#ShowQuestion').html(data);
            }
        });
    });
});
</script>

Demo

Collectives™ on Stack Overflow

jQuery is not picking up right value from php for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related