Передача пользовательских атрибутов html5 формы в JSON - PullRequest
Новая
       15

Передача пользовательских атрибутов html5 формы в JSON

1 голос
/ 03 мая 2019

Это 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>

Это JavaScript, который извлекает форму в JSON и записывает ее в консоль, и она работает. 

//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-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"}

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Если вы хотите добавить данные в форму, вы можете использовать скрытый ввод и установить значение с помощью js

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

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

0 голосов
/ 03 мая 2019

Если вы хотите извлечь атрибуты данных из 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)

...