To pass data into a Bootstrap modal, you typically need to use JavaScript (or jQuery)
How to pass data into a Bootstrap modal using JavaScript and jQuery to dynamically insert and manage content within your modals, enhancing interactivity and user experience.
Bootstrap, combined with HTML and JavaScript, can be used to create responsive web pages. One of Bootstrap’s components is the modal, a popup or dialog box that requires user interaction. A modal typically consists of two parts: the modal header and the modal body. Data can be passed to the modal body from the HTML document and will be displayed when the modal is triggered.
The data is retrieved using their respective attributes using the jQuery data() method and passed using val() method. You can also pass the string into the modal body using the jQuery html() method.
Example Code:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div class=”container mt-2″>
<!——– Trigger button ——->
<button type=”button” class=”btn btn-primary btn-sm” data-toggle=”modal” data-target=”#exampleModal” data-mydata=”Product Name 1″ >
<h2>Product Name 1</h2>
</button>
<button type=”button” class=”btn btn-primary btn-sm” data-toggle=”modal” data-target=”#exampleModal” data-mydata=”Product Name 2″ >
<h2>Product Name 2</h2>
</button>
<!——– Trigger button Ends ——–>
<br><br>
<!——– Modal Popup ——–>
<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”>
Send Enquiry
</h5>
<button type=”button”
class=”close”
data-dismiss=”modal”
aria-label=”Close”>
<span aria-hidden=”true”>
×
</span>
</button>
</div>
<div class=”modal-body”>
<!——– Modal body ——–>
Enter Name: <input type=”text” name=”txtYourName” id=”txtYourName”><br><br>
Product Name: <input type=”text” name=”txtPrdName” id=”txtPrdName”><br><br>
<button type=”button”
class=”btn btn-success btn-sm”
data-toggle=”modal”
data-target=”#exampleModal”
id=”submit”>
Submit
</button>
</div>
</div>
</div>
</div>
<!——– Modal Popup Ends ——–>
</div>
<script type=”text/javascript”>
$(“.btn-sm”).click(function () {
let data = $(this).data(‘mydata’);
$(“#txtPrdName”).val(data);
});
</script>
</body>
</html>
In this example:
$('.btn-primary').on('click', function() { ... });attaches a click event handler to the button with classbtn-primary.var data= $(this).data('mydata');gets the data you want to pass into the modal.$("#txtPrdName").val(data);updates the modal text filed with the data passed.data-mydata="Product Name 1" and data-mydata="Product Name 2" are data attributes on the buttons.