Как сериализовать форму с атрибутами?

282
24 июня 2018, 06:10

Разрабатываю сайт на 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.

Answer 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>

READ ALSO
Создать динамический SQL запрос
Java

Создать динамический SQL запрос

Мне надо построить динамический SQL-запрос, по которому будет осуществляться поиск объектов в базе данныхПоиск должен производится по фильтру,...

 315
Перемещение между графиками Jfreechart
Java

Перемещение между графиками Jfreechart

Есть графики (до 100 штук), каждый график должен быть отдельно (то есть на экране по 1 линии), как можно реализовать перемещение между графиками?...

 273
ссылка на дженерик
Java

ссылка на дженерик

Почему такая запись функционирует? i2 уже ждет object в параметрах add, а не стрингиОт чего это происходит?

 272
Как передать информацию в аннотацию?
Java

Как передать информацию в аннотацию?

Использую кастомную аннотацию @Example("objectName"), которая переносит нужную информацию - "objectName"Задался спортивным вопросом - как в аннотацию передать...

 277