CODEWITHSUNDEEP
javascriptjquerybootstrap-4
JoeG
JoeG

Reputation: 167

How to use multiple buttons on one modal using jquery with bootstrap

Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page. Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page. Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page.Thanks!

    ``` 
    <!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Modals, Popovers, & Tootips</title>  
    
  </head>    
  <body>
                      
      <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>

          <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>

          <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
                 
        <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">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
          
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

      <script type="text/javascript">
          
          $("exampleModal").click("show.bs.modal", function (event) {
              
              var button = $(event.relatedTarget)
              var recipient = button.data("name")
              var modal = $(this)
              modal.find(".modal-title").text("New message to " + recipient);
          });
          
      </script>
  </body>
    
</html>
```

Upvotes: 1

Views: 1337

Answers (1)

Kinglish
Kinglish

Reputation: 23654

Give each button an identifier we can reference (I am using a class name 'name-button')

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>

Then set up their click handlers

$(".name-button").click(function (event) {
   $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});

Also don't forget to import jQuery at the top

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Here is the complete page code per your request

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <title>Modals, Popovers, & Tootips</title>
</head>

<body>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
    <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">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        // we put this code inside document.ready so that it won't try and find the 'name-buttons' until the page has fully loaded
        $(".name-button").click(function(event) {
            $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
        });
    })
    </script>
</body>

</html>

Upvotes: 1

Related Questions