'Looped forms in EJS won't enable
a EJS newbie here.
I'm building a simple update application where just a single row in a Mongodb table is being updated. I'm looping a form 3 times (for each table in my database). I have a like button (✔) in my form witch is suppost to enable the textfield and the submit button when its pressed (both of there are disabled by default). This somehow only works on the first form thats being looped, and not with the other two forms.
My loop:
<ul>
<% auto.forEach(function(auto){ %>
<div>
<div class="mijndiv">
<form action="/index" method="post" name="doeBod">
<div class="buttons">
<div class="cardcontainer">
<h2><%= auto.naam %></h2>
<p><%= auto.bouwjaar %></p>
<p><%= auto.kmstand %> Kilometer</p>
<div class="card"><img src="pug.png" width="250px"></div>
<button class="but-nope" type="button">X</button>
<button class="but-yay" id="like" name="like" value="1" type="button" onclick="knoppenAanzetten(like)">✔</button>
</div>
</div>
<input id="bod" type="text" name="bod" disabled="disabled" value=" <%= auto.bod %>">
<input id="BodKnop" type="submit" name="submit" disabled="disabled">
</form>
</div>
<% }); %>
</ul>
My Javascript:
<script>
//Listens to the likebutton (✔), the textfield and the submitbutton.
//Both the textfield and submitbutton are enabled when the likebutton is clicked.
const likeKnop = document.getElementById("like");
const bodKnop = document.getElementById("bod");
const submitKnop = document.getElementById("BodKnop");
function knoppenAanzetten(like) {
document.getElementById("bod").disabled = false;
document.getElementById("BodKnop").disabled = false;
}
</script>
I tried to change document.getElementById to document.getElementByClassName, but this doesn't solve the issue. I think it might have something to do with the way the form might be looped, I dunno. Can someone give me a bit more insight? Thanks in advance!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
