Append the value in bootstrap model using javascript - javascript

These is my javascript function i want to append the SEARCHID in my bootstrap model form.
How to i get that id in my bootstrap model form
These is my bootstrap model hidden field
<input type="hidden" name="ID" value="ID" id="searchid">
This is my javascript function in these function i get my id when user click on button
function searchitem(id)
{
var SEARCHID = id;
console.log(SEARCHID);
}
<a class="btn btn-primary text-capitalize ct-js-btnEdit--Agents btn-sm" id="<?php echo $DETAILS->id;?>" value="<?php echo $DETAILS->id;?>" onclick="searchitem(this.id);"><i class="fa fa-pencil"></i> Edit</a>

Try the below solution, comments added to explain the process
//on button click
$("#yourPHPId").on("click", function() {
//get the id from the button element
var searchId = $("#searchid").attr("id");
//append to modal-body (inside p tag if preferred)
$(".modal-body p").append("Hidden field id = " + "<b>" + searchId + "</b>");
});
//on modal hide
$('#myModal').on('hidden.bs.modal', function() {
//empty the modal body (<p>) contents
$(".modal-body p").empty();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="hidden" name="ID" value="ID" id="searchid">
<!-- Trigger the modal with a button !-->
<!-- Insert your PHP functions here as required, they have been taken out in order for the code snippet to work !-->
<a class="btn btn-primary" id="yourPHPId" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil" ></i> Edit</a>
<!-- Modal !-->
<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">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Related

I want to change the modal of confirm but I don't know where to start from

This is the code for the confirm.
<td><a href="source.php?admin_id=<?php echo $row['id'];?>&username=
<?php echo $_SESSION['admin_username']; ?>"
data-toggle="tooltip"
data-placement="top"
title="Delete">
<i id="del" class="mdi mdi-close"></i> </a>
</td>
This is the script for the confirm.
const deleteIcon = document.getElementById("del");
deleteIcon.addEventListener("click",(e) => {
const confirmVar = confirm("Do you want to proceed? ");
if(confirmVar){
return true;
}else{
return false;
}
})
This is the modal where I want to change the default confirm of javascript.
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
There were a couple things to fix. Your link wasn't set up right, because it was a regular link (which would go directly to it's href thus ignoring the id='del' icon inside with the event listener). What is needed is to make that link a button which opens the confirm modal. When the modal confirmation button is clicked, then you can go to the link.
I have set this up so that you can have multiple delete buttons on the page, each will need their own data-href attribute.
The delete link became a button that triggers the modal. The modal has the confirm button which, when clicked, finds the data-href of the delete button that opened the modal.
let goToDeleteLink = ''
let btnSave = document.getElementById('btnSave')
btnSave.addEventListener('click', function(e) {
console.log('go to ' + goToDeleteLink);
})
let btnDeletes = document.querySelectorAll('.delete-button')
btnDeletes.forEach(btn => {
btn.addEventListener('click', function(e) {
// store the current delete link
goToDeleteLink = e.target.dataset.href
})
})
<html><head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button data-href="source.php?admin_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['admin_username']; ?>" data-bs-toggle="modal" data-bs-target="#confirmModal" class="delete-button">
<i class="mdi mdi-close"></i> close </button>
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</body>
</html>

How can i change value of clicked button after open a bootstrap modal using JavaScript?

I have multiple buttons where i clicked than open a bootstrap modal with clicked button value, its working fine. Now i want to change value of clicked button when close bootstrap modal.
What i tried:-
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
Try this below code:
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" id="hdncurrent" >
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$("#hdncurrent").val(idClicked);
$('#myModal').on('hidden.bs.modal', function () {
$("#" + $("#hdncurrent").val()).attr("value","test")
})
});
})
</script>
Your jquery will be like this:
<script type="text/javascript">
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$(".close").click(function(){
var btid="#"+idClicked;
$(btid).val(idClicked);
});
});
</script>
You can just save the clicked button id and then on modal close event, you can change the value attribute based on the saved button id. Check out my fiddle. For now, I just changed the value to someOtherValue of the clicked button. You can change it to your expected value.
Please note, there can be multiple ways to perform this action. Kindly let me know if this is not what you are expecting.
var clicked_button_id = '';
$("input").click(function(e){
clicked_button_id = $(this).attr('id');
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
$('#myModal').on('hidden.bs.modal', function () {
$("#"+clicked_button_id).val('someOtherValue');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

Append UL li with modal pop up

I want to list some subjects using ul and li.....
when user click li I want to show subject detail in modal pop up
$.each(data, function (i,item) {
$("#myUL").append('<li ><a href="#" >' + item.subject + '</a></li>');
//modal with item.detail
}
how can I show each subjets detail in pop up
Here you have code example of Bootstrap Modal: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal&stacked=h
$.each(data, function (i,item) {
$("#myUL").append('<li ><a data-toggle="modal" data-target="#myModal" href="javascript:void(0);" >' + item.subject + '</a></li>');
var textValue = item.subject;
$("#myUL").last().click(function() {
$(".modal-body p").text(textValue);
});
};
I am no jQuery expert but this should work.
You could also do it with global variable changed on click and template string inside modal body paragraph.
EDIT:
Add this inside <head> tag
<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>
And this inside <body>:
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CODEPEN example:
https://codepen.io/miroslaw-dubaj/pen/QZjqeQ

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.

Categories