Based on what I learned and what I read here on Stack as well, I wrote a code that should get all the values of a specified class of input and pushing them into an array.

What I think this jQuery sript should do is:

• create an empty array called myArray
• when #subButton is clicked an iteration on the <input class=".req" starts, pushing the value of each <input class=".req" into myArray

The problem is that anything is displayed in the console, as nothing happened, so I guess there's a conceptual/writing error.

jQuery :

$(document).ready(function(){

    var myArray = [];
    $('#subButton').on('click', function() {
        $('.req').each(function() {
            myArray.push($(this).val()); 
            console.log(myArray);
        });
    });     

});

HTML :

<form id="iForm">
  <input type="text" id="i1" class=".req" placeholder="Name">
  <input type="text" id="i2" placeholder="Surname">
  <input type="text" id="i3" placeholder="Text A">
  <input type="text" id="i4" class=".req" placeholder="Text B">

  <input type="button" id="subButton" value="Registrati">
</form>

Based on what I learned and what I read here on Stack as well, I wrote a code that should get all the values of a specified class of input and pushing them into an array.

What I think this jQuery sript should do is:

• create an empty array called myArray
• when #subButton is clicked an iteration on the <input class=".req" starts, pushing the value of each <input class=".req" into myArray

The problem is that anything is displayed in the console, as nothing happened, so I guess there's a conceptual/writing error.

jQuery :

$(document).ready(function(){

    var myArray = [];
    $('#subButton').on('click', function() {
        $('.req').each(function() {
            myArray.push($(this).val()); 
            console.log(myArray);
        });
    });     

});

HTML :

<form id="iForm">
  <input type="text" id="i1" class=".req" placeholder="Name">
  <input type="text" id="i2" placeholder="Surname">
  <input type="text" id="i3" placeholder="Text A">
  <input type="text" id="i4" class=".req" placeholder="Text B">

  <input type="button" id="subButton" value="Registrati">
</form>

• javascript
• jquery

Share Improve this question Follow edited Dec 19, 2016 at 14:49 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Dec 19, 2016 at 14:44 BrigoBrigo 1,11211 gold badge1212 silver badges3636 bronze badges 1

• 2 you have ".req" as your className. it should be "req" – Stephen Burke Commented Dec 19, 2016 at 14:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You've to remove the . before the classes in your HTML inputs :

<input type="text" id="i1" class=".req" placeholder="Name">
__________________________________^
<input type="text" id="i4" class=".req" placeholder="Text B">
__________________________________^

Should be :

<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i4" class="req" placeholder="Text B">

Hope this helps.

$(document).ready(function(){

  var myArray = [];
  $('#subButton').on('click', function() {
    $('.req').each(function() {
      myArray.push($(this).val()); 
      console.log(myArray);
    });
  });     

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="iForm">
  <input type="text" id="i1" class="req" placeholder="Name">
  <input type="text" id="i2" placeholder="Surname">
  <input type="text" id="i3" placeholder="Text A">
  <input type="text" id="i4" class="req" placeholder="Text B">

  <input type="button" id="subButton" value="Registrati">
</form>

Having fixed your class attributes to remove the leading period character, you can use:

var myArray = $('.req').get().map(function(el) { return el.value });

Where $(...).get() converts the jQuery collection into a standard array, and .map extracts the field values.

This is somewhat cleaner than using .each with a push.