Is it possible to convert a string into HTTP POST variables

Question

In the code below, I've used .serialize() to encode all of my form inputs as a string, which I then post to the server:

$.ajax({
    type: "post",
    url: wp_urls.ajax_url,
    data: {
        action: "submit_form",
        form: $("#myForm").serialize()
    }
});

I assumed the serialized form fields (stored in the form property of the data object) would become parameters of the query string. However, the only parameters being sent to the server are action and form with my serialized string being a value of the form field.

Is there a way to parse my serialized string into HTTP POST variables, before it hits the server or is there another way to handle the $_POST["form"] variable with server-side code?

How do you want to change a parameter before it hits the server? You can handle it either on the client (where you obviously serialize the form) or the server (where you could parse it). But between is nothing what you can do. It's out of your reach. — Charlotte Dunois, Aug 24 '15 at 04:50

score 4 · Accepted Answer · edited May 23 '17 at 11:58

4

If you want to send a serialized query string of only the form data, you need to get rid of the data object literal, and only pass the serialized data:

$.ajax({
    type: "post",
    url: wp_urls.ajax_url,
    data: $("#myForm").serialize()
});

According to the docs (referring to data):

It is converted to a query string, if not already a string.

This means that the object keys will be converted to parameters, and the values be will the corresponding parameter values.

If you want submit_form to exist as an action parameter, you can do this:

$.ajax({
    type: "post",
    url: wp_urls.ajax_url,
    data: $("#myForm").serialize() + '&action=submit_form'
});

See this answer regarding mutating jQuery form serialized data.

Why can you simply concatenate a string to the end of the serialized data? According to the docs:

The .serialize() method creates a text string in standard URL-encoded notation.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 24 '15 at 04:05

Josh Beam

19,292
3
45
68

1

...and adding a key-value pair to the form is as simple as temporarily adding a hidden field when serializing the form. – zzzzBov Aug 24 '15 at 04:06
1

OP will probably need to append `action=submit_form` in there somewhere – Phil Aug 24 '15 at 04:07
@zzzzBov, correct, yes thanks for pointing that out. Updated the answer. – Josh Beam Aug 24 '15 at 04:08
1

This is so simple I don't know how I didn't see it. Thanks. – Wilhelm Aug 24 '15 at 10:35

Ashrith G.n · Answer 2 · 2018-05-22T06:54:27.880

0

use

data = new FormData($('#form_id).get(0)),

this form will collect data from the bind to object in key value pairs (* provide name attribute in html tags )

in ajax call set

$.ajax({
url:url,
data:data,
type:'post',
processData = false,
contentType: false,
processData: false
});

* processData and contentType will not be modified based on header provided

edited May 22 '18 at 06:54

answered Aug 24 '15 at 04:14

Ashrith G.n

1
1

2

Please provide an explanation for your code to better help people who might not understand it as is. – Bono Aug 24 '15 at 04:20
SyntaxError: `processData = false,` – Josh Beam Aug 24 '15 at 04:40

score 0 · Answer 3 · answered Aug 24 '15 at 04:16

Alternately, you can build your own data:

var data = {};
$("#myForm").serializeArray().forEach(function(e) {
  if (data[e.name] !== undefined) {
    if ($.isArray(data[e.name])) {
      data[e.name].push(e.value);
    } else {
      data[e.name] = [data[e.name], e.value];
    }
  } else {
    data[e.name] = e.value;
  }
});
data['action'] = 'submit_form';
// just to check:
console.log($.param(data));

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input name="name" value="Amadan">
  <input type="checkbox" name="cb" value="1" checked>1
  <input type="checkbox" name="cb" value="2" checked>2
</form>

You can then use normally data: data in $.ajax. If you don't expect multiple values per parameter, you can simplify it to:

var data = {};
$("#myForm").serializeArray().forEach(function(e) { data[e.name] = e.value; });
data['action'] = 'submit_form';
// just to check:
console.log($.param(data));

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input name="name" value="Amadan">
  <input type="checkbox" name="cb" value="1" checked>1
</form>

score 0 · Answer 4 · answered Aug 24 '15 at 04:17

to unserialize data in php use parse_str From PHP.net manual

Parses str as if it were the query string passed via a URL and sets variables in the current scope. $str = "first=value&arr[]=foo+bar&arr[]=baz";
parse_str($str);
echo $first; // value
echo $arr[0]; // foo bar
echo $arr[1]; // baz
parse_str($str, $output);
echo $output['first']; // value
echo $output['arr'][0]; // foo bar
echo $output['arr'][1]; // baz

parse_str($form, $inputs);

    foreach ($inputs as $key => $value) {

        $_POST[$key] = $value;
    }

give this shot.

Is it possible to convert a string into HTTP POST variables

4 Answers4