Get all input values to javascript with the same id

Question

I just want to get all different values using javascript with the same id.

Here is my input.

Here is my input code:

<input type="text" id="full" name="full" value="2018-12-06">
<input type="text" id="full" name="full" value="2018-12-14">
<input type="text" id="full" name="full" value="2018-12-18">

When I alert the id of the inputs it show's the 2018-12-06 only. I want to disable the jquery datepicker but the 2018-12-06 is the only one read.

Here is my calendar.

and my javascript code:

var x = (document.getElementById('full').value);

var array = ["2018-12-25", "2019-01-01", x]

I want to disable all value with same id like the mention above,

You can't. IDs need to be unique. Add a class to each and use getElementsByClassName instead. — Andy
– Andy, Commented Dec 12, 2018 at 17:19
omg! this my original code echo "<input type='text' id='full' name='full' value=" . $row['date'] . " >"; — Kiel Dred
– Kiel Dred, Commented Dec 12, 2018 at 17:20
Not really a solution if there are other inputs without those IDs. — Andy
– Andy, Commented Dec 12, 2018 at 17:21
@Andy- of-course. The OP will need to massage this into a solution that works for them (otherwise I would have put this into an answer). If the OP wants to identify some constraints then we can be more precise. — Randy Casburn
– Randy Casburn, Commented Dec 12, 2018 at 17:22

Andy · Accepted Answer · 2021-11-29 15:24:58Z

3

IDs must be unique. You should add a class to each element and then use getElementsByClassName.

Because the method returns a nodelist to get each input value you need to iterate over it. For both these examples I've used map, but you might find a for/loop or forEach easier to use.

const full = document.getElementsByClassName('full');
const arr = [...full].map(input => input.value);

console.log(arr);

<input type="text" class="full" value="2018-12-06">
<input type="text" class="full" value="2018-12-14">
<input type="text" class="full" value="2018-12-18">

An alternative might be to use querySelectorAll. This uses CSS selectors so you can pinpoint elements by their attributes instead:

const full = document.querySelectorAll('[name="full"]');
const arr = [...full].map(input => input.value);

console.log(arr);

<input type="text" name="full" value="2018-12-06">
<input type="text" name="full" value="2018-12-14">
<input type="text" name="full" value="2018-12-18">

edited Nov 29, 2021 at 15:24

answered Dec 12, 2018 at 17:28

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kiel Dred Over a year ago

document.getElementsByClassName('full'); doesn't work for me

Marie Over a year ago

If you dont want other people to edit your answer you should take the time to proofread it better before you post it. Of course that would cut into your "first answer" rep

Andy Over a year ago

You could just make a comment rather than fix something I'm already fixing.

Marie Over a year ago

@KielDred className is not the same thing as name. In your snippet full is the name, not the class.

Marie Over a year ago

@Andy I am not the one editing your answer. and you could just proofread your answer before posting it. You rush an answer out, you deal with community moderation moderating the community.

|

Prasad Telkikar · Accepted Answer · 2018-12-13 03:06:48Z

1

ID is used as an individual identifier. So it is illegal to use same Id for multiple elements. To get values of multiple elements use class instead of id. You can use getElementsByClassName() function to read values of all elements with same class name

Alternative to getElementsByClassName() using jQuery

var l = $('.full').length;
//Initialize default array
var result = [];
for (i = 0; i < l; i++) { 
  //Push each element to the array
  result.push($('.full').eq(i).val());
}
//print the array or use it for your further logic
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="full" value="2018-12-06">
<input type="text" class="full" value="2018-12-14">
<input type="text" class="full" value="2018-12-18">

edited Dec 13, 2018 at 3:06

answered Dec 12, 2018 at 17:27

Prasad Telkikar

16.1k7 gold badges26 silver badges49 bronze badges

7 Comments

gilbert-v Over a year ago

getElementsByClassName is undefined in IE 3. Do not use.

Marie Over a year ago

@gilbert-v Are you serious?

Marie Over a year ago

@PrasadTelkikar I was asking gilbert if they were serious because nobody in their right mind should care what IE 3 supports

Prasad Telkikar Over a year ago

@Marie, I request you to delete unnecessary comments, because it misleads other users of stackoverflow. Keep useful comments

Kiel Dred Over a year ago

thanks code works well! sorry for late reply just got home from school

|

Sylvan LE DEUNFF · Accepted Answer · 2018-12-12 17:30:32Z

0

You can't create an element with the same Id, If you want to get all different values from another element using javascript you can use ClassName

<input type="text" class="full" name="full" value="2018-12-06">
<input type="text" class="full" name="full" value="2018-12-14">
<input type="text" class="full" name="full" value="2018-12-18">

var x = document.getElementsByClassName('full');

edited Dec 12, 2018 at 17:30

Sylvan LE DEUNFF

7121 gold badge7 silver badges21 bronze badges

answered Dec 12, 2018 at 17:24

Binh LE

3775 silver badges17 bronze badges

3 Comments

Randy Casburn Over a year ago

there is no method .getElementByClassName()

Andy Over a year ago

Class="full" also has a typo.

mplungjan Over a year ago

getElementsByClassName - but querySelectorAll is a better choice

Collectives™ on Stack Overflow

Get all input values to javascript with the same id

3 Answers 3

10 Comments

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related