I am trying to open a Pop up Model in for loop for every instance but the pop up model is opening for first instance But is not opening for other instances. I am using Django in template loop.
template.html
{% for comment in comments %}
<button id="ModelButton">Open Model</button>
<div id="Model" class="flagModel">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
<script>
var formModel= document.getElementById("Model");
var formButton = document.getElementById("ModelButton");
formButton .onclick = function () {
formModel.style.display = "block";
}
window.onclick = function (event) {
if (event.target == formModel) {
formModel.style.display = "none";
}
}
</script>
{% endfor %}
When I Place the JavaScript outside the for loop then it doesn't even work for one.
I have tried many times but it is still not working. Any help would be much Appreciated. Thank You
Specify unique IDs to the modals and pass the id number to a single function to open form modals on click of their respective buttons.
{% for comment in comments %}
<button onclick="openModal({{forloop.counter}})">
Open Model
</button>
<div id="Modal-{{forloop.counter}}" class="flagModel">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
{% endfor %}
<script>
function openModal(id) {
var formModal = document.getElementById(`Modal-${id}`);
if (formModal) {
formModal.style.display = "block";
}
}
window.onclick = function (event) {
if (event.target == formModel) {
formModel.style.display = "none";
}
}
</script>
The id should be unique on a page, you should use class in loop instead of id,
Here I have updated your script that may help you
{% for comment in comments %}
<button class="ModelButton">Open Model</button>
<div class="flagModel Model">
<div class="modal-content">
<div class="modal-mod">
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form}}
<input type="submit">
</form>
</div>
</div>
</div>
</div>
<script>
var formButton = document.querySelectorAll(".ModelButton");
formButton.forEach(function(element) {
element.addEventListener('click', function(eventObj) {
var formModel = eventObj.currentTarget.nextElementSibling;
formModel.style.display = "block";
formModel.addEventListener('click', function(event) {
eventObj.currentTarget.style.display = "none";
});
})
});
</script>
{% endfor %}