把JS数组赋值给表单里的字段

在实际开发中，我们经常需要将 JavaScript 数组的值提交到表单中。本文介绍如何将一个 JS 数组 selectedTextArray 赋值给表单中的隐藏字段，以便在提交时传输到服务器。

1. HTML 结构

我们使用一个 ID 为 form 的表单，并在 onclick 事件中调用 update() 方法来动态添加隐藏字段。

<form class="form-horizontal" id="form" action="/role-permission/update/{{ $role->id }}" method="post">
    @csrf
    <div class="box-body">                  
        <div class="form-group">
            <div class="col-sm-12">
                <div id="tree"></div>
            </div>
        </div>         
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary pull-right" onclick="return update();">保存</button>
    </div>
</form>

2. JavaScript 代码

在 update() 方法中，我们遍历 selectedTextArray 数组，并动态创建 input 隐藏字段，将其添加到表单中。

function update() {
    // 假设 selectedTextArray 是一个已有的数组
    let selectedTextArray = ["read", "write", "execute"]; // 示例数据
    
    let form = document.getElementById("form");
    
    // 清除已有的隐藏字段，避免重复提交
    document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove());
    
    // 遍历数组并创建隐藏字段
    for (let i = 0; i < selectedTextArray.length; i++) {
        let item = document.createElement("input");
        item.type = "hidden";
        item.name = "permissions_array[]";
        item.value = selectedTextArray[i];  
        form.appendChild(item);
    }

    return true; // 允许表单提交
}

3. 关键点解析

item.name = "permissions_array[]"; 这一行代码的作用是确保数据以数组的形式提交到服务器。
document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove()); 这行代码确保每次点击提交按钮时都会清除先前的隐藏字段，避免重复数据。
通过 appendChild(item); 将新创建的隐藏 input 字段添加到表单中。

4. 提交到服务器的示例数据

假设 selectedTextArray 包含 ["read", "write", "execute"]，提交后服务器接收到的数据格式如下：

{
    "permissions_array": ["read", "write", "execute"]
}

5. 结论

通过 JavaScript，我们可以动态地为表单添加隐藏字段，并将数组数据以正确的格式提交到服务器。这样可以方便地传输多选数据，如权限管理、标签选择等场景。

发表回复取消回复