[英]Pass html5 form custom attributes to JSON
這是我為注冊頁面創建的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"}
如果您想從html元素中提取數據屬性,並且已經在使用jQuery設置它們,我想以下可能是您想要的。 (不確定您的問題是否是您想要的結果)如果可能的話,您可以進一步解釋一下嗎?
請在下面查看我的意思的示例。
首先,請說以下是您的注冊表。
<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)
如果要向表單添加數據,則可以使用隱藏的輸入並通過js設置值
HTML <input type="hidden" name="beatportID">
JS $('[name="beatportID"]').attr('value', 'my data');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.