jQuery + Iterate elements and return values inside div

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.

what about using the jquery [`.serialize()`](http://api.jquery.com/serialize/)? — JMax, Sep 14 '11 at 14:48
Can you put that free text ('ISBN', 'Title', etc) in a span? Much easier to dig it out that way. — sje397, Sep 14 '11 at 14:48

Sahil Muthoo · Accepted Answer · 2011-09-14T15:03:20.570

2

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.

edited Sep 14 '11 at 15:03

answered Sep 14 '11 at 14:48

Sahil Muthoo

12,033
2
29
38

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

the best way to do this is by sending all values as a json object/json string (which sounds less scarry).

have a look at the correct answer here

edited May 23 '17 at 12:12

Community

1
1

answered Sep 14 '11 at 14:51

kasper Taeymans

6,950
5
32
51

jQuery + Iterate elements and return values inside div

2 Answers2