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?

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?

• javascript
• jquery
• html
• twitter-bootstrap
• io

1 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./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>