获取Bootstrap.modal的值

Question

我有这个Bootstrap模式：

<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>

而我这样做：

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

单击“Okay”按钮时将触发，但第一个console.log()为空，我希望得到用户的输入！ 第二个控制台将记录事件，但我现在不知道如何从中提取用户的输入...

单击“Okay”值后，如何获取用户输入的值？

Answer 1

你必须使用val() no text() 。

更改：

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

至：

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

最终代码：

 <!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>

获取Bootstrap.modal的值

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-09-04 05:41:28

获取Bootstrap.modal的值

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-09-04 05:41:28

解决方案1
3 已采纳 2016-09-04 05:41:28