html - How to trigger modal when input type is submit
问题描述
I want to trigger modal when input type is submit,
when I complete my require , need to submit data then launch the modal sample
(which is using ajax to update zone)
but I tried to add data-toggle on input type,
after adding it, the form seems like it can't be post to Controller ,
does anybody have any solution on it?
<input type="submit" value="Ok" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModalCenter">
launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Your Content</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="PlanCompleteZone">
@Html.Action("PlanComplete")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
解决方案
我建议您在表单中使用 onSubmit 事件的侦听器,这样您就可以在提交时触发 javascript 函数,并且在该函数中,您必须阻止事件(提交)并启动您的模式,最后使用 ajax 请求来提交表单内容。
<form method="POST" onsubmit="submit(event);">
<input type="submit" value="Ok" />
</form>
<script>
function submit(event){
event.preventDefault();
//assuming bootstrap 3
$('#exampleModalCenter').modal('show')
//ajax request
}
</script>
推荐阅读
- kentico - Kentico 用户访问限制
- elasticsearch - 如何获取具有大小集的聚合中唯一术语的总数?
- mysql - 用于创建视图的 FORM 子句中的 SELECT
- python - 如何从现有 JSON 值创建列表?
- javascript - 如何旋转图像然后保存新的旋转图像?
- node.js - 使用 Lambda 定期清除 Redis 缓存
- android - 使用 WorkManager 的定期日常工作请求
- javascript - GDrive 分段上传 jQuery
- css - 在移动设备上使用浏览器默认实现 CSS 选择
- python-3.x - 需要制作具有年份和星期组合的字符串变量到日期时间格式