我使用Bootstrap创建了一个模式对话框,但在关闭或提交模式对话框后,模式对话框没有清除表单输入字段。
HTML
<!-- Password Reset Modal -->
<div id="passwModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Forgot Password?</h4>
<p>Please enter your registered email address below and a new password will be sent to you.</p>
</div>
<div class="modal-body">
<div id="sent"><!-- Display sent message after password reset -->
<form class="form-horizontal" id="reset">
<div class="control-group">
<label class="control-label" for="Email">Username</label>
<div class="controls">
<input class="input-large" type="email" id="Username" name="Username" placeholder="Email Address">
</div>
</div>
<div class="controls">
<button class="btn btn-inverse" id="close" value="CANCEL" data-dismiss="modal" aria-hidden="true">CLOSE</button>
<button class="btn btn-success" id="submit">SEND</button>
</div>
</form>
</div><!-- end of sent -->
</div>
</div><!-- end of Password Reset Modal -->
JavaScript(验证和ajax)
$(document).ready(function () {
jQuery.validator.addMethod("accept", function (value, element, param) {
return value.match(new RegExp("." + param + "$")); });
$("#register").validate({
rules: {
FirstName: {
required: true,
accept: "[a-zA-Z]+"
},
LastName: {
required: true,
accept: "[a-zA-Z]+"
},
Pwd: {
required: true,
minlength: 8
},
CPwd: {
required: true,
minlength: 8,
equalTo: "#Pwd"
},
Email: {
required: true,
email: true
},
Agree: "required"
},
messages: {
FirstName: {
required: "First name required.",
accept: "Letters only please."
},
LastName: {
required: "Last name required.",
accept: "Letters only please."
},
Pwd: {
required: "Please create a password.",
minlength: "Password must be at least 8 characters."
},
CPwd: {
required: "Please confirm password.",
minlength: "Password must be at least 8 characters.",
equalTo: "Passwords do not match."
},
Email: "Email address is not valid.",
Agree: "Please accept our policy."
},
submitHandler: function() {
$.ajax({
type: "POST",
url: "../process.php",
data: $('form#register').serialize(),
success: function (msg) {
$("#thanks").html(msg)
},
error: function () {
alert("failure");
}
});
}
});
}); // end document.ready
对于现在使用新Bootstrap(当前为v3.1.1)的用户来说,这只是对上一个答案的更新,需要回答!
$('#passwModal').on('hidden.bs.modal', function (e) {
$('#Username').val('');
});
为了确保您的表单在重新打开模态时为空,您可以对表单上的每个字段执行此操作。当关闭模态时,它将删除模态隐藏状态上字段的最后一个值:
$('#passwModal').on('hidden', function () {
$('#Username').val("");
});