How to Pass Data to a Bootstrap Modal When Clicking a Hyperlink?

Passing Data to a Bootstrap Modal

The task at hand involves opening a Bootstrap modal upon clicking a hyperlink and passing an associated ID to the modal. Despite attempts, users encounter an issue where the modal remains inactive or lacks the necessary data.

Solution

Leveraging the jQuery framework's .on event handler proves to be an effective method. Consider the following approach:

HTML

<a data-toggle="modal" data-id="ISBN564541" title="Add this item">

JavaScript

$(document).on("click", ".open-AddBookDialog", function () {
    var myBookId = $(this).data('id'); // Retrieve the ISBN from the clicked link
    $(".modal-body #bookId").val(myBookId); // Set the input field's value in the modal
    // It is unnecessary to manually call the modal as Bootstrap handles it with data-toggle="modal"

});

With this approach, clicking the hyperlink will both open the modal and populate the input field with the ID retrieved from the link. This solution effectively addresses the issue of passing data to the Bootstrap modal upon clicking a hyperlink.

The above is the detailed content of How to Pass Data to a Bootstrap Modal When Clicking a Hyperlink?. For more information, please follow other related articles on the PHP Chinese website!