Jquery Select Multi divs

Question

Hi I want select all input and write in input character but the code I wrote only selects the first input.

$('.select').keyup(function () { 
 
  var len = $('.myinput').val().length; 

    $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Element IDs should be unique within the entire document. ids contain only first div element. So even if there are multiple elements with the same id, the document object will return only first match. https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme — Saif, Jun 18 '18 at 19:47
Well he is going to need a little more than that because val().length will just return the first instance.... but yes, to start, you need to update the query selectors and turn the ID prop into a class — Fallenreaper, Jun 18 '18 at 19:48

dhaker · Accepted Answer · 2018-06-18T20:13:06.880

Loop over all input elements with class="myinput" and sum over length of value of input

$('.select').keyup(function () { 
   var len= 0;
   
$('.myinput').each(function(){
    len += this.value.length;
});
  
  $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Md Johirul Islam · Answer 2 · 2018-06-18T20:14:11.527

You can try the following code. The code changes all id = "myinput" to class = "myinput". Then inside the keyup event all those input fields with class myinput are selected and an .each loop is used to compute the length of all the characters in the input fields. And finally, the div is updated with the new length.

$('.select').keyup(function () {
  let len = 0;
  $('.myinput').each( (i,v) => {
     len += $(v).val().length;
  }); 
  $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
</div>
<div class="val">
</div>

Down vote retracted. Just because it's a working answer, doesn't mean it is the best one. Anyone can give code as an answer. Explaining the code means the OP may learn something, or anyone else seeing this answer 10 years down the line. Give a man a fish..... — Cjmarkham, Jun 18 '18 at 20:57

Saif · Answer 3 · 2018-06-18T20:15:03.257

You need to calculate the length from each of the elements, for that you can use .each() to increment len as required.

It is better to use class instead of id. As it id will only return the first element in the document.

$('.select').keyup(function() {
    var len = 0;

    $('.myinput').each(function() {

        len += $(this).val().length;

    });

    $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Here is a working example. https://jsfiddle.net/xk6q81rd/11/

Please post your code example in the answer, not a link which could expire in the future. — Cjmarkham, Jun 18 '18 at 20:11

Jquery Select Multi divs

3 Answers3