Serialize form data into array notation

Question

I have this form

<form action="" method="post">
  <input type="hidden" name="one" value="somevalue">
  <input type="hidden" name="two" value="anothervalue">
  <input type="hidden" name="three" value="someothervalue">
</form>

I also can use jQuery.

How can i serialize the form data to get the $.post() or $.ajax() methods to send the data in the HTTP request this way:

mydata[one]: somevalue
mydata[two]: anothervalue
mydata[three]: someothervalue

Instead of:

one: somevalue
two: anothervalue
three: someothervalue

luiscrjr · Accepted Answer · 2016-07-10 03:49:10Z

1

Two suggestions:

1) set the name directly:

<input type="hidden" name="mydata[one]" value="somevalue">

2) change the form's names after load (if you want some dynamic behavior). Something like that (not tested):

$(document).ready(function() {
    var prefix = 'data'; //or get from some data- attribute
    $('form input').each(function() {
        $(this).attr('name', prefix + '[' + $(this).attr('name') + ']' );
    });
});

Then, if you want to send your data via AJAX+jQuery, one approach is to serialize your form data with serialize().

edited Jul 10, 2016 at 3:49

answered Jul 10, 2016 at 3:43

luiscrjr

7,2783 gold badges28 silver badges28 bronze badges

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

1 Comment

Eduardo Escobar Over a year ago

Yeah, 2nd choice is what i finally used. I can't modify the source HTML form, that's why i needed a client side solution.

Community · Accepted Answer · 2017-05-23 11:58:53Z

0

You cannot send an array through $.ajax(), but you can send a JSON string. So, something like this would work:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

Example:

$.ajax({
    type: "POST",
     url: targetURL,
    data: JSON.stringify($('#form').serializeArray())
})
.done(function(data){
      console.log(data);
      return true;
})
.complete(function() {})
.error(function(xhr, textStatus, errorThrown) {
     console.log('ajax loading error...');
     return false;
    }
});

On PHP side, use json_decode to turn the JSON back into an array:

// decode JSON string to PHP object, 2nd param sets to associative array
$decoded = json_decode($_REQUEST['data'],true);

output values:
foreach ($decoded as $value) {
   echo $value["name"] . "=" . $value["value"];
}

References:

https://www.sitepoint.com/jquery-php-ajax-json/

https://stackoverflow.com/a/11338832/1447509

https://jsfiddle.net/gabrieleromanato/bynaK/

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 10, 2016 at 3:44

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

1 Comment

Eduardo Escobar Over a year ago

Cool, i forgot to tell i needed a client side solution. mrlew pointed to the right direction. Thanks anyway man.

Collectives™ on Stack Overflow

Serialize form data into array notation

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related