CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
erik-stengel
erik-stengel

Reputation: 439

get data from bootstrap modal on close

I open a modal if a input element is clicked. The user should choose some data within the modal. On close the chosen data should be displayed in the element that triggered the click-event.

<!-- input elements -->
    <div class="wrapper">    
    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">
        <a href="javascript:void(0);" class="add_button" title="add"><img src="../img/add-icon.png" alt="Add"></a>
    </div>      

    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">            
    </div>      

    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">            
    </div>      
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                 <h5 class="modal-title" id="modalTitle">Modal title</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="divModalBody">
                 <input type="text" id="txtUserInput">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>
<script>
$("#wrapper").on('click', '.openmodal', function(e){
    $("#modal").modal("show");        
    $("#btnCloseModal").on('click', function() {                     
        e.target.value = $("#txtUserInput").val();
        $(e.target).parent().next().children().val("some other text from the modal");
    });
}); </script>

If I am using e.target.value it seems to work at first, but if more elements of the class .example are clicked, the value of all elements that were clicked before, is also changed

Upvotes: 0

Views: 1222

Answers (1)

Ouroborus
Ouroborus

Reputation: 16875

You're creating a new "close" event handler every time you show the dialog but you don't remove these when hiding the dialog. As a result, on close, all old handlers are triggered in addition to the current new handler.

There are two options:

  1. Remove the "close" handler when it is triggered:
$("#wrapper").on('click', '.openmodal', function(e){
    $("#modal").modal("show");        
    $("#btnCloseModal").on('click', function() {
        $("#btnCloseModel").off('click');
        e.target.value = $("#txtUserInput").val();
        $(e.target).parent().next().children().val("some other text from the modal");
    });
});
  1. Declare the close handler once and pass the needed data by outer variable:
let wrapperTarget;
$("#wrapper").on('click', '.openmodal', function(e){
    wrapperTarget = e.target;
    $("#modal").modal("show");
});
$("#btnCloseModal").on('click', function() {
    wrapperTarget.value = $("#txtUserInput").val();
    $(wrapperTarget).parent().next().children().val("some other text from the modal");
});

Upvotes: 2

Related Questions