Get the value from HTML form using jquery

Question

I want to get the values if HTML form using jquery.
In my form here is two div info1 and info2 and in the jquery I have two variable store and store2
value of info1 is save in variable store and value of info2 is save in store2.
But here is the some error in the code due to this reason this is not run. see the code below.
Here is code:

<form>
      <div id="info1">
         <input type="text" />
         <input type="text" />
         <input type="text" />
      </div>
      <div id="info2">
         <input type="text" />
         <input type="text" />
      </div>
   <input type="button" id="btn" value="click" />
 </form>

JQUERY:

$(document).on('click','#btn',function(){
    var store = [];
    var store2 = [];
     $('#info1 :input[type="text"]').map(function(){
        var values = $(this).val();
       store.push({values:values});
          });
     $('#info2 :input[type="text"]').map(function(){
        var values = $(this).val();
       store2.push({values:values});
          });
     });

This code is not working. I think the error is here $('#info1 :input[type="text"]').
Please solve this.
Thankx.

Answer 1

Your code is working, to check the values in console, try this:

 $(document).on('click','#btn',function(){
     var store = [];
     var store2 = [];

     $('#info1 :input[type="text"]').map(function(){
        var values = $(this).val();
       store.push({values:values});
          });
     $('#info2 :input[type="text"]').map(function(){
        var values = $(this).val();
       store2.push({values:values});
          });

     console.log(store);
     console.log(store2); 
 });