gpt4 book ai didi

javascript - 如何保存与其字段标签关联的输入?

转载 作者:行者123 更新时间:2023-11-28 14:10:53 24 4
gpt4 key购买 nike

以下脚本根据字符串数组生成一系列输入字段。我想要的是有一个按钮可以保存与字段名称关联的输入。因此 ['loren'、'ipsum'、'plumpus'、'dumbas'] 可能与输入 [bingo、bango、bongo、bungo] 相关联。也许作为一个元组[loren:bingo,ipsum:bango,plumbus:bongo,dumbas:bungo]?我真的不确定执行此操作的最佳方法。

<html>
<head>

</head>
<body>
<div id="container"/>


<script type='text/javascript'>
function addFields(){
var fieldNames = ['loren', 'ipsum', 'plumpus', 'dumbas'];
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}

for (i=0;i<fieldNames.length;i++){
// Append a node with a random text
container.appendChild(document.createTextNode(fieldNames[i]));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = fieldNames[i];
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
addFields();
</script>

</body>
</html>

最佳答案

如果您使用 jQuery,则可以在 form 元素上使用名为 serializeArray() 的出色函数。

要保留这个普通的 js:

  1. 我将您的字段数组移到了函数之外。
  2. 添加了一个名为“获取值”的按钮
  3. 添加了 onclick 来循环遍历您的字段并将其添加到 JavaScript 对象。

这是 onclick 函数:

document.getElementById('getValues').addEventListener('click', function () {
var values = {};

for (let i = 0; i < fieldNames.length; i++) {
const element = fieldNames[i];
values[fieldNames[i]] = document.getElementsByName(fieldNames[i])[0].value;
});

console.log(values);
}

片段:

<html>

<head>

</head>

<body>
<div id="container"></div>
<input id="getValues" type="button" value="Get Values" />

<script type='text/javascript'>
var fieldNames = ['loren', 'ipsum', 'plumpus', 'dumbas'];

function addFields() {
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}

for (i = 0; i < fieldNames.length; i++) {
// Append a node with a random text
container.appendChild(document.createTextNode(fieldNames[i]));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = fieldNames[i];
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}

addFields();

document.getElementById('getValues').addEventListener('click', function () {
var values = {};

for (let i = 0; i < fieldNames.length; i++) {
const element = fieldNames[i];
values[fieldNames[i]] = document.getElementsByName(fieldNames[i])[0].value;
}

console.log(values);
});
</script>

</body>

</html>

关于javascript - 如何保存与其字段标签关联的输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59537857/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com