How pass the checked checkbox value to the next page using javascript

Question

I am retrieving value from database and showing it in html table with check boxes.i am also having button, when user check the check box and it pass the rowid and redirect next page .if user not check the check box and check the button it will not pass the rowid and it will not redirect.

my problem is when first row in html table is checked and button pressed its working but if i am checking the second row in html table and click the button it not performing any action

below is my code

<tbody id="fbody" class="fbody" style="width:1452px" >    
<?php    

$clientid=$_GET['clientid'];  
if($clientid!=""){      
    $sql = mysql_query("SELECT * FROM billingdatainputandexport WHERE clientid =            '$clientid'");    

    while($rows=mysql_fetch_array($sql))
    {
        if($alt == 1)
        {
            echo '<tr class="alt">';
            $alt = 0;
        }
        else
        {
            echo '<tr>';
            $alt = 1;
        }

    echo '<td  style="width:118px" class="edit clientid '.$rows["id"].'">'.$rows["clientid"].'</td>
        <td id="CPH_GridView1_clientname" style="width:164px" class="edit clientname '.$rows["id"].'">'.$rows["clientname"].'</td>      
        <td id="CPH_GridView1_billingyear" style="width:168px" class="edit  billingyear '.$rows["id"].'">'.$rows["billingyear"].'</td>
        <td id="CPH_GridView1_billingmonth " style="width:169px" class="edit billingmonth '.$rows["id"].'">'.$rows["billingmonth"].'</td>
        <td style="width:167px" class=" '.$rows["id"].'">
        <input name="nochk" value=" '.$rows["id"].'" type="submit" style="margin:0 0 0 49px;background-image: url(/image/export.png);background-repeat: no-repeat;cursor:pointer;color:#C0C0C0;" ></td>
        <td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>                                 
        </tr>';   

    }
}
?>    
</tbody>

<input type="image" name="yousendit" id="yousendit" src="/image/export.png"  style="margin:-5px 23px -28px 822px;cursor:pointer;" >

javascript

<script>    
$(document).ready(function() {      
    $("#yousendit").click(function() {      
        if(document.getElementById('chk1').checked){
                var ms = document.getElementById('chk1').value;

                $.ajax({
                   type:"post",    
                   data:"ms="+ms,
                   success:function(data) {             
                        window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms='+ms+''
                      $.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", { "test": ms } );
                          $("#result").html(data);                          
                   }
                });         
        }
    });
});    
</script>

Answer 1

You can change this:

id="chk1"
name="chk1"

<input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/>

to this:

class="chk"
name="chk"'.$rows["id"].'

'<input type="checkbox" id="chk1" name="chk"'.$rows["id"].'" value=" '.$rows["id"].'"/>'

and update the jQuery code:

$("#yousendit").click(function() {
    var $check = $('.chk:checked');

    $.ajax({  //<-------------here you havn't mentioned the url
       type:"post",
       data:$check.serialize(),
       success:function(data){

           ............

       }
    });
});

Answer 2

HTML page should have only 1 element with specified ID, in your case as code is running in loop and you are assigning id

<td style="width:69px"><input type="checkbox" id="chk1" name="chk1" value=" '.$rows["id"].'"/></td>

all the checkbox will have the same ID. Now once you try to get checked status by selector

if(document.getElementById('chk1').checked){

it will return true if only first checkbox is selected and ignore all the other instances.

You should use class selector and loop through elements to get comma-separated values and make ajax call.

First change id to class in HTML <input type="checkbox" class="chk1" name="chk1" value=" '.$rows["id"].'"/>

and change JavaScript to process selected checkbox array

$(document).ready(function () {

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

    var id_list = [];

    $.each($(".chk1:checked"), function (index, element) {
        var tmpVal = $(element).val();
        id_list.push(tmpVal);
    });


    if (id_list.length > 0) {


        var ms = id_list.join();




        $.ajax({
            type: "post",

            data: "ms=" + ms,
            success: function (data) {

                window.location = 'billingdatainputandexport/billingdatainputandexportdetailedreport.php?ms=' + ms + ''

                $.post("billingdatainputandexport/billingdatainputandexportdetailedreport.php", {
                    "test": ms
                });
                $("#result").html(data);

            }
        });

    }
});

});