how to send an array with checkbox data via ajax to a php script

Question

have another question, to do with ajax and how to send data from a checkbox form without any page reload/redirect, i have the following code, here's the markup:

 <html>
   <head>
      <title>guild</title>
   </head>
   <body>
      <div id="dive">
         <form method="post" action="">
            <input type="checkbox" name="userList[]" value="together" />together<br />
            <input type="checkbox" name="userList[]" value="we" />we<br />
            <input type="checkbox" name="userList[]" value="made" />made<br />
            <input type="checkbox" name="userList[]" value="it" />it<br />
            <input type="submit" id="submit" value="yeah we did it!" />
         </form>
      </div>
      and here's the jquery:
      <script type="text/javascript" src="jquery-1.8.0.min (1).js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
         //when the button is clicked
         $("#submit").click(function(){
         //put the checked data into an array
         var userList= $('#dive input[type=checkbox]:checked').serializeArray();
         //send the data without page reload/refresh/redirect
         $.post("guild.php", {userList: userList},function(userList)
         {
         });
         });
         });
      </script>
   </body>
</html>

so the checked data is supposed to be sent to a php file which writes it to a file, here's the script:

<?php
//get sent data
$userList=$_POST['userList'];
//open file to be written to
$fp=fopen("guild.html", 'a');
//write data into file
for($i=0;$i<sizeof($userList);$i++) 
{
fwrite($fp, "<div class='gn'>."userList[$i]"."<br>"."</div>");
}
//close file
fclose($fp);
?>

i know that this is a very simple question, but i just can't get it to work, even after reading other answers. i need the checked data to be sent in form of an array, not a string. so how would i change the jquery part to make it work?thanks in advance for the help, i am an extreme beginner!

Are you using Firebug (or similar) to debug jQuery's POST request? — deizel.
– deizel., Commented Oct 3, 2012 at 17:44
Check the XHR tab in Chrome, and see if the request is actually making out. You should be able to see the data that you are sending also. — Doug Molineux
– Doug Molineux, Commented Oct 3, 2012 at 17:44
JQuery's $.post method documentation has the information you want... Do a search on the page for the word array. — Justin Wood
– Justin Wood, Commented Oct 3, 2012 at 17:45

Matt · Accepted Answer · 2012-10-03 17:47:17Z

3

According to the jQuery post documentation, you should be sending the post data array like so:

$.post("guild.php", { "userList[]": userList }...

answered Oct 3, 2012 at 17:47

Matt

3,7072 gold badges29 silver badges41 bronze badges

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

2 Comments

user1702837 Over a year ago

hi, thanks for the help, but i have made the changes suggested and still nothing happens, the page just reloads and no data is sent to the script, here are the changes: $(document).ready(function(){ $("#submit").submit(function(){ event.preventDefault(); var userList= $('#dive input[type="checkbox"]:checked').serializeArray(); $.post("guild.php", {"userList[]": [userList]}); }); }); nothing happens, it would be nice if you could kindly sho me how to send form data from checkboxes without page reload/redirect, thanks in advance.

Matt Over a year ago

Per your comment, you're syntax is still incorrect - it should be {"userList[]": userList }. userList not [userList].

Razvan Becker · Accepted Answer · 2013-10-02 11:06:45Z

I use that script and I receive this:

Array ( [0] => [object Object] [1] => [object Object] )

I use this code:

function add_apartament ()
    {
var vedere= $('#vedere input[type=checkbox]:checked').serializeArray();
        $.ajax({
            type: "POST",
            url: "inc/ajax/add_apartament_action.php",
            data: { 
                    'vedere[]':vedere
                  },
            success: function (msg) {

                $("#action").html(msg);
            },
            error: function (xhr, err) {
                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                alert("responseText: " + xhr.responseText);
            }
        });


    }

And php...

<?php

print_r($_POST['vedere']);

?>

Collectives™ on Stack Overflow

how to send an array with checkbox data via ajax to a php script

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related