Home » Jquery » javascript – How to fetch the input elements value by class name in jquery

javascript – How to fetch the input elements value by class name in jquery

Posted by: admin February 22, 2020 Leave a comment

Questions:

I want to fetch input elements value, they have class “features”. I can access all of them

alert($(‘.features’).length);

Correct me if I am wrong, $(‘.features’) is an array of html input elements.But I tried

Array.isArray($(‘.features’)) // returned false

I want to access the value of each element . How to achieve this
I tried to do one and below is the code snippet

function maintest() {

 for(i = 0 ; i < 5 ; i ++ ) {
  $("<input>").attr({"class":"features"}).appendTo("#mainDiv").val("input"+i);
  $("<br/><br/>").appendTo("#mainDiv");
 }
  
  $("<button> Click me! </button>").click(function() {
  let inputArray = [];
  inputArray = $('.features');
  alert(inputArray.length);
    //alert( inputArray[0].val());
    //what must be put here to see the data value
  }).appendTo("#mainDiv");
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>
How to&Answer:

In javascript, setting a variable to a value overwrites the previous value. It doesn’t enforce the type, so these lines:

let inputArray = [];
inputArray = $('.features');

is the same as

let inputArray = $('.features');

$() returns a jquery collection, not a javascript array; there are, of course, similarities, but it’s not an “array”.

To get the values out you can loop through the collection or you can use .map to extract values, eg:

var valuesArray = $('.features').map(function() {
                      return $(this).val();
                  }).toArray();
function maintest() {

  for (i = 0; i < 5; i++) {
    $("<input>").attr({ "class": "features" })
        .appendTo("#mainDiv")
        .val("input" + i);
    $("<br/><br/>").appendTo("#mainDiv");
  }

  $("<button> Click me! </button>").click(function() {
    let inputArray = $('.features');
    var values = inputArray.map(function() {
      return $(this).val();
    }).toArray();
    console.log(values);
  }).appendTo("#mainDiv");
}

$(() => maintest());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>

Answer:

You could loop over the input array using jQuery $.each method.

Example:

function maintest() {
  for (i = 0; i < 5; i++) {
$("<input>")
  .attr({ class: "features" })
  .appendTo("#mainDiv")
  .val("input" + i);
$("<br/><br/>").appendTo("#mainDiv");
  }

  $("<button> Click me! </button>")
.click(function() {
  let inputArray = [];
  inputArray = $(".features");
  $.each(inputArray, function(index, input) {
    console.log(input.value);
  });
})
.appendTo("#mainDiv");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>