Recuperare un valore da un popup bootstrap

L’esempio di seguito riportato illustra come recuperare un valore da un popup bootstrap ed impostare il valore di input nella pagina principale. Di seguito il codice HTML di esempio per il popup modale

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">open popup</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                input in popup:
                <input type="text" class="form-control" id="myPopupInput" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close (do nothing)</button>
                <button type="button" class="btn btn-primary">Save changes (but popup does not even close)</button>
            </div>
        </div>
    </div>
</div>
<br />
input in main page: 
<input type="text" class="form-control" id="myMainPageInput" />

Per salvare alla chiusura del modale

<script>
    $('#myModal').on('hidden.bs.modal', function (e) {
        var value = $('#myPopupInput').val();
        $('#myMainPageInput').val(value);
    });
</script>

Per salvare quando si clicca sul bottone SAVE

<script>
    $('#myModal').on('click', '.btn-primary', function () {
        var value = $('#myPopupInput').val();
        $('#myMainPageInput').val(value);
        $('#myModal').modal('hide');
    });
</script>

 

About the author

aoliverio

Sono Antonio Oliverio, mi occupo di programmazione web, utilizzando le migliori tecnologie per la programmazione in ambito web, quali: Apache (web server), PHP, MySQL, JQuery, Bootstrap (frontend framework) e CakePHP (php framework).

View all posts