javascript - 按 Enter 键将值从表单发送到模态
问题描述
<form action="#exampleModal" method="post" id="new_group" onsubmit="submit_handler()">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label class="fonts">IDCARD</label>
<input class="form-control fonts" id="card_id" type="text" name="card_id"placeholder="IDCARD" required="required" minlength="13" maxlength="13" />
</div>
</div>
</form>
<div class="modal" tabindex="-1" role="dialog" style="display:none" id="exampleModal">
<h5 class="modal-title">Show data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
<div class="container">
<?
echo $_POST["card_id"];
?>
</div>
</div>
</div>
<script>
document.getElementById("card_id").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("card_id").submit();
return false;
}
});
function submit_handler() {
console.log('modal opened'); //send with ajax?
$('#exampleModal').modal('show');
event.preventDefault();
return false;
}
</script>
'按 Enter 键将值从 Form 发送到 modal 。' 但现在我分别做这两件事。我怎样才能将它们结合起来?'按 Enter 键将值从 Form 发送到 modal 。' 但现在我分别做这两件事。我怎样才能将它们结合起来?
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="#exampleModal" method="post" id="new_group">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label class="fonts">IDCARD</label>
<input class="form-control fonts" id="card_id" type="text" name="card_id"placeholder="IDCARD" required="required" minlength="13" maxlength="13"/>
</div>
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id='bodyText'>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
document.getElementById("card_id").addEventListener("keypress", function(event)
{
if (event.keyCode === 13)
{
var cardId = document.getElementById("card_id").value;
$('#exampleModal').modal('show');
document.getElementById("bodyText").innerHTML = cardId;
event.preventDefault();
}
});
</script>
</body>
</html>
推荐阅读
- javascript - JavaScript function only running once on remove
- java - android.widget.Scroller 添加快速滚动行为
- amazon-web-services - CloudFront usage in Unity3d
- cluster-analysis - 应该为我的聚类分析选择哪些特征?
- flutter - 如何从主隔离和后台隔离刷新和共享访问令牌
- python - Ignore warnings in from Python modules (seaborn, sklearn)
- linux - How to print a number from a specific row and column
- angular - 角材料自动完成不显示列表框的选项
- jsf - p:commandButton doesn't dislpay p:dialog
- python-3.x - 从具有明确前缀但随机后缀的 Cloud Storage 读取文件