How to send array to PHP using jQuery $.post()

Question

I want to send data to a PHP page using jQuery's $.post(), with a $_POST result that will look like this:

Array
(
    [text] => Some String
    [numbers] => Array
        (
            [0] => 9
            [1] => 4
        )

)

The information that becomes the numbers array is dynamically generated, so I have no idea how many elements it will consist of. So, I have to gather this info into a JavaScript array.

I have this jQuery code so far:

$.post("http://some.url/page.php",
{
    text: $("#string").val(),
    numbers: $("#container input").val() //This is obviously wrong!
}).done(function (result)
{
    $("#result").html(result);
});

How do I get the values from the input elements in #container into an array at the numbers: point, to get an array within the $_POST array?

EDIT: HTML looks something like this:

<input type="text" name="text" id="text">
<div id="container">
    <label id="9"><input type="hidden" value="9">You added no. 9!</label>
    <label id="4"><input type="hidden" value="4">You added no. 4!</label>
    <!-- These inputs are dynamically added with a whole other function -->
</div>

Answer 1

Your html inputs must have a names like:

• name="text" -> for "name" input

• name="numbers[]" -> for two "numbers" inputs

So html:

<form class="form">
    <input type="text" name="text" id="text">
    <div id="container">
        <label id="9"><input  name="numbers[]" type="hidden" value="9">You added no. 9!</label>
        <label id="4"><input  name="numbers[]" type="hidden" value="4">You added no. 4!</label>
        <!-- These inputs are dynamically added with a whole other function -->
    </div>
<form>

When try to serialize your form inputs:

$.post("http://some.url/page.php",
{
  data: $('.form').serialize(),
}).done(function (result)
{
    $("#result").html(result);
});

Answer 2

$.serialize() is Good choice. but sometimes you want to pass small set, not entire form inputs. (btw, I recommend to use lodash or underscore library for filtering)

$.map() can be an option.

$.post("http://some.url/page.php",
{
    text: $("#string").val(),
    numbers: $("#container input").map(function() { return $(this).val(); }) // now numbers = [ "9", "4" ]
}).done(function (result)
{
    $("#result").html(result);
});

Answer 3

First of all you need a simple text field to send text for example

<input type='text' name='text' />

And for array you need array of text field. You can declare it like this and duplicate it as required.

<input type='text' name='numbers[]' />

Now simply you can send data by serializing the form by using the code

var data = $(this).serialize();

Final code will look like this.

JavaScript / Ajax Code:

$(document).ready(function () {
    $("#myform").on("submit", function (e) {
        e.preventDefault();

        var data = $(this).serialize();
        $.post("yourdomain.com/action.php", data, function (response) {
            /* callback on success */
        });
    });
});

HTML code will look like this

<form id="myform" action="action.php">
    <inpu type="text" name="text" />
    <inpu type="text" name="numbers[]" />
    <inpu type="text" name="numbers[]" />
    <inpu type="text" name="numbers[]" />
    ..
</form>