I don’t understand how to explain my question, but I’m trying to say what I wanted to do.
I have created a modal to submit ‘payment’ for each person. I have created the list of person in a table with PHP loop, and a button against each person so that payment can be done by clicking the button.
When I click on the button, a modal popup. But how do i understand which person button is pressed. There is unique id for each person. Now, I have to sent the id from button click to my PHP code. How can i do that? Code for creating list of person:
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' onclick=btn()>Pay</button><button id='mbutton' onclick=btn()>Report</button>"."</td></tr>"; }
HTML code for creating the Modal:
<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 action="test.php" method="POST"> <label>Payment Amount</label><br> <input type="text" name="paymodal" placeholder="Amount"><br> <input type="submit" name="smitModal"> </form> </div> </div> </div>
Javascript code for popup the modal:
var modal = document.getElementById("myModal"); var span = document.getElementsByClassName("close")[0]; function btn() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
I need to sent the respective id & amount from modal code to my PHP code where payment will be processed.
Please help,
Advertisement
Answer
For the “Pay” button, attach a function which gets the ID as a parameter. I assume $sl
is the ID you mentioned.
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' onclick=btn(". $sl. ")>Pay</button><button id='mbutton' onclick=btn()>Report</button>"."</td></tr>"; }
Then, by using the btn()
function, Get the ID and add it to the HTML form by using below code:
var modal = document.getElementById("myModal"); var span = document.getElementsByClassName("close")[0]; var formUserId = document.getElementById("userId"); function btn(userId) { formUserId.value = userId; modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
Then update your HTML Form to bind the UserId to that:
<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 action="test.php" method="POST"> <label>Payment Amount</label><br> <input type="hidden" id="userId" name="userId"><br> <input type="text" name="paymodal" placeholder="Amount"><br> <input type="submit" name="smitModal"> </form> </div> </div> </div>