0

Разрабатываю сайт на php. В БД есть таблица со столбцами id и name. На php генерируется страничка с такой формой:

<form>
  <select name="fruits">
    <option db-id="1">Apple</option>
    <option db-id="2">Orange</option>
    <option db-id="3">Apple</option>
  </select>
  <input type="submit">
</form>

Теперь нужно как-то сериализовать данную форму чтобы отправить аяксом на сервер. До этого использовал эту функцию:

$( "form" ).submit(function( event ) {
    let formData = $("form").serializeArray();
    // Отправка данных с помощью fetch или $.ajax
    event.preventDefault();
});

Но таким образом не сериализуются атрибуты db-id. id элемента нужен для апи для идентификации элемента.

Эта форма сделана для примера. Реальная форма горазда больше и писать свой сериализатор немного затратно.

Может есть еще какие-нибудь другие библиотеки кроме jquery, которые позволили бы сериализовать элементы формы вместе с аттрибутами? Или есть другой способ хранить id элемента - не в атрибуте и затем также просто собирать данные в один объект?

Страница для теста на plnkr.co.

1 ответ 1

1

У option должен быть обязательный атрибут value, он и передаёт значение:

$('form').submit(function(event) {
  event.preventDefault();
  
  console.log($(this).serialize());
  
  // можно доставать значение и из атрибута, но такой подход в данном случае - "такое"
  console.log($(this).find('select option:selected').attr('db-id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="fruits">
    <option db-id="1" value="1" selected>Apple</option>
    <option db-id="2" value="2">Orange</option>
    <option db-id="3" value="3">Apple</option>
  </select>
  <input type="submit">
</form>

2
  • Просто интересно, а есть все таки способ сериализовать свои атрибуты?
    – pank
    3 июн 2018 в 20:25
  • Руками: data = 'db-id=' + $(this).find('select option:selected').attr('db-id') + ' и так далее. Но код будет с запашком
    – Kirill
    3 июн 2018 в 20:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.