We Keep Coding

Javascript modal pass dynamic variable in popup depending on dynamic id?

<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>
<script>
$('#wishlist-modal').on('shown.bs.modal', function() {
var $el = $("#wishlisticon");
var $username = $el.data('productid');
alert($username);
});
</script>
There are several buttons on a page pointing to the same modal, however different data needs to be passed for each modal.
The data to be passed is saved in data-productid.
When the popup modal opens, I want to use data-productid variable.
The function is working but each time the alert is giving the same productid value (i.e = 1)
The function is not able to understand that it should pickup the corresponding data-productid

As mentioned in the documentation, you can use event.relatedTarget to vary the contents of the modal depending on which button was clicked.
$('#wishlist-modal').on('shown.bs.modal', function(event) {
var $el = $(event.relatedTarget);
var $username = $el.data('productid');
alert($username);
});
DEMO:
$('#exampleModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
alert(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<h2>Hello World!</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Could I get a direct element in javascript using queryselector and foreach?

I am trying to make a confirmation control which I could use multiple times on a page if I would like to. Therefor I used HTML, Bootstrap and JavaScript. I would like to refrain from jQuery (as much as possible) for debugging reasons (I know for Bootstrap I still might need to use some of it still).
My solution contains element.parentNode in order to keep the controls separated when clicked on. The problem I am having is that I seem to be unable to get a specific button from the control when clicked on. My intention is to keep my code clean by using querySelectorAll() and forEach(), but I seem unsuccessful:
const targetModal = $("#bs-modal-xl");
const positiveNodes = document.querySelectorAll(".foo");
const negativeNodes = document.querySelectorAll(".bar");
positiveNodes.forEach(node => node.addEventListener("click", function() {
const thisNode = this;
thisNode.classList.add("btn-success");
thisNode.parentNode.querySelectorAll(".bar").forEach(node => node.classList.remove("btn-warning"));
//How do I get the direct button containing the text "confirm?" after clicking any yes button and enable it?
console.log(thisNode.parentNode.parentNode)
console.log(thisNode.parentNode.parentNode.querySelectorAll("> button")); // returns Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '> button' is not a valid selector.
console.log(thisNode.parentNode.parentNode.querySelectorAll("button")); // <-- returns nodelist of 3 buttons: "yes", "no" and "confirm?".
console.log(thisNode.parentNode.parentNode.parentNode.querySelectorAll(".confirmation-box > button")); // <-- returns nodelist of the available "confirm?" buttons, in this case 2 of them.
//I would not want the seperate ".confirmation-box" elements to interact with each other, these are independant elements.
}));
negativeNodes.forEach(node => node.addEventListener("click", function() {
this.classList.add("btn-warning");
this.parentNode.querySelectorAll(".foo").forEach(node => node.classList.remove("btn-success"));
}));
#foo-container {
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal" id="bs-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div id="foo-container">
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
<br />
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
</div>
JSFiddle
The controls are being separated by using my own custom element containing the class .confirmation-box.
The desire of the control is that when "yes" is clicked, the "confirm?" button's disabled state should be removed whereas "no" is clicked, should disable the "confirm?" button.
Is it possible to get the desired element using querySelectorAll() and forEach()? Could I refrain from looping (and using indexes) and use these methods instead? Am I overlooking something?
The desired element should look something like this: On click -> this -> find parent .confirmation-box element -> find child "confirm?" button.

I guess like this
const confirmButton = thisNode.parentNode.parentNode.querySelector(".confirmation-box > button");

you can get by the class:
thisNode.parentNode.parentNode.querySelectorAll(".btn-danger")
const targetModal = $("#bs-modal-xl");
const positiveNodes = document.querySelectorAll(".foo");
const negativeNodes = document.querySelectorAll(".bar");
positiveNodes.forEach(node => node.addEventListener("click", function() {
const thisNode = this;
thisNode.classList.add("btn-success");
thisNode.parentNode.querySelectorAll(".bar").forEach(node => node.classList.remove("btn-warning"));
//How do I get the direct button containing the text "confirm?" after clicking any yes button and enable it?
console.log(thisNode.parentNode.parentNode.querySelectorAll(".btn-danger"));
}));
negativeNodes.forEach(node => node.addEventListener("click", function() {
this.classList.add("btn-warning");
this.parentNode.querySelectorAll(".foo").forEach(node => node.classList.remove("btn-success"));
}));
#foo-container {
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal" id="bs-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div id="foo-container">
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
<br />
<div class="confirmation-box">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success foo">Yes</button>
<button type="button" class="btn btn-warning bar">No</button>
</div>
<button type="button" class="btn btn-lg btn-danger" disabled>Confirm?</button>
</div>
</div>

How to add text to modal on button click

I have this modal
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
and I would like to add text in <span id="bankAssessBondId"></span> when the following button is clicked
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
as I have multiple buttons for this, I'm using an EventListener as follows
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i=0; i<buttons.length; i++){
buttons[i].on("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
but the 'click' button event is not detected. How can I fix this?

For elements that are dynamically generated you'll need to use the delegated events form of the JQuery on() function:
$('body').on('click', '.btn.btn-success.bank', function() {
$('#bankAssessBondId').append($(this).value)
}
I've used "body" in this case as the parent element, but it could be any element that's a parent of the buttons.

When selecting an element with multiple classes then the selectors must be specified without spaces like below.
$('.btn.bank.btn-success')
Also in this, case the modal should be opened with the script as the span value inside modal needs to be changed dynamically.
$('#bankAssess').modal('toggle');
$(function() {
$('.btn.bank.btn-success').click(function() {
var val = $(this).attr("value");
console.log(val);
$('#bankAssessBondId').append(val);
$('#bankAssess').modal('toggle');
});
});
#bankAssessBondId {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="credit-scoring">
<label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
<input type="text" class="form-control" id="credit-scoring">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond2">
Bank Assess
</button>
<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond3">
Bank Assess
</button>

You can get the button by its class name using
$(".bank").on('click', function () {
alert('clicked');
$('#bankAssessBondId').append($(this).attr('value'));
});
Also append the value of the button to the id="bankAssessBondId"
<span id="bankAssessBondId"></span>
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>
Using a sample of your code
Here is a working example.
https://codepen.io/anon/pen/oQGJOm

Your issue looks to be that you are trying to use the jQuery on with an element that was discovered not using jQuery. The way I see it you have two possible solutions depending on what you are trying to achieve.
use the addEventListener
var buttons = document.getElementsByClassName('btn btn-success bank');
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(){
$('#bankAssessBondId').append($(this).value)
})
}
use jQuery to select the buttons and use the .on function to apply a click listener to all items returned
var buttons = $(".btn.btn-success.bank");
buttons.on("click", () => {
//do stuff here
});
I hope this helps!

How can I get button value in textbox of model pop up?

I have dynamic buttons
when I click on button a popup should appear with a textbox.
My button code is
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';
My jQuery code is
<script>
$(document).ready(function(){
$("#update").click(function(){
var butval = $("#update").val();
$("#ctext").val(butval);
});
});
Modal popup is
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" value="<?php ;?>">
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

For this kind of case , You must use data attribute of HTML5.
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';
And in the Modal popup,
Here is the magic script that will solve your problem.
<script>
$(document).ready(function(){
$("#update").click(function(){
// this is the value you get which is in data attribute of update button.
var btn_value= $(this).data('btn');
$('#myModal')
.find('#ctext').val(btn_value).end()
.modal('show');
});
</script>

Updated for multiple buttons using class: You can try the below. first remove data-target="#myModal" from button then get the value and write it to input then open the modal:
$(document).ready(function(){
$(".update").click(function(){
var butval = $(this).val();
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-success update" value='2' >Update</button>
<button type="submit" class="btn btn-success update" value='3' >Update</button>
<!-- see the button attributes changes -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

#suchit Thanks for your help.
this code is working
<button type="submit" class="btn" data-toggle="modal" value='.$row['country_name'].' id='.$row['country_name'].' >Update</button>;
<script>
$(document).ready(function(){
$(".btn").click(function(){
var butval = this.id;
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
} );
</script>

How can you pull a PHP value from a table row in JQuery to use later?

I have a Button that gets populated with ever row in the table. I want to be able to put the value of the row "$row[auditID]" and use it in my modal to be able to make this delete button work. The alert pops up, but the Modal won't hide and my delete action doesn't work (doesn't delete the audit).
<a href=\"#\" id=\"$row[auditID]\" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title=\"Remove\" >Remove</span> </a>";
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
JQuery Script:
<script>
$("#yes_delete").click(function(){
var auditID = this.id;
//alert("delete test");
$.post("edit_audits.php?action=delete&auditID="+auditID,{
function(data){
alert("Audit Deleted");
$('question_alert').modal('hide');
window.location.reload();
}
});
});
</script>

Something like this?
Put your PHP value into the a tag like this:
<a href="#" data-mylink="<?php echo $yourPHPVar; ?>" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
jsFiddle Demo
$('#question_alert').on('shown.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var linked = btn.data('mylink');
$('#audNo').text(linked);
// Or:
// var modal = $(this);
// modal.find('.modal-body h3 span#audNo').text(linked);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" id="bob" data-mylink="Fred" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> Audit number <span id="audNo"></span>? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>

I would do something like this
<a href="javascript:void(0)" class='btn btn-danger btn-xs btn-remove' data-id="<?=$row["auditID"]?>" role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" >Remove</span></a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
And This in The jQuery function. Make sure you put your jQuery script tag at the top of the page for jQuery to load before this function
<script>
var removeId = null;
$(document).ready(function(){
$(".btn-remove").click(function(){
removeId = $(this).attr("data-id");
});
$("#yes_delete").click(function(){
$.ajax({
url: "edit_audits.php",
type: "POST",
data: "action=delete&auditID="+removeId,
success: function(){
$('#question_alert').modal('hide');
window.location.reload();
}
});
}
});
Keep in mind, I have not ran this as I don't have all the data needed. You may have to debug this a little as it was blind coding.