CODEWITHSUNDEEP
javascriptjqueryforms
user2064000
user2064000

Reputation:

Get input values in a form, relative to a button

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?

Upvotes: 3

Views: 63

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281734

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>

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

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

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 0

Related Questions