Grab Form Data as an Object

Question

My goal is to contruct an object with data of my form.

After doing some googling, people suggested me to use serialize()

Now, I got this from my form data

_method=PUT&_token=rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ&max_down=256&max_up=256&cpe_mac=000D6766F2F6&device_mac=503275AE7A69

Is there a way to convert that long string into an object ?

Is there a any other way to achieve this ?

Any direction on this will mean a lot to me !

I've tried

$( "form#editRateLimitForm" ).on( "submit", function( event ) {
      event.preventDefault();
      var serialize = $( this ).serialize() ; // Nothing printing out
      console.log(serialize); // _method=PUT&_token=rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ&max_down=256&max_up=256&cpe_mac=000D6766F2F6&device_mac=503275AE7A69

    });

Are you looking for this: http://stackoverflow.com/a/17488875/29407 — Darin Dimitrov, Dec 15 '15 at 20:34
jQuery has a fonction for this : https://api.jquery.com/serializeArray/ — Pierre Granger, Dec 16 '15 at 14:25
@PierreGranger That's not exactly the same thing. That will work but only if the OP is fine with having an array of `key: value` objects instead of a single object with property names matching the form fields and values matching the form field values. — War10ck, Dec 16 '15 at 15:39
Possible duplicate of [Difference between serialize and serializeObject jquery](http://stackoverflow.com/questions/17488660/difference-between-serialize-and-serializeobject-jquery) — War10ck, Dec 16 '15 at 15:40
Refer to this answer for Serialization Framework. http://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework — Venkat.R, Dec 17 '15 at 01:18

score 1 · Accepted Answer · answered Dec 16 '15 at 16:10

1

I have used this approach many times.

$("form#editRateLimitForm").on("submit", function( event ) {
  event.preventDefault();
  var formObj = {},
      formData = $(this).serializeArray(),
      i;
  for (i in formData) {
      formObj [formData[i]['name']] = formData[i]['value'];
  }
  console.log(formObj); 
});

console.log should show

{_method: 'PUT', token:'rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ', max_down: '256', 
 max_up: '256', cpe_mac: '000D6766F2F6', device_mac: '503275AE7A69'}

answered Dec 16 '15 at 16:10

DFriend

8,869
1
13
26

That will fail if controls have duplicate names. – Quentin Dec 16 '15 at 17:21
@Quentin, yes it will. But if you have a
with duplicate control names aren't you going to have trouble anyway?
– DFriend Dec 16 '15 at 17:24
1

No. Just about every server side form handler will expose the data as an array. It's really useful for things like "Click each checkbox you agree with". ` – Quentin Dec 16 '15 at 17:26
@Quentin, Yes a `` controls with the same name only one of them will show up in the array delivered to the server. The same holds true for `` controls. – DFriend Dec 16 '15 at 17:56
1

@DFriend — That simply isn't true. (Unless you are using PHP and haven't given it a name ending in `[]` … but PHP is weird … and even then all the data is *delivered* to the server, PHP's form parser just discards some of it) – Quentin Dec 16 '15 at 19:10
@Quentin - I am talking about PHP and
submits. Test it yourself. Create a form with two inputs with the same name - e.g. 'a_field'. (They don't even have to be the same input "type") Give them two different values. Submit the form (via POST) and var_dump($_POST) wherever it's received. There will be only one `$_POST['a_field']` in the dump. I'm not talking about arrayed inputs e.g. `` But even then, only "successful controls" will be in the `something` array.
– DFriend Dec 16 '15 at 20:39
1

@DFriend — I talked about PHP in my previous comment. Look at the data being sent over the wire before it gets to PHP (you can use the Network tab in your browser's developers tools to do that). It will still all be sent even if you don't put `[]` on the end of the name. That's just a weirdness in PHP's parser. – Quentin Dec 16 '15 at 20:41
@Quentin - Very interesting. Never noticed that duplicates were sent. Thanks. The weirdness makes sense as $_POST is an associative array with field names used as keys. Last value read overwrites any value previously set with that key. BTW, if you really want everything sent during a submit use `$sent = file_get_contents('php://input');` – DFriend Dec 16 '15 at 21:44

Grab Form Data as an Object

1 Answers1