JQuery: Combine sets of field names and values into an object and then push into an array

Question

I have a form with three sets of fields.

Like this:

 <form>
    <div class="food">
        <input type="text" name="" value="" />
        <input type="text" name="" value="" />
        <textarea name="" value=""></textarea>
    </div>

    <div class="drinks">
        <input type="text" name="" value="" />
        <input type="text" name="" value="" />
        <textarea name="" value=""></textarea>
    </div>

    <div class="gifts">
        <input type="text" name="" value="" />
        <input type="text" name="" value="" />
        <textarea name="" value=""></textarea>
    </div>
    </form>

How do I combine field names and values in each div into their own json object, push the objects into an array, and then add the array to a hidden input field before submission?

Could you explain some logic behind why you would want to do that ? I don't know why you would do all that and want to add it to a hidden field, because you can do all that on server side. And specify also which language you'd like to use (apparently jquery, but that's one client side) — Xogno, Apr 18 '17 at 09:11
I want to keep the fields grouped together before sending them to the database. Maybe I'm complicating this but I just need to keep the data together. — JsusSalv, Apr 18 '17 at 09:14
http://stackoverflow.com/questions/9073690/post-an-array-from-an-html-form-without-javascript — Mihai Alexandru-Ionut, Apr 18 '17 at 09:15
@JsusSalv Well you can do that on server side also. It will be easier and more efficient. What language are you using on server side ? — Xogno, Apr 18 '17 at 09:15
That would be great. No preference either way. Either JQuery or PHP is fine. — JsusSalv, Apr 18 '17 at 09:18
Check the link that Alexandru-IonutMihai posted, it should answer your question. If you need help, I could give you a working code example. (and please mention me in the comments with '@', otherwise I don't see you've answered me :-D ) — Xogno, Apr 18 '17 at 09:24

score 1 · Accepted Answer · answered Apr 18 '17 at 09:22

You can use map() and get() to create array and inside you can return object for each div.

var data = $('form > div').map(function() {
  var obj = {}
  $(this).find('input, textarea').each(function() {
    obj[$(this).attr('name')] = $(this).attr('value');
  })
  return obj;
}).get()

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="food">
    <input type="text" name="a" value="1" />
    <input type="text" name="b" value="11" />
    <textarea name="c" value="111"></textarea>
  </div>

  <div class="drinks">
    <input type="text" name="a" value="2" />
    <input type="text" name="b" value="22" />
    <textarea name="c" value="222"></textarea>
  </div>

  <div class="gifts">
    <input type="text" name="a" value="3" />
    <input type="text" name="b" value="33" />
    <textarea name="c" value="333"></textarea>
  </div>
</form>

Note that proper way is to get values is by `val` and textarea doesn't use value property instead https://jsfiddle.net/Lg0wyt9u/1805/ — Nenad Vracar, Apr 18 '17 at 09:30
ok. so check for field type and get .text() if it's textarea. — JsusSalv, Apr 18 '17 at 09:34
No just use `val()` but insert value like this `111` and when you change value on front-end it will get new value as you can see in jsfiddle — Nenad Vracar, Apr 18 '17 at 09:37

JQuery: Combine sets of field names and values into an object and then push into an array

1 Answers1