post html associative array using jquery

Question

I have a form with array of input elements as shown below.

<form method="post" action="sample.php">
<input type="text" name="field[txt][name]" />
<input type="text" name="field[txt][sex]" />
<input type="text" name="field[txt][location]" />
<br /><br />
<input type="text" name="field[num][age]" />
<input type="text" name="field[date][pod]" />
<input type="text" name="field[date][doj]" />
<br /><br />
<input type="submit" name="submit" />
</form>

php - print_r($_POST['field']) gives me an output similar to the following when i submit the form as usual. How can I use jquery-post method to submit 'field[ ][ ]' element to get the same result?

Array(
    [txt] => Array
        (
            [name] => sam
            [sex] => male
            [location] => somewhere
        )
    [num] => Array
        (
            [age] => 20
        )
    [date] => Array
        (
            [pob] => 2001-01-01
            [doj] => 2001-01-01
        )
)

Any help would be highly appreciated.

Ramesh · Accepted Answer · 2013-11-13 14:23:44Z

2

Use:

var postData = $("#formId").serializeArray();
$.post(url, postData, function(response){ //do something });

answered Nov 13, 2013 at 14:23

Ramesh

4,3032 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LeGEC · Accepted Answer · 2013-11-13 14:21:49Z

1

You can use a regular javascript object as a data parameter, and jQuery will take care to serialize it as an url parameter :

var data = {
    fields: {
        txt: {
            name: "sam",
            sex: "male",
            location: "somewhere"
        },
        num: {
            age: 20
        },
        date: {
             pob: "2001-01-01",
             doj: "2001-01-01"
        }
    }
};
$.post(url, data, function(answer){ ... });

answered Nov 13, 2013 at 14:21

LeGEC

53.4k5 gold badges69 silver badges127 bronze badges

3 Comments

user2987833 Over a year ago

first of all thanks a lot for all the suggestions provided. So I made few changes and got what i wanted. I add class attribute to input elements as "mc". So I can use data={mc: $('.mc').serialize()} and on php side parse_str($_POST['data']['mc']);print_r($field);

user2987833 Over a year ago

Can this be further improved or can there be any serious errors? Please suggest. Thanks.

LeGEC Over a year ago

@user2987833: if you just want to serialize the full form and send it, go with @Ramesh' answer. you won't need to use parse_str on PHP side.

Ramesh · Accepted Answer · 2013-11-13 14:35:24Z

0

try jquery .Serializre()

var values = $("form").first().serialize();

This code will get all values and serialize to Url Data like it: "&field[txt][name]=foo1&field[txt][sex]=male"

then you use the Ajax:

$.ajax({url: $("form").first().attr("action"), data: values })

edited Nov 13, 2013 at 14:35

Ramesh

4,3032 gold badges20 silver badges24 bronze badges

answered Nov 13, 2013 at 14:26

Lucas Argate

3492 silver badges12 bronze badges

Collectives™ on Stack Overflow

post html associative array using jquery

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related