get data from bootstrap modal on close-CodePudding

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 >    
    <div > 
        <input type="text" id="txtMittel[]" name="txtNr1[]"  placeholder="input" >
        <input  type="text"  name="txtNr2[]">
        <input  type="text"  name="txtNr3[]" value="3">
        <a href="javascript:void(0);"  title="add"><img src="../img/add-icon.png" alt="Add"></a>
    </div>      

    <div > 
        <input type="text" id="txtMittel[]" name="txtNr1[]"  placeholder="input" >
        <input  type="text"  name="txtNr2[]">
        <input  type="text"  name="txtNr3[]" value="3">            
    </div>      

    <div > 
        <input type="text" id="txtMittel[]" name="txtNr1[]"  placeholder="input" >
        <input  type="text"  name="txtNr2[]">
        <input  type="text"  name="txtNr3[]" value="3">            
    </div>      
</div>
<!-- Modal -->
<div  id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div >
        <div >
            <div >
                 <h5  id="modalTitle">Modal title</h5>
                 <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div  id="divModalBody">
                 <input type="text" id="txtUserInput">
            </div>
            <div >
                <button type="button"  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

CodePudding user response：

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:

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");
    });
});

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");
});