将 html5 表单自定义属性传递给 JSON

Question

这是我为注册页面创建的HTML

<form role="form" action="" method="post" id="register_form">
        <input type="text" id="facebook-autocomplete" name="facebook" class="form-control mdb-autocomplete GJ-search">
        <input type="text" id="beatport-autocomplete" name="beatport" class="form-control mdb-autocomplete GJ-search" required>
        <input type="email" id="inputValidationEmail" name="email" class="form-control" >
        <input type="password" id="inputValidationPass" name="password" class="form-control" >
        <input type="checkbox" class="custom-control-input" name="termsAndConditions" id="termsAndConditions" >
        <input type="checkbox" class="custom-control-input" name="gdprAccept" id="gdpr" >
        <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" value="Submit" type="submit">Sign up</button>
</form>

这是将表单提取到 JSON 并在控制台记录它的 JavaScript，它有效。

//stringify form to JSON string
const serialize_form = form => JSON.stringify(
    Array.from(new FormData(form).entries())
         .reduce((m, [ key, value ]) => Object.assign(m, { [key]: value }), {})
    );

$('#register_form').on('submit', function(event) {
    event.preventDefault();
    const json = serialize_form(this);
    console.log(json);
});

我通过添加此 jquery

向 beatport 输入添加了两个新属性

$('.beatport #beatport-autocomplete').attr('data-beatport-id', "id pulled from api");
$('.beatport #beatport-autocomplete').attr('data-beatport-name', "name pulled from api");

添加两个新属性后的Json结果是：

{"facebook":"big show","email":"dfghdfsghg@gmail.com","password":"fsdghfjgh","termsAndConditions":"on","gdprAccept":"on"}

您看到缺少两个新属性，当我添加它们时，输入如下所示：

<input type="text" id="beatport-autocomplete" name="beatport" class="form-control mdb-autocomplete GJ-search" required data-beatport-id="12345" data-beatport-name="artist name">

和 JSON 结果应该是这样的：

{"facebook":"big show","beatportId":"12345","beatportName":"artist name","email":"dfghdfsghg@gmail.com","password":"fsdghfjgh","termsAndConditions":"on","gdprAccept":"on"}

Answer 1

如果您正在寻找从 html 元素中提取数据属性，并且您已经在使用 jQuery 来设置它们，我认为以下内容可能是您正在寻找的。（从您的问题中不确定您想要的结果是什么）如果可能的话，您可以进一步解释一下吗？

https://api.jquery.com/data/

请在下面查看我的意思的示例。

首先假设以下是您的注册表。

<input type="text" id="name" />
<input type="text" id="email" />
<input type="text" id="phone" />
<input type="text" id="age" />

然后您可以添加您的两个数据属性来输入名称。

$('#name').attr('data-beatport-id', "id pulled from api");
$('#name').attr('data-beatport-name', "name pulled from api");

然后您可以 serialize_form 并将其添加到 json 变量。

let json = serialize_form(this);

然后使用以下命令从“#name”输入中获取数据属性。

json.beatport-name = $('#name').data("beatport-name")
json.beatport-id = $('#name').data("beatport-id")

然后您可以控制台记录此 json 对象。

console.log(json)

Answer 2

如果您想向表单添加数据，可以使用隐藏输入并通过 js 设置值

HTML <input type="hidden" name="beatportID">

JS $('[name="beatportID"]').attr('value', 'my data');

将 html5 表单自定义属性传递给 JSON

Pass html5 form custom attributes to JSON

html

javascript

json

form-data