How to pass data into a bootstrap modal?

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.
Bootstrap-Misc
HTML-Misc
Picked
Technical Scripter 2020
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property