Javascript - Storing array of objects in hidden field

I need to store some input in a hidden field, so when I print the post-request, I get:

Array ( [0]=>1 [1]=>2 [2]=>3 )

I already tried:

var elems = [];
elems.push['1'];
elems.push['2'];
elems.push['3'];

$('#input_hidden_field').val(elems);

But it does not work, anybody could help me with this?

Solution 1:

You can parse your array into a JSON-string to store it:

.push() is a function, therefore it needs () and not the [] array-syntax.

var elems = [];
elems.push('1');
elems.push('2');
elems.push('3');

$('#input_hidden_field').val(JSON.stringify(elems)); //store array

var value = $('#input_hidden_field').val(); //retrieve array
value = JSON.parse(value);

To create an object just change the definition of elems and the storage of the values:

var elems = {};
elems[0] = '1';
elems[1] = '2';
elems[2] = '3';

Demo

Reference

.stringify()

.parse()

Solution 2:

JS

var elems = [];
elems.push['1'];
elems.push['2'];
elems.push['3'];
$('#input_hidden_field').val(JSON.stringify(elems));

PHP

$elems = json_decode($_POST['hidden_input_name'], true);

Solution 3:

A better approach would be appending a new formdata for each value within an array.

JS

var elems = [];
elems.push['1'];
elems.push['2'];
elems.push['3']; 

var fd = new FormData(document.getElementById("myform"));
for (var i = 0; i < elems.length; i++) {
   fd.append('elems[]', elems[i]);
}

HTML

<form action="./post-request.php" method="post" id="myform">
   <input type="hidden" name="elems[]" />
   <button type="submit" name="myarray">SEND</button>
</form>

PHP

<?php 

   if(isset($_POST['myarray']) {
      print_r($_POST['elems']); 
   }