How to get data values of a bootstrap modal using jQuery or javascript on clicking button inside the modal?
Solution 1
I have modifed your fiddle : http://jsfiddle.net/exr00e0d/
you had taken href. instead of that i took the target(modal).
$('.cancel_modal').click(function() {
//alert('called');
// we want to copy the 'id' from the button to the modal
var href = $(this).data('target');
var id = $(this).data('id');
// since the value of href is what we want, so I just did it like so
alert(href);
// used it as the selector for the modal
alert(id);
$(href).data('id', id);
});
Solution 2
try this
function getid() {
var id=document.getElementById('savebutton').getAttribute("data-id");
return id;
}
<button type="button" id="savebutton" class="btn btn-success" onclick="getid()" >Yes</button>
Solution 3
In jQuery
$('#savebutton').click(function() {
var id = $('#link').data('id');
// if for some reason, the code above doesn't work,
// $('#link').attr('data-id');
console.log(id);
});
Edit:
Looking at your jsfiddle
$('#link').click(function() {
// we want to copy the 'id' from the button to the modal
var target = $(this).attr('target');
var id = $(this).data('id');
$(target).data('id', id);
});
$('#savebutton').click(function() {
// now we grab it from the modal
var id = $('#addBookDialog').data('id');
console.log(id);
});
gauravparmar
A Creative Person, Full Stack Developer and Graphic Designer, Freelancer, Cyber Security Expert, Hacker and many more to explore..
Updated on October 19, 2020Comments
-
gauravparmar over 3 years
I want to get data values of a bootstrap modal on clicking button inside the modal. Here is my modal -
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <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="myModalLabel">Cancel</h4> </div> <div class="modal-body"> Are you sure you want to cancel this? </div> <div class="modal-footer"> <button type="button" id="savebutton" class="btn btn-success" >Yes</button> <button type="button" class="btn btn-danger" data-dismiss="modal">No</button> </div> </div> </div> </div>
And here is the way I am passing the data to modal -
Update -
<button data-target='#myModal' id='link' data-toggle='modal' data-id="1" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button> <button data-target='#myModal' id='link' data-toggle='modal' data-id="2" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button> <button data-target='#myModal' id='link' data-toggle='modal' data-id="3" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button> ... .. . <button data-target='#myModal' id='link' data-toggle='modal' data-id="n" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>
Modal can be called from any one of the many buttons and I need to get the data-id of the concerned button only. e.g.- if I click on "Cancel 1" button, I should get data-id as 1 after clicking "Yes" button in modal.
I want to get the modal data value of "id" field which is 1234 on clicking "Yes" button in this modal using jQuery or javascript.