这是我为注册页面创建的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"}
您会发现两个新的attr缺少,当我添加它们时,输入如下:
<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"}
如果要将数据添加到表格中,则可以使用隐藏的输入并通过JS
设置值 html <input type="hidden" name="beatportID">
JS $('[name="beatportID"]').attr('value', 'my data');
如果您想从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)