Question

I have a div which has is something like:

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

Now, when I submit, I want to get all the values, so the result would be something like

ISBN-Is-sdasd;Title-Not-2323;Author-Is-445;ISBN-Not-12345;

Now the values are what are selected and/or typed.

Answer 1

Use .serialize(). Note that you must provide name attributes for form elements (the markup you posted doesn’t have name attributes).

Demo

Example

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

Now you just need to use the serialized form string as data in an ajax form post.