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 \"\";
    echo \"

        

Answer 1

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 2

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

Answer 3

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 4

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 5

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 6

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