How to use click event on bootstrap modal

I generate many bootstrap modals with a php script, and I’d like to edit some input of it when I click button “save changes”. ModalIDs generated are something like “ModalID0000”. But nothing happens with my script when i click on “save changes”.

        <input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
        
        <!-- Modal -->
        <div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                  </div>
                  <div class="modal-body">
                    <!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
                    <?php if ($flagLogin == true){ ?>
                    <input type="text" value="<?php echo $user; ?>"/>
                    <input type="password" value="<?php echo $pwd; ?>"/>
                    <?php } else { ?>
                    <input class="user_login" type="text" value="user"/>
                    <input class="user_password" type="password" value="xxxxxxxxx"/>
                    <?php } ?>
                  </div>
                  <div class="modal-footer">
                <button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning z-depth-0 save" >Save changes</button>
              </div>
            </div>
          </div>
        </div>

    $("modal.save").click(function(){ 
            alert('save');
            //edit user_login and user_password values here  
    });

EDIT : 1st mistake found with modal element selector instead of class, but still no alert

    $(".modal.save").click(function(){ 
            alert('save');
    });

Answer

Save button is the child element of .modal selector.

So $("modal.save") should be replaced to $(".modal .save").

Or that button belongs to .modal-footer so you can put as follows.

$(".modal-footer .save")

$(".modal .save").click(function () {
  alert('save');
  //edit user_login and user_password values here  
});

<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />

<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog"
  aria-labelledby="Identifiants" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
        <?php if ($flagLogin == true){ ?>
        <input type="text" value="<?php echo $user; ?>" />
        <input type="password" value="<?php echo $pwd; ?>" />
        <?php } else { ?>
        <input class="user_login" type="text" value="user" />
        <input class="user_password" type="password" value="xxxxxxxxx" />
        <?php } ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning z-depth-0 save">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Advertisement

Answer