How to send serialize form data using JQuery if the input element is an array

Question

I have this piece of code in my PHP code:

while ($row = mysqli_fetch_assoc($result))
{
    extract($row);
    echo "<tr>";
    echo "<td bgcolor='#FFFFFF'><input id='bookArray[]' name='bookArray[]' type='checkbox' value='$book_id' />$book_id</td>";
    echo "<td bgcolor='#FFFFFF'>$threat_name</td>";
    echo "</tr>";
}

In HTML page, I want to use jQuery serialize() method to sent array of selected books in bookArray[]. In my JavaScript,

var selectedbooks = $("book_form").serialize();
alert (selectedbooks); 

In the alert message box, i did not get any value (empty string).

Previously when i am using Prototype, it worked nicely.

Answer 1

Square brackets are not allowed as name or id parameter values. Further id values must be unique throughout the HTML document.

Your PHP code produces HTML that violates both of these rules. I guess your problems are a result of this.

Try this, and the try jQuery again:

$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
  $i++;
  extract($row);
  echo "<tr>";
  echo "<td bgcolor='#FFFFFF'><input id='bookArray_$i' "
      ."name='bookArray' type='checkbox' value='$book_id' />$book_id</td>";
  echo "<td bgcolor='#FFFFFF'>$threat_name</td>";
  echo "</tr>";
} // while

Answer 2

You may need to change your PHP as @Tomalak suggests, but you will also need to change your javascript. To reference a named element use the #name selector:

var selectedbooks = $('form#book_form').serialize();;

Answer 3

Thanks Tomalak.

In the PHP file, I am using the following code now:

  while ($row = mysqli_fetch_assoc($result))
  {
   extract($row);
   echo "<tr>";
   echo "<td bgcolor='#FFFFFF'><input id='$book_id' name='bookArray[]' type='checkbox' value='$book_id' />$book_id</td>";
   echo "<td bgcolor='#FFFFFF'>$book_name</td>";
   echo "</tr>";
  } // while

**The book_id is unique.

Using tvanfosson solution, now i am able to get array of input value

var selectedBooks = $('form#book_form').serialize(); alert (selectedBooks);

From the alert message box, i get ==> bookArray%5B%5D=T2.05&bookArray%5B%5D=T2.81

Now, when I sent the serialize input value to PHP file using JQuery

var selectedBooks   = $('form#book_form').serialize();
alert (selectedBooks);

var url = 'saveBookList.php';

// Send to server using JQuery
$.post(url, {bookArray: selectedBooks},
      function(responseData){
        $("#save-result").text(responseData);
});

Inside saveBookList.php to process the serialize form, i got this error "Invalid argument supplied for foreach()".

Inside saveBookList.php,

 // If you have selected from list box.
 if(isset($_POST['bookArray'])){

  // Get array or bookID selected by user
  $selectedBookId = $_POST['bookArray'];
  echo $selectedBookId;

  foreach($selectedBookId as $selectListItem)
  {
        echo "You sent this -->" . $selectListItem . "\n";

  }

}

The PHP code above works fine if i am sending using Prototype.

For Prototype when i do echo $selectedBookId;

I got Array.

For JQuery, when i do echo $selectedBookId;

I got ==> bookArray%5B%5D=T4.11&bookArray%5B%5D=T4.38

My question, does jQuery support array value for post method?

Answer 4

Problem solved! Here is what i did.

Inside PHP file to create rows of dynamic checkboxes,

  while ($row = mysqli_fetch_assoc($result))
  {
   extract($row);
   echo "<tr>";
   echo "<td bgcolor='#FFFFFF'><input name='books' type='checkbox' value='$book_id' />$book_id</td>";
   echo "<td bgcolor='#FFFFFF'>$book_name</td>";
   echo "</tr>";
  } // while

I do not use JQuery $.post method anymore. I changed my code to the following

    var my_query_str = '';

$("input[@type='checkbox'][@name='books']").each(
  function()
  {
   if(this.checked)
    {
          my_query_str += "&bookArray[]=" + this.value;
    }
  });


$.ajax(
{
    type: "POST",
    url: "saveBookList.php",
    data: "dummy_data=a" + my_query_str,
    success:
        function(responseData)
        {
            $("#save-result").empty().append(responseData);
        },
    error:
        function()
        {
            $("#save-result").append("An error occured during processing");
        }
});

Now, inside saveBookList.php page, value of $_POST['bookArray'] is an Array. Yey! Yey!

I do hope and wish the $.post method of JQuery can support array data type as Prototype does. :)

Answer 5

easy: serialize().replace('%5B%5D', '[]')

Answer 6

I am just facing the same problem now

Seems the problem of serializing array fields cannot be solved then.

Answer 7

Prototype / Scriptaculous serialize functionality for jQuery:

<script>
function toObjectMap( queryString )
{
    return '{\'' + queryString.replace(/=/g, '\':\'').replace(/&/g, '\',\'') + '\'}';
}
</script>
...
<div id="result"></div>
...
<form onSubmit="$('#result').load( ajaxURL, toObjectMap( $('#formId').serialize() ) );" ...>
...

Answer 8

@Tomalak You can use the square brackets characters "[" and "]" within XHTML see http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-transitional.dtd_input

So this means that a name can contain many different characters legally within XHTML, although it doesn't make much sense to use slashes or brackets. PHP supports the use of array notation in form names, so you could be missing a trick if you don't use array notation in some instances.

Answer 9

i have the same problem in my project. i see that some of you don't get even what is jquery and php :) wtf?? php has nothing to do with it.

Answer 10

var data = $(form).serialize();
$.post('post.php', '&'+data);

Answer 11

var arTags = new Array();

 jQuery.map( $("input[name='tags[]']") , function(obj,index)
 {
    arTags .push($(obj).val());
 });

 var obj = {'new_tags'           : $("#interest").val() ,
            'allready_tags[]'  : arTags };

 var post_data = jQuery.param(obj,true);

 $.ajax({
       type :  'POST',
       url  :  'some_url',
       data :  post_data,
       dataType : "html",
       success: function(htmlResponse)
       {

       }
});

Answer 12

jQuery 1.4

var myform = $("book_form").serialize();

decodeURIComponent(myform);

Answer 13

it's not a problem with jQuery Post, it's with serialize you can do this:

    var my_query_str = ''; 
    $("input[@type='checkbox'][@name='books']").each( function() { 
       if(this.checked) { my_query_str += "&bookArray[]=" + this.value; } 
    }); 
   jQuery.post(
      "saveBookList.php",
      "dummy_data=a" + my_query_str ,
       function(responseData){   
          $("#save-result").empty().append(responseData); 
       }, 
       error: function() { 
            $("#save-result").append("An error occured during processing"); 
       }
   }); 

but all you really have to do is replace '[' & ']' back to themselves after serializing them. because serialize(); changed them to their htmlencoded value!