Get the value of Bootstrap.modal

Question

I have this Bootstrap modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="form-control-label">Max #pics per cluster:</label>
                        <input type="text" class="form-control" id="message-text">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
                <button id="paramsOkay" type="button" class="btn btn-primary">
                    Okay
                </button>
            </div>
        </div>
    </div>
</div>

and I am doing this:

$('#exampleModal').on('click','#paramsOkay', function (e) {
    console.log($('#recipient-name').text());
    console.log(e);
});

which will fire when the "Okay" button is clicked, but the first console.log() is empty, and there I would expect to get user's input! The second console will log the event, but I don't really now how to extract the user's input from that...

How to get the value the user inputed, after the "Okay" value is clicked?

Answer 1

You must use of val() no text() .

Change:

console.log($('#recipient-name').text());

To:

console.log($('#recipient-name').val());

Final code :

 <!DOCTYPE html> <html> <head> </head> <body> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label> <input type="text" class="form-control" id="recipient-name" value="Test"> </div> <div class="form-group"> <label for="message-text" class="form-control-label">Max #pics per cluster:</label> <input type="text" class="form-control" id="message-text"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button id="paramsOkay" type="button" class="btn btn-primary"> Okay </button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $('#exampleModal').on('click','#paramsOkay', function (e) { console.log($('#recipient-name').val()); //console.log(e); }); }) </script> </body> </html>

Get the value of Bootstrap.modal

Question

1 answers

solution1
3 ACCPTED 2016-09-04 05:41:28

Get the value of Bootstrap.modal

Question

1 answers

solution1 3 ACCPTED 2016-09-04 05:41:28

solution1
3 ACCPTED 2016-09-04 05:41:28