How can I get through javascript all the elements of the same id and apply the same value to all of them?
Below is my form. It's a loop that creates 71 subdivs and every one of them contain a specific button image and hidden inputs. Every one of the inputs it's supposed to have the same name and id as the other 70.
If I make the input visible and put $i as a value , when page loads it shows everything correct. 71 images with 71 different values. Although if I submit that way I alwats get the same value on my controller no matter the image I choose to click on.
So I want to add to my onMouseOver function a way to set the current value of the hovered image to all the inputs. That way if I click on image to submit the value would have been set correct.
My form:
<form action="/searches/se_racestandingsround" method="post">@csrf
<div class="row mt-5 mr-5 ml-5">
<?php for($i=2021; $i>=1950; $i--){ ?>
<div class="col-3 d-flex flex-column align-items-center mb-3 mt-5">
<div class="w-50 mb-5 rounded-circle" style="height: 150px;">
<div class="bg-dark w-100 h-100 mb-5 border rounded-circle toClick" id="<?php echo $i ?>" onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">
<input type="hidden" name="round" id="round">
<input type="hidden" name="rnd" id="rnd">
<button style="object-fit:cover" class="w-100 h-100 border rounded-circle"><img src='/imgs/jpg/years/<?php echo $i ?>.jpg' style="object-fit:cover" class="w-100 h-100 border rounded-circle"></button>
</div>
</div>
</div>
<?php } ?>
</div>
</form>
My onMouseOver function:
function onMouseOver(year){
// alert("Hello! I am an alert box!!");
var curYear = year.id;
// document.getElementById('rnd').value = currentNumOfRounds; //NOT WORKING
// document.getElementById('round').value = curYear; //NOT WORKING
}
If you insist on using one id for multiple elements, then your only option is to use querySelectorAll:
setTimeout(() => {
document.querySelectorAll("#a").forEach(v => {
v.innerText = "what";
})
}, 3000);<p id="a">one</p>
<p id="a">two</p>
<p id="a">three</p>
<p id="a">four</p>But you really should be using classes instead.
all the elements of the same id an ID has to be unique within the document.
Having that said you theoretically could query for all elements with the same value for the id attribute using the attribute selector.
function setAllElementsTo(value) {
document.querySelectorAll('[id="a"]').forEach(element => {
element.value = value
})
}
setAllElementsTo('a');<input id="a">
<input id="a">
<input id="a">
<input id="a">
<input id="a">This works but does not change the fact that the document is semantically incorrect.
Instead, you should use different IDs and use something else that those elements have in common. Like a class, a data- attribute or what ever else makes sense.
To further the explanations, IDs are meant to be unique and only appear once on a page. This helps people who use screen readers and keeps your javascript clean. JS assumes you only have one instance of an ID on a page, so it will only return the first instance of it, which is likely why you always get the same value in your controller.
However, you should be able to use a Class instead to achieve what you're trying to do.