Ajax and checkbox array

Question

Im just new in using ajax and I was following a tutorial from this link http://ricochen.wordpress.com/2011/08/02/passing-array-of-checkbox-values-to-php-through-jquery-example/
But i wasnt able to make it work can you pls help me on this?

html code :

<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> 
 <script type="text/javascript">
                function doit() {
                        var p=[];
                        $('input.cb').each( function() {
                                if($(this).attr('checked')) {
                                        p.push($(this).attr('rel'));
                                }
                        } );
                        $.ajax( {
                                url:'/test2.php',
                                type:'POST',
                                data: {list:p},
                                success: function(res) {
                                        alert(res);
                                }
                        });
                }
        </script>
</head>
<body>       
 <input type="checkbox" class="cb" rel="1"></input>This is 1<br />
        <input type="checkbox" class="cb" rel="abc"></input>This is abc<br />
        <input type="checkbox" class="cb" rel="999"></input>This is 999<br />
        <a href="javascript:void(0)" onclick="doit()">Click</a>       
</body>
</html>

test2.php :

<?php

        print_r(@$_POST['list']);

?>

try to alert something just after the function doit() { and check whether it is alerting.. — Jenz
– Jenz, Commented Apr 7, 2014 at 11:49
@jenz i tried using this and replace the onClick function and it worked function qwe() { alert('test'); } — zxc
– zxc, Commented Apr 7, 2014 at 11:52
@jenz what i need is to pass array checkbox so i saw this tutorial and try it but it doesnt work — zxc
– zxc, Commented Apr 7, 2014 at 11:53
check whether the data is passed to test2.php by echoing some text inside that file.. — Jenz
– Jenz, Commented Apr 7, 2014 at 11:57

saman khademi · Accepted Answer · 2014-04-07 12:17:16Z

1

try this:
1:you use <input></input> this is wrong!!! <input type='checkbox' name='' />
2:you each all checkbox you can each $('input.cb:checked') and remove if
3:you want post ajax so use $.post

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 
 <script type="text/javascript">
                function doit() {
                        var p=[];
                        $('input.cb:checked').each(function(index,value) {                                
                                        p.push($(value).attr('rel'));
                        });
                        $.post('/test2.php',{list:p}).done(function(res) {alert(res);});
                }
        </script>
</head>
<body>       
        <input type="checkbox" class="cb" rel="1"/>This is 1<br />
        <input type="checkbox" class="cb" rel="abc"/>This is abc<br />
        <input type="checkbox" class="cb" rel="999"/>This is 999<br />
        <a href="javascript:void(0)" onclick="doit()">Click</a>       
</body>
</html>

answered Apr 7, 2014 at 12:17

saman khademi

8421 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zxc Over a year ago

i tried using this and remove this part $.post('/test2.php',{list:p}).done(function(res) there was no alert showing

saman khademi Over a year ago

because this is not done may not found your php file,i test it and give alert Array ( [0] => 1 [1] => abc ) your php file must beside your html file in <b>web server</b> if not work change file address and remove / before test2.php

zxc Over a year ago

ok you saved my day !!!!! if i can check this as an aswer three times i would tnx!

Sridhar R · Accepted Answer · 2014-04-07 12:03:50Z

1

Try with this

$('input.cb').each( function() {
       if($(this).is(':checked')) { // change this line in your code
            p.push($(this).attr('rel'));
       }
 });

DEMO

answered Apr 7, 2014 at 12:03

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

6 Comments

zxc Over a year ago

OK i love you! finally it works! can you help me further on my goal if its ok?

Sridhar R Over a year ago

@zxc yes tell me :-)

zxc Over a year ago

tnx! uhm i need to pass the array checkbox to the test2.php what i did in the test2.php is $list=$_POST['list']; im having a problem on the ajax post part

zxc Over a year ago

uhm theres no error showing but theres no data getting inserted in the db. what i did is get the POST[LIST] then insert it into db.

Sridhar R Over a year ago

is print_r(@$_POST['list']); or echo display the checkbox value or not?

|

Su4p · Accepted Answer · 2014-04-07 11:57:17Z

0

using onclick="" attribut is kind of deprecated + you should'nt use a link for an action you should use a button. link are for pages and button for action. http://jsfiddle.net/tLq8L/1/ <-- check it here for a working version

 <script>
 function doit() {

                    var p=[];
                    $('input.cb').each( function() {
                            if($(this).attr('checked')) {
                                    p.push($(this).attr('rel'));
                            }
                    } );
                    $.ajax( {
                            url:'/test2.php',
                            type:'POST',
                            data: {list:p},
                            success: function(res) {
                                    alert(res);
                            }
                    });
            }
 </script>
  <input type="checkbox" class="cb" rel="1"></input>This is 1<br />
    <input type="checkbox" class="cb" rel="abc"></input>This is abc<br />
    <input type="checkbox" class="cb" rel="999"></input>This is 999<br />
    <a href="javascript:void(0)" onclick="doit()">Click</a>

answered Apr 7, 2014 at 11:57

Su4p

86510 silver badges25 bronze badges

1 Comment

Su4p Over a year ago

it's working check with a tool like httpfox or chrome developper to see the http request for course it's ending in error cause I don't have your test2.php

Sridhar R · Accepted Answer · 2014-04-07 12:10:04Z

0

if($(this).prop('checked')) instead of if($(this).attr('checked')) will solve your problem

edited Apr 7, 2014 at 12:10

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

answered Apr 7, 2014 at 12:09

Unstaged

5092 gold badges5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Ajax and checkbox array

4 Answers 4

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related