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

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

Answer 2

I have come up with a method that will, when the data is sent using post

on the other side lets you access your elements using $_['post']['name']

If it is an array (eg a multiple select) then on your server you can access it as an array again $_POST['myselect'][0]...

Code: Function to serialize form data for post

function serializePost(form) {
    var data = {};
    form = $(form).serializeArray();
    for (var i = form.length; i--;) {
        var name = form[i].name;
        var value = form[i].value;
        var index = name.indexOf('[]');
        if (index > -1) {
            name = name.substring(0, index);
            if (!(name in data)) {
                data[name] = [];
            }
            data[name].push(value);
        }
        else
            data[name] = value;
    }
    return data;
}

Answer 3

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 4

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 5

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

work correctly jquery =>

var data = $('form').serialize();
            $.post(baseUrl+'/ajax.php',
                    {action:'saveData',data:data},
                    function( data ) {
                        alert(data);
                    });

php =>

parse_str($_POST['data'], $searcharray);
    echo ('<PRE>');print_r($searcharray);echo ('</PRE>');

output =>

[query] => 
[search_type] => 0
[motive_note] => 
[id_state] => 1
[sel_status] => Array
    (
        [8] => 0
        [7] => 1
    )

and You can do whatever what you want like with array data, thanks to Aridane https://stackoverflow.com/questions/1792603

Answer 7

jQuery 1.4

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

decodeURIComponent(myform);

Answer 8

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

Answer 9

If you have to post that array only and not other input fields, this is a clean and quick solution:

var selectedbooks = $('book_form input[name^="bookArray["]').serialize();
alert (selectedbooks); 

Explaination:

The selector ^= selects all elements with a name attribute value starting with 'bookArray', the open square bracket '[' makes sure the element is the array we want to serialize and not just a variable starting with the string 'bookArray'.

Answer 10

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

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

Answer 11

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 12

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 13

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 14

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!