Modal is not working for series of button - javascript

I have created series of button in table field. Now, since the id for all the button is same I want the modal is work for all the button but it is working only for the first button.
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("mbutton");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
while ($row = $result->fetch_assoc()) {
$sl++;
echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td><td>"."<button id='mbutton'>Pay</button><button id='mbutton'>Report</button>"."</td></tr>";
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Pay to</h2>
</div>
<div class="modal-body">
<form>
<label>Payment Amount</label><br>
<input type="text" name="paymodal" placeholder="Amount"><br>
<input type="submit" name="smitModal">
</form>
</div>
</div>

id is unique attribute value for each element so that the document will only get the first element with corresponding id. You can use class instead.
var btn = document.getElementsByClassName("mbutton");

First of all, The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). So should never put same ID for every button.
If you use Jquery, you can try the answer above by Minh Duc, if not, please try to bind onclick to every button, or to the column contain it (because JS event is bubbling). You can try like this with your PHP code:
while ($row = $result->fetch_assoc()) {
$sl++;
echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td>
<td onclick="onclickHandler()">"."<button onclick="onclickHandler()" id='mbutton'>Pay</button><button onclick="onclickHandler()" id='mbutton'>Report</button>"."</td></tr>";
}
And at your script file, add:
function onclickHandler () {
modal.style.display = "block";
}
By this way the modal will display whenever you click any button in your table

In javascript portion of my code i'm first using id.Than when #Minh suggest to use class, i have use it and it's become an array which need to be indexing.
Instead all of these i'm just calling the function from button all the time(Which i don't think before asking the question)
<button id='mbutton' onclick=btn()>Pay</button>
and
function btn() {
modal.style.display = "block";
}

Related

Can you have multiple modals on one webpage?

I am making a website for an A-Level school project.
I want to have two buttons that each trigger their own modal to pop up. The code for each modal works when separated (ie. the modal shows then button is clicked and closes when x is clicked), however when I put both on the same page the first button (email modal) stops opening the modal.
I used the exact same code for each and only changed the button id and text as well as the div id for each section, so I'm not sure why this has resulted in a change.
<!DOCTYPE html>
<html>
<head>
<title> Business Owner </title>
</head>
<body>
<h1> Business homepage </h1>
<h3>Welcome Back!</h3>
<!--EMAIL POPUP-->
<button id = "btnEmailModal"> Email Inbox</button>
<div id="emailModal" class = "modal">
<span class = "close">×</span>
<div class = "modal-header">
<h2>Email Inbox</h2>
</div>
<div class = "modal-content">
<p>From: subscription#magazine.com<br>To: admin#business.com<br>Subject: New Subscription Successful!!</p>
<p>Dear ###,
Welcome to #########
</p>
</div>
</div>
<script>
var modal = document.getElementById("emailModal"); //calls the modal
var btn = document.getElementById("btnEmailModal"); //calls the modal button
var span = document.getElementsByClassName("close")[0]; //calls the span element that will close the modal
btn.onclick = function(){ //opens the modal when the button is clicked
modal.style.display = "block";
}
span.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event){
if (event.target == modal){
modal.style.display = "none"
}
}
</script>
<!--BANK POPUP-->
<button id = "btnBankModal"> Bank Account</button>
<div id="bankModal" class = "modal">
<span class = "close">×</span>
<div class = "modal-header">
<h2>Bank Account</h2>
</div>
<div class = "modal-content">
<p>BANK INFO</p>
</div>
</div>
<script>
var modal = document.getElementById("bankModal"); //calls the modal
var btn = document.getElementById("btnBankModal"); //calls the modal button
var span = document.getElementsByClassName("close")[0]; //calls the span element that will close the modal
btn.onclick = function(){ //opens the modal when the button is clicked
modal.style.display = "block";
}
span.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event){
if (event.target == modal){
modal.style.display = "none"
}
}
</script>
</body>
</html>
You're defining the same variable names in each button click function in the global scope. Javascript is reassigning var modal to look for the element with the bankModal ID for both functions. I recommend looking at or revisiting how scope works in Javascript. You can either rename the variables for the second on click function or wrap each on click in its own function.

Uncaught TypeError: can't access property "onclick", modal box on specific pages

