How to send serialize form data using JQuery if th

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

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 2

You have to replace left square brackets and right square brackets with this:

data: $(this).serialize().replace(/%5B/g, '[').replace(/%5D/g, ']'),

Answer 3

@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 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

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

Answer 6

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();;