如何从Javascript函数访问HTML隐藏输入中声明的数组

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

本文关键字：输入 声明 数组 隐藏 HTML Javascript 函数 访问      更新时间：2023-09-26

我在HTML表单的隐藏输入中声明了一个数组。现在我想在Javascript函数中访问该数组。为此，我编写了以下代码：

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

在Javascript函数中：

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[].
  }
}

命名隐藏输入sq[]不会将其更改为数组。它本质上仍然只是一个文本字段。您需要访问该字段，并将值解析为逗号分隔的列表（或JSON或您选择的任何格式）。

假设你有这样的表格：

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

您可以使用split[MDN]:访问值

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

或者使用JSON.parse[MDN]，这将使更复杂的对象更容易存储在隐藏字段中：

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

单击此处查看此示例的工作版本。

您可以在隐藏字段中存储JSON格式的sq数组。

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

然后使用JSON.parse和JSON.stringify，可以将字符串值反序列化为内存对象，在数组中添加/删除值，然后将其存储回隐藏字段。

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

无JQuery:

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

然后，您可以将sq作为参数传递给需要的函数。或者将其存储在全局变量中。

相关文章：