CODEWITHSUNDEEP
javascriptjqueryhtml
karansys
karansys

Reputation: 2729

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

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>

Upvotes: 0

Views: 94

Answers (2)

Sohail Ashraf
Sohail Ashraf

Reputation: 10604

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>

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28621

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>

Upvotes: 3

Related Questions