Cliff Ireri
Cliff Ireri

Reputation: 47

Radio Buttons return same value as the first dynamically generated radio button

i really need help with something...so im dynamically generating radio buttons from php,based on the number of items in the database,the radio buttons come with a value and a text,value is the id of the corresponding entry in the databse,the problem is when i try to get that value,it returns the value for the first radio button,for all the radio buttons,below is the jquery and php code i used,your help will be very much appreciated,Thanks

$(function(){

 var pName;
 var selectedValue;
 $(".sel1").on('change',function(){
   $selectedValue = $("input[name='id']:checked").val();
   alert($selectedValue);
});

$(".submit_btn").on('click',function(event){
    event.preventDefault();
        var $this=$(this);
        var $cat_id=$this.data('uid');


            $.ajax({
                url:"vote.php",
                method:"get",
                data:"cat_id="+$cat_id+"&hisId="+$selectedValue,
                success:function(result){

                       alert(result);

                }
            })

});

});

php

<div class="col-md-4 col-lg-4 col-sm-4 col-xsm-4 col-xxl-4 mt-4">
    <div class="cat_holder">
        <form action="" class="ml-4">
             <div class="form-group">
             <label for="#select1" class="cat_name"><?php echo $catNames; ?></label><br>

                <?php
                foreach($player_id as $real_player_id){
                    $player_name=$caller->getPlayerNames($real_player_id);
                    ?>

                    <input class="text_style sel1" id="select1" type="radio" name="id" value="<?php echo $real_player_id;?>"> <?php echo $player_name;?><br>

                    <?php
                    }
                ?>

              </select>
            </div>
            <div class="form-row">
                <div class="col-md-6 col-lg-6 col-sm-6 col-xsm-6 col-xxl-6">
                    <input type="submit" value="Vote" class="btn btn-primary btn-block submit_btn" data-uid="<?php echo $realcatIds;?>" readonly >
                </div>
            </div>
        </form>
    </div>
</div>

Upvotes: 1

Views: 170

Answers (1)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

1.Remove id="select1" from radio buttons in your PHP code. (As id's need to be unique)

2.Convert

$selectedValue = $("input[name='id']:checked").val();

to

$selectedValue = $(this).val();

Note:-$("input[name='id']:checked") will give always the first checked checkbox value among all checked checkboxes.

Upvotes: 1

Related Questions