How to pass data into a bootstrap modal?
- Difficulty Level : Easy
- Last Updated : 29 Jul, 2021
Bootstrap is a CSS framework used for designing web pages. Bootstrap v4.5 is the latest release. Bootstrap along with HTML and JavaScript can be used to build responsive web pages.
A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used.
jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement.jQuery reduces the lines of code. The article demonstrates two examples where data is passed into the modal body from the HTML document body.
Example 1: In this approach, the web page consists of two input fields Name and Marks which accepts input from the user. The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method. Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.
- HTML
><!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
Name: <input type="text" name="name"
id="name"><br><br>
Marks: <input type="text" name="marks"
id="marks"><br><br>
<!-- Button to invoke the modal -->
<button type="button" class="btn btn-primary
btn-sm" data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Confirmation
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<h6 id="modal_body"></h6>
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#name").val();
var marks = $("#marks").val();
var str = "You Have Entered "
+ "Name: " + name
+ " and Marks: " + marks;
$("#modal_body").html(str);
});
</script>
</body>
</html>
Output
Example 2: In this approach, a textarea is used to take input from the user. When the submit button is clicked, it invokes the jQuery function. The data entered the text area is extracted using the val() method into the text variable. This text string is passed to the modal body using the html() method of jQuery.
- HTML
><!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
<textarea id="textarea" rows="4"
cols="50">
</textarea><br>
<!-- Button to invoke the modal -->
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Entered Data
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<p id="modal_body"></p>
<button type="button"
class="btn btn-warning btn-sm"
data-toggle="modal"
data-target="#exampleModal">
Proceed
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var text = $("#textarea").val();
$("#modal_body").html(text);
});
</script>
</body>
</html>
Output
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Example Two
You asked this question here…
https://forums.asp.net/t/2119894.aspx?Undefined
where I provided a working solution.
I also explained, in the previous post, that the Id in the following handler is scoped to the handler function and not global or global to the ready function.
>$('.btn.btn-danger').on('click', function () {
var Id = $(this).data('id');
$('#deleteConfirmModal').modal('show');
});
The following function is pointing Id in the global scope but the global var Id is not assigned a value.
> $("#deleteConfirmModal").on('click', "#deleteConfirm", function () {
debugger;
console.log(Id);
return false;
});
I also provided links where you could learn about JavaScript scope. I suggest that you take the time to learn JavaScript scope rather than repeating the same conceptual issue over and over again.
I fixed the scope bug in your code. This following is tested and working.
>@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>BootstrapDemo</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script>
var Id;
$(document).ready(function () {
$('.btn.btn-danger').on('click', function () {
Id = $(this).data('id');
$('#deleteConfirmModal').modal('show');
});
$("#deleteConfirmModal").on('click', "#deleteConfirm", function () {
//debugger;
console.log(Id);
return false;
});
});
</script>
</head>
<body>
<div>
<button type="button" class="btn btn-danger" data-id="1">
Launch demo modal
</button>
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Local Model</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Hello from the the local modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="deleteConfirm" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>