Storing key value pair in array

Question

Here is my html input elements

<div class="form-group">
  <div class="col-lg-6">
     <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value"/>
  </div>
</div>

<div class="form-group">
  <div class="col-lg-6">
     <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value"/>
  </div>
</div>

How can I get all 'Key' and 'Value' pair and save them to array using Jquery? Like this result =[ {'Key' : 'Value'}, {'Key' : 'Value'} ];

Answer 1

I myself am learning javascript and jQuery, but since you haven't shown any concrete attempt and getting a solution, I can describe how to go about getting what I think you want done. I am working based on what I've already seen in jQuery, not much compared to a lot of eyes that visit this site, and did some googling myself to confirm some things. That said, here is a description of how I think I can arrive at your desired result.

Here is an example as text to help you get through your example. Since you have each pair of inputs in a div with a consistent class name, you can lookup all elements for that class with $(".form-group") . Once you have your array of pairs, you can take things to the next level. Next you can use jQuery's each() function to iterate over the contents of the array. For each element of the array you can use the find() function to find the inputs with a name "Key" and "Value". At that point you can populate your JSON array.

Answer 2

I've made you a basic fiddle ;

so basically using jQuery's each() function you can loop through your form-groups and get the key and values and push them into your array.

 //defining your empty array here var arr = []; //setting up the click function to return your array in console. $('.cnsllog').on('click', function() { //go through all the form groups $('.form-group').each(function() { //set the input with name equal to value as value variable value = $(this).find("input[name='Value']").val() //set the input with name equal to Keyas value Key key = $(this).find("input[name='Key']").val() //push these two variables to your array arr.push({ key: key, value: value }) }); console.log(arr) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="form-group"> <div class="col-lg-6"> <input type="text" name="Key" class="form-control" placeholder="Key"> </div> <div class="col-lg-6"> <input type="text" name="Value" class="form-control" placeholder="Value" /> </div> </div> <div class="form-group"> <div class="col-lg-6"> <input type="text" name="Key" class="form-control" placeholder="Key"> </div> <div class="col-lg-6"> <input type="text" name="Value" class="form-control" placeholder="Value" /> </div> </div> <button class="cnsllog">put the array in console</button>