使用其他输入值动态创建输入字段答案

【问题标题】：Creating a input field dynamically using other input values使用其他输入值动态创建输入字段
【发布时间】：2018-12-28 14:50:15
【问题描述】：

我有一个带有多个输入字段的 HTML 表单和一个名为“custom_1”的非常特殊的输入字段。

提交表单时（on或之前），其他输入字段中的所有值都应转换为JSON对象并设置为custom_1的值

如果值是预定义的，下面的代码可以达到我的预期。

 <?php
$json = array(
    'first_name' => 1,
    'last_name' => 1,
    'gender' => 1,
    'email' => 'myemail@gmail.com',
    'phone' => 345345431,
    'telephone' => '035w34538',
    'address' => 1,
    'country' => 1,
    'city' => 1,
    'postal_code' => 1,
    'dob' => '3333-03-03',
    'nic' => '333333333V',
    'course_provider' => 1,
    'course' => 1,
    'postal_code' => 10012
);

$custom_values = base64_encode(json_encode($json));
?>

<input type="hidden" name="custom_1" value="<?php echo $custom_values; ?>">

但问题是，应该创建这个数组并将值分配给表单提交时的 custom_1 字段。这意味着这些值不是预定义的，它们应该取自表单中的其他输入字段。

提交表单并获取单个帖子参数不是我所期望的。如上所述，所有参数都应包含在 custom_1 中。

【问题讨论】：

你有没有尝试过？ HTML 表单、onSubmit 处理程序等...

标签： javascript php arrays json

【解决方案1】：

使用 jquery 很简单（当然你也可以使用其他所有库）

这是一个快速代码sn-p：

https://codepen.io/YannickFricke/pen/EGwYgy

相关部分发生在这里：我们从 jQuery 中得到一个对象数组。我们需要遍历它们，以获取序列化输入字段的名称及其当前值。

然后我们将它们保存在一个对象中，该对象稍后将解码为 JSON，然后解码为 base64 值。

let serializedData = $(this).serializeArray();
let myData = {};
serializedData.forEach(function(element) {
    // We dont want to serialize the value of the "custom_1" input
    if (element.name === 'custom_1') {
      return;
    }

    // Set the data
    myData[element.name] = element.value;
});

在这部分之后，我们将对象编码为 json 并将其编码为 base64 字符串。

然后将base64编码的字符串设置为“custom_1”输入字段中的值。

【讨论】：