What I'm trying is to display a modal box on specific product categories. Everything working, but I get this error from MDN: "Uncaught TypeError: can't access property "onclick", btn is null"
Here is my code:
//Modal Product Category = Ring
add_action('woocommerce_after_add_to_cart_form', 'monoscopic_modal', 15);
function monoscopic_modal() {
global $product;
?>
<?php if( has_term( 'ring', 'product_cat', $product->id ) ) : ?>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<?php endif; ?>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<?php
}
What's going wrong?
Any help?
Thanks
Here is the answer for anyone who might be interested. Thanks to Kel Varnsen.
Php:
<?php //delete it
// Custom HTML inside WC template (with conditional logic)
// Code goes in functions.php
//Modal Product Category = Ring
add_action('woocommerce_after_add_to_cart_form', 'monoscopic_modal', 15);
function monoscopic_modal() {
global $product;
?>
<?php if( has_term( 'ring', 'product_cat', $product->id ) ) : ?>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<?php endif; ?>
<?php
}
JS:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
if (!modal || !btn || !span) {
console.log("Modal is null");
} else {
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
};
}

Is it possible to have a modal button inside a foreach loop?

I have a modal button inside a foreach loop with rows from a database, but i am only able to press the first button because it has the same value for each loop. I have been trying to use an increasing ID value $i=0, $i++ but i can't get it to work.
foreach($pdo->query("SELECT * FROM operation, OPuppgift where skift='natt' and klar='0' and operation.NR=OPuppgift.NR") as $row){
$i++;
echo "<tr>";
echo "<td>".$row['NR']."</td>";
echo "<td>".$row['kort_Uppgift']."
</br>
<button id=".$i." class='myBtn'>?</button>
<div id=".$i." class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p>".$row['uppgift']."</p>
<script type='text/javascript' src='modalJ.js'></script>
</div>
</div>
</td>";
var modal = document.getElementById("1");
var btn = document.getElementById("1");
var span = document.getElementsByClassName('close')[0];
btn.onclick = function () {
modal.style.display = 'block';
};
span.onclick = function () {
modal.style.display = 'none';
};
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = 'none';
}
};
Don't use the same ID for multiple objects. Your divs and buttons have the same ID, and are also not quoted.
Change this:
</br>
<button id=".$i." class='myBtn'>?</button>
<div id=".$i." class='modal'>
to this or something similar:
</br>
<button id='button".$i."' class='myBtn'>?</button>
<div id='div".$i."' class='modal'>
Notice, I am prepending the ID number with a descriptor to differentiate between the buttons and the divs, and then using the same incrementing variable to ensure each pair gets the same number after the descriptor (eg: div1 goes with button1, etc).
You are also not enclosing the ID's in quotes. I enclose them in single quotes in my example revision above. The change will generate HTML output like this.
</br>
<button id='button1' class='myBtn'>?</button>
<div id='div1' class='modal'>
...
</br>
<button id='button2' class='myBtn'>?</button>
<div id='div2' class='modal'>
In your Javascript code, (thanks #kerbholz), change the IDs to match. I would do it programmatically (you're using a static value in your code), but, the end result should be prepending your designator like this (but via code that uses the correct number).
var modal = document.getElementById("div1");
var btn = document.getElementById("button1");
You're not passing the id number to your script though. You can use "this" or pass values, or other methods, so, your button controls the correct two elements.

Unable to open CSS modal containing button in loop

I have created a simple modal in CSS using the code from javascript and HTML.
The triggered button is in a loop which is repeating many times. The first occurrence of triggered button works fine and modal shows up, but it doesn't show for rest of the content.
Here's the code I've tried:
while($query->have_posts()) : $query->the_post(){
<!-- some html here-->
<div class=" pull-left hs-book-now-button">
<button id="myBtn">Book Now</button>
</div>
}
The modal html is:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>'modal content here'</p>
</div>
</div>
And the javascript code is:
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Img modal only opening first img

I am trying to list multiple images on a page with the below, whereas when you click the image it opens in modal.
It is working for the first image but no others, I am assuming it's a JS issue, I've tried setting an empty var then setting it to get the element id (which is the same for each img) but again only the first works.
<?php foreach ($img as $thumbnail) {
echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200">
<div id="imgModal" class="modal">
<span class="closeModal">×</span>
<img class="modal-content" id="myImg1">
<div id="caption"></div>
</div>
<span class="closeModal">×</span>';
}
?>
<script>
var modal = document.getElementById('imgModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("myImg1");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
var span = document.getElementsByClassName("closeModal")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
Your code includes the same id attribute for different elements but id must be unique.
id attribute specifies a unique identifier for an HTML element so you can manipulate it via JS or CSS. If you are using the same id for different elements you will only get the first one on the page.
If you want to add event listener to multiple elements add a class to your <img>:
echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200" class="modal-img">
And after that add event listener for every element with a class modal-img.

Categories

Resources