Pass value to modal on button click
21,412
Instead of using an input field you could create a container element for the id, a div
or span
and update content of the element using .html()
jQuery method.
$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$('#idHolder').html( eventId );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
<span id="idHolder"></span>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Author by
geek_10101010
By Day: Intern By Night: Thesis Programmer Still a rookie in programming cause they never teach anything good in college. Well, in my college. Cisco Certified! and A Graphic Designer
Updated on October 08, 2020Comments
-
geek_10101010 over 3 years
I wanted to show the further details of my card in modal when the user click the button "More Details" ,i have seen an answer regarding to this however I don't want the information to be inside an input field. Can please someone help me with it?
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
MODAL
<div id="modalHomeEvents" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="height:50px;"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <label>Student ID</label> <input type="hidden" name="eventId" id="eventId"/> </div> <div class="modal-footer"> <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); "> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </div> </div> </div>
Javascript
<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () { var eventId = $(this).data('id'); $(".modal-body #eventId").val( eventId ); });</script>
-
geek_10101010 over 6 yearshowever, the <span></span> kept on repeating when you click the button
-
azs06 over 6 yearsYou are right, apologies. Updated my answer. If you have no issue with using
.html()
then this should work.