jQuery + Итерировать элементы и возвращать значения внутри div

Question

У меня есть div, который имеет что-то вроде:

<div class="items">
    <p class="item" id="isbn_123456">ISBN 
                  <select id="isbn_select" style="margin-left:15px">
                       <option value="is">Is</option>
                       <option value="not">Not</option>
                       <option value="like">Like</option>         
                  </select>
                  <input id="isbn_value" type="text" style="margin-left: 15px;">
                  <select id="isbn_join" style="margin-left:25px">
                       <option value="and">And</option>
                       <option value="or">Or</option>
                  </select>
            </p>
    <p class="item" id="title_123456">Title
                  <select id="title_select" style="margin-left:15px">
                       <option value="is">Is</option>
                       <option value="not">Not</option>
                       <option value="like">Like</option>         
                  </select>
                  <input id="title_value" type="text" style="margin-left: 15px;">
                  <select id="title_join" style="margin-left:25px">
                       <option value="and">And</option>
                       <option value="or">Or</option>
                  </select>
            </p>
    <p class="item" id="author_123456">Author
                  <select id="author_select" style="margin-left:15px">
                       <option value="is">Is</option>
                       <option value="not">Not</option>
                       <option value="like">Like</option>         
                  </select>
                  <input id="author_value" type="text" style="margin-left: 15px;">
                  <select id="author_join" style="margin-left:25px">
                       <option value="and">And</option>
                       <option value="or">Or</option>
                  </select>
            </p>


            <p class="item" id="isbn_456767">ISBN 
                  <select id="isbn_select" style="margin-left:15px">
                       <option value="is">Is</option>
                       <option value="not">Not</option>
                       <option value="like">Like</option>         
                  </select>
                  <input id="isbn_value" type="text" style="margin-left: 15px;">
                  <select id="isbn_join" style="margin-left:25px">
                       <option value="and">And</option>
                       <option value="or">Or</option>
                  </select>
            </p>
</div>

Теперь, когда я отправляю, я хочу получить все значения, поэтому результат будет примерно таким:

ISBN-Is-sdasd; Заголовок-Not-2323, Автор-Is-445, ISBN-Not-12345;

Теперь значения выбираются и / или вводятся.

Answer 1

Использование .serialize().Обратите внимание, что вы должны предоставить name атрибуты для элементов формы (разметка, которую вы разместили, не имеет name атрибутов).

Демо

Пример

$('form').submit(function() {
    $('#data').html($(this).serialize());
    return false;
});

Теперь вам просто нужно использовать сериализованную строку формы в качестве данных в записи формы ajax.

Answer 2

лучший способ сделать это - отправить все значения в виде объекта json / строки json (что звучит менее страшно).

взгляните на правильный ответ здесь