javascript - 注册前接受模式
问题描述
当用户尝试注册时,我希望在接受注册之前弹出一个带有一些条款的模式。在用户接受模式上显示的条款之前,一切似乎都有效。当用户按下按钮 (submitBtn2) 时,它没有反应。我已经尝试使用警报进行测试以查看我的提交是否是问题,但甚至警报都没有显示 - 我做错了什么?
报名表格
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
<div align="center" class="w3-black w3-opacity" id="register">
<br />
@Html.AntiForgeryToken()
<h4>Register</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
<div class="form-group" id="lastname">
@Html.LabelFor(m => m.Email, new { @class = "control-label" })
<div>
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "control-label" })
<div>
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "control-label" })
<div>
@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<button class="w3-button w3-light-grey w3-section" type="submit" value="Register">
<i class="fa fa-user"></i>Create user
</button>
<input type="button" name="ConfirmRegBtn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="w3-button w3-light-grey w3-section" />
</div>
</div>
}
jQuery
$('#submitBtn2').click(function () {
/* when the submit button in the modal is clicked, submit the form */
window.alert("sometext");
//$('#Register').submit();
});
模态
<!--legal data-stuff-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header w3-center">
<h1>Before you create your user</h1>
</div>
<div class="modal-body scroll">
Some stuff from database
Lorem ipsum...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="#" id="submitBtn2" class="btn btn-success success">Submit</a>
</div>
</div>
</div>
</div>
解决方案
你需要给Id
表格一个。您可以在BeginForm
辅助方法的 htmlAttributes 参数中指定它。
@using (Html.BeginForm("Register", "Account", FormMethod.Post,
new { @class = "form-horizontal", role = "form" , @id= "Register" }))
{
<!-- Your form elements/existing code goes here -->
}
这将生成带有 Id 属性值的表单标签Register
<form action="/" class="form-horizontal" id="Register" method="post" role="form">
<!-- Your form elements goes here -->
</form>
Id
并在您的 jQuery 选择器中使用此属性值获取form
元素并提交表单。
$(document).ready(function () {
$('#submitBtn2').click(function () {
$('#Register').submit();
});
});
这是一种方法。另一种方法是将模态对话框保留在表单内,当单击模态中的按钮时,找到最近的容器form
标签并提交它。jQueryclosest
方法会很方便。但是 Id 选择器会更快(希望比 o(n) 解决方案更好)
推荐阅读
- jdbc - 在 Apache Zeppelin 上动态设置 JDBC 密码
- java - 如何返回地图
在Java,JPA? - javascript - 将对象数组更改为带有图表坐标的数组
- php - 如果结果不受限制,Eloquent 查询会失败且不会出错
- sql - SQL UnPivot 多列
- javascript - Canvas JS 鼠标悬停创建圆圈
- python - 如何在工业设备的两个特定时间戳之间添加时间戳 - Python Pandas
- php - 如何在不使用 ul 和 li 标签的情况下在 WordPress 中显示特定类别的帖子?
- c# - 在 Unity3D 中如何解决这样的 NullReferenceException?
- jquery - 如何在 jQuery 的 .match() 中使用正则表达式