Get input values in a form, relative to a button

Question

I have forms similar to this:

<form class="submission-form" method="POST" action="/post/create/">
  <input type="text" name="title">
  <textarea name="post_content"></textarea>
  <select name="visibility" class="form-control">
    <option value="1">Public</option>
    <option value="2">Private</option>
  </select>
  <input class="submit-button" type="button" value="Publish">
</form>

The various fields in the form are not known beforehand and can change; what is known is the fact that every form that needs processing has a submission-form class on it, and it contains a button with the class submit-button.

I'm trying to add an event listener on the input.submit-button that will traverse on the form its contained in, find all the fields, and create an object from it. For example, in the above case, the object created might look like:

{
  title: "My first post",
  post_content: "Hello there!",
  visibility: 1
}

How should I go about doing this?

Do you really need an object? Or is anything that can be used as the `data:` option to `$.ajax()` OK? — Barmar, Sep 18 '16 at 09:24
`$(this).closest(".submission-form").serialize()` will return a URL-encoded string. — Barmar, Sep 18 '16 at 09:25
Someone created a plugin that handles some of the edge cases better than the solutions listed here: https://github.com/macek/jquery-serialize-object — RutledgePaulV, Sep 18 '16 at 09:40
Possible duplicate of [Convert form data to JavaScript object with jQuery](http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — RutledgePaulV, Sep 18 '16 at 09:44

Alex Char · Accepted Answer · 2016-09-18T09:33:37.450

Iterate through input, textarea and select elements and create an object with properties from element name and value:

$('.submit-button').on('click', function() {
  var o = {};
  $(this).closest('form')
    .find('input, textarea, select')
    .not(':button')
    .each(function() {
      o[$(this).attr('name')] = $(this).val()
    });
  console.log(o);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form" method="POST" action="/post/create/">
  <input type="text" name="title" />
  <textarea name="post_content"></textarea>
  <select name="visibility" class="form-control">
    <option value="1">Public</option>
    <option value="2">Private</option>
  </select>
  <input class="submit-button" type="button" value="Publish" />
</form>

References

.closest()

.not()

.each

`.closest()` is better than `.parents()`. It stops as soon as it finds the first match, instead of searching the entire DOM hierarchy. — Barmar, Sep 18 '16 at 09:26
@Barmar In DOM structure like this one doesn't really matter. In any case closest is faster so I replaced it :) — Alex Char, Sep 18 '16 at 09:29

score 0 · Answer 2 · answered Sep 18 '16 at 09:31

You could use serializeArray() and then use reduce() on that array to return desired object.

$("form").submit(function(event) {
  var data = $(this).serializeArray().reduce(function(r, e) {
    r[e.name] = e.value;
    return r;
  }, {})
  console.log(data)
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form">
  <input type="text" name="title">
  <textarea name="post_content"></textarea>
  <select name="visibility" class="form-control">
    <option value="1">Public</option>
    <option value="2">Private</option>
  </select>
  <input class="submit-button" type="submit" value="Publish">
</form>

score 0 · Answer 3 · answered Sep 18 '16 at 09:35

Use serializeArray() to create and array of objects for name value pairs and loop through them to create a single object.

$('form').submit(function(e){
  e.preventDefault();
  var obj = $(this).serializeArray()
  
  var final= {};
  $.each(obj, function(index,object){
    
      final[object.name] = object.value;
    
  });
  console.log(final);
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="submission-form" method="POST" action="/post/create/">
  <input type="text" name="title">
  <textarea name="post_content"></textarea>
  <select name="visibility" class="form-control">
    <option value="1">Public</option>
    <option value="2">Private</option>
  </select>
  <input class="submit-button" type="submit" value="Publish">
</form>

Get input values in a form, relative to a button

3 Answers3