How can I access an array declared in an HTML hidden input from a Javascript function?

Question

I have declared an array in a hidden input in my HTML form. Now I want to access that array in a Javascript function. For this, I have written the following code:

<form name="form1">
  <input type="hidden" name="sq[]" ></input>
  <input type="hidden" name="a" ></input>
</form>

And in the Javascript function:

function myfunction()
{
  document.form1.a.value=i; // Here, I can access the variable 'a'
                            // (since a is not in the form of array)
  var i;
  for(i=0;i<4;i++)
  {
    document.form1.sq[i].value=i; // Here, I am not able to access array named sq[].
  }
}

Sounds like you're thinking in terms of PHP instead of JavaScript. — j08691
– j08691, Commented Sep 15, 2014 at 20:55
This is not how javascript works. You have not declared an array and you can't access DOM elements like that. — Matt R
– Matt R, Commented Sep 15, 2014 at 20:57
@j08691 , i want to use this function to modify the same web page by taking the another values (at the place of i) from different form of the same page. i don't want to use this in terms of php. — PRASHANT KUMAR
– PRASHANT KUMAR, Commented Sep 15, 2014 at 21:12
@MattR, suggest me the method to access DOM element. but one thing i want to specify here that it is working correctly in the simple case i.e. when i am trying to access "a" in the above question , it works correctly. — PRASHANT KUMAR
– PRASHANT KUMAR, Commented Sep 15, 2014 at 21:15

FishBasketGordo · Accepted Answer · 2014-09-15 21:19:53Z

6

Naming a hidden input sq[] doesn't change it into an array. It's still just a text field essentially. You will need to access the field and parse the value as a comma-separated list (or JSON or whatever format you choose).

Assuming you have a form like so:

<form name="form1">
  <input type="hidden" name="sq[]" value="a,b,c,d" />
  <input type="hidden" name="sqjson[]" value='["e","f","g","h"]' />
</form>

You can access the values using split ^[MDN]:

var arr = document.form1['sq[]'].value.split(',');
for (var ii = 0; ii < arr.length; ii++) {
    console.log(arr[ii]);
}

Or using JSON.parse ^[MDN], which would make more complex objects easier to store in a hidden field:

var arr = JSON.parse(document.form1['sqjson[]'].value);
for (var ii = 0; ii < arr.length; ii++) {
    console.log(arr[ii]);
}

Click here for a working version of this example.

edited Sep 15, 2014 at 21:19

answered Sep 15, 2014 at 20:57

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

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

Comments

Francois · Accepted Answer · 2014-09-16 07:11:49Z

3

You can store sq array in JSON format in the hidden field.

<input type="hidden" name="sq" value="[]" ></input>

Then using JSON.parse and JSON.stringify you can deserialize from string value to memory object, add/remove values in the array, then storing it back to the hidden field.

var $sq = JSON.parse($("#sq").val());
...
$("#sq").val(JSON.stringify($sq);

Without JQuery:

var hf = document.getElementById("sq");
var sq = JSON.parse(hf.value);
...
hf.value = JSON.stringify(sq);

Then you can pass sq as parameter to functions where needed. Or store it in global variable.

edited Sep 16, 2014 at 7:11

answered Sep 15, 2014 at 20:57

Francois

11k9 gold badges53 silver badges81 bronze badges

2 Comments

FishBasketGordo Over a year ago

This solution requires jQuery, which the OP does not appear to be using.

PRASHANT KUMAR Over a year ago

@Francois B. i want to first initialize the array and than use this to modify the webpage(by using document.getElementById("id_of_div").innerHTML=sq[i]) in another function.

Collectives™ on Stack Overflow

How can I access an array declared in an HTML hidden input from a Javascript function?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related