我有这个 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">×</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);
});
单击“确定”按钮时将触发，但第一个 console.log() 是空的，我希望在那里获得用户的输入!第二个控制台将记录事件，但我现在真的不知道如何从中提取用户的输入...
点击“确定”值后，如何获取用户输入的值？
最佳答案
您必须使用 val() 而非 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">×</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>关于javascript - 获取 Bootstrap.modal 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39313827/