Open In App

How to pass data into a bootstrap modal?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!-- Import jquery cdn -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!-- Import jquery cdn -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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.



Last Updated : 29 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads