I am trying to get all values of a class input fields. but it is return only one fields value

Html code

<div id="mydiv">
<input class="seconds" type="text" value="40">
<input class="seconds" type="text" value="20">
<span class="countdown"></span>
</div>

Javascript code

<script src="{{ asset('js/vendor/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('js/jquery.missofis-countdown.js') }}"></script>


<script>

var ek=$('.seconds').val();

console.log(ek);
$( '.countdown' ).countdown( {
  from: ek, // 3 minutes (3*60)
  to: 0, // stop at zero
  movingUnit: 1000, // 1000 for 1 second increment/decrements
  timerEnd: undefined,
  outputPattern: '$day Day $hour : $minute : $second',
  autostart: true,
});
</script>

I want to get values of both input fields having same class

I am trying to get all values of a class input fields. but it is return only one fields value

Html code

<div id="mydiv">
<input class="seconds" type="text" value="40">
<input class="seconds" type="text" value="20">
<span class="countdown"></span>
</div>

Javascript code

<script src="{{ asset('js/vendor/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('js/jquery.missofis-countdown.js') }}"></script>


<script>

var ek=$('.seconds').val();

console.log(ek);
$( '.countdown' ).countdown( {
  from: ek, // 3 minutes (3*60)
  to: 0, // stop at zero
  movingUnit: 1000, // 1000 for 1 second increment/decrements
  timerEnd: undefined,
  outputPattern: '$day Day $hour : $minute : $second',
  autostart: true,
});
</script>

I want to get values of both input fields having same class

• javascript
• jquery
• countdowntimer

• Does this answer your question? Get all text field value located in a specific class – ahmedg Commented Aug 21, 2020 at 8:27

3 Answers 3

Use map() to create array of the values

var ek = $('.seconds').map((_,el) => el.value).get()

console.log(ek)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv">
<input class="seconds" type="text" value="40">
<input class="seconds" type="text" value="20">
<span class="countdown"></span>
</div>

Attribute methods will only ever get the value of the first element.

To get multiple you have to iterate( loop ) over every element returned by the selector.

var ek=[];
$('.seconds').each(function() { ek.push($(this).val()); });
console.log(ek);

Timers:

Make sure you add as many countdown spans as you want timers in your html.

$( '.countdown' ).each(function(index) { 
$(this).countdown( { from: ek[index], // 
3 minutes (3*60) 
to: 0, // stop at zero
 movingUnit: 1000, // 1000 for 1 second increment/decrements
 timerEnd: undefined, 
outputPattern: '$day Day $hour : $minute : $second',
 autostart: true, });
    });

Note: I apologize for formatting. I'm on mobile.

A more simplistic approach is:

$('.loadedDate').map(function(){return this.value;}).get()