gsamaras gsamaras - 3 months ago 15
Javascript Question

Get the value of Bootstrap.modal

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

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>