如果 return false,如何在提交时关闭 bootstrap 模态?
How to close bootstrap modal on submit if return false?
大家好,我想问一下如果 return false 如何在提交时关闭 bootstrap 模态?因为如果我在表单 return false.
时单击提交,我的模式不会关闭
这是我使用 Jquery 验证的验证:
<script>
$(function() {
// Disable Enter Key on submit
$('#myform').keypress(function(event) {
if(event.which == 13 || event.keyCode == 13) {
event.preventDefault();
return false;
}
});
$.validator.addMethod("nameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z\s\.]+$/i.test(value);
}, "Please input alphabet only");
$('#myform').validate({
ignore: "",
rules: {
fname : {
required: true,
nameRegex: true
},
lname : {
required: true,
nameRegex: true
},
position : {
nameRegex: true
},
supervisor_name : {
required: true,
nameRegex: true
}
},
messages: {
fname: {
required: "This field is required",
nameRegex: "Please input alphabet only"
},
lname: {
required: "This field is required",
nameRegex: "Please input alphabet only"
},
position: {
nameRegex: "Please input alphabet only"
},
supervisor_name: {
required: "This field is required",
nameRegex: "Please input alphabet only"
}
},
errorPlacement: function (label, element) {
label.insertAfter(element);
}
});
});
</script>
这是我的表格
<form id="myform" role="form" style="width: 800px;" action="change_info.php" method="POST">
<div class="red">
<div><label for="atasan"><b>First Name</b></label> </div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="fname" type="text" name="fname" value="<?php echo $get_data['first_name'] ?>" autocomplete="off"><br>
<br>
<div class="red">
<div>
<label for="atasan"><b>Last Name</b></label>
</div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="lname" type="text" name="lname" value="<?php echo $get_data['last_name'] ?>" autocomplete="off"><br>
<br>
<div>
<label for="atasan"><b>Position</b></label>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="atasan" type="text" name="position" value="<?php echo $get_data['position'] ?>" autocomplete="off"><br>
<br>
<div class="red">
<div>
<label for="atasan"><b>Supervisor Name</b></label>
</div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="atasan" type="text" name="supervisor_name" value="<?php echo $get_data['supervisor_name'] ?>" autocomplete="off"><br>
<br>
<button class="btn btn-primary" type="button" data-target="#myModal" data-toggle="modal">OK</button>
<!-- Modal START -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3><b>Change Name</b></h3>
</div>
<div class="modal-body" style="float: center;">
<h3 style="text-align: center;" class="modal-title"><b>Are you sure?</b></h3>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span> <b>Yes!</b></button>
<button class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-thumbs-down"></span><b>No!</b></button>
</div>
</div>
</div>
</div>
<!-- Modal END -->
</form>
// If the modal is showing toggle will hide it
$('#myModal').modal('toggle');
// If you want to make sure it hides even if not showing.
$('#myModal').modal('hide');
'#myModal 将是您打开并想要关闭的 bootstrap 模式的 domElementId
大家好,我想问一下如果 return false 如何在提交时关闭 bootstrap 模态?因为如果我在表单 return false.
时单击提交,我的模式不会关闭这是我使用 Jquery 验证的验证:
<script>
$(function() {
// Disable Enter Key on submit
$('#myform').keypress(function(event) {
if(event.which == 13 || event.keyCode == 13) {
event.preventDefault();
return false;
}
});
$.validator.addMethod("nameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z\s\.]+$/i.test(value);
}, "Please input alphabet only");
$('#myform').validate({
ignore: "",
rules: {
fname : {
required: true,
nameRegex: true
},
lname : {
required: true,
nameRegex: true
},
position : {
nameRegex: true
},
supervisor_name : {
required: true,
nameRegex: true
}
},
messages: {
fname: {
required: "This field is required",
nameRegex: "Please input alphabet only"
},
lname: {
required: "This field is required",
nameRegex: "Please input alphabet only"
},
position: {
nameRegex: "Please input alphabet only"
},
supervisor_name: {
required: "This field is required",
nameRegex: "Please input alphabet only"
}
},
errorPlacement: function (label, element) {
label.insertAfter(element);
}
});
});
</script>
这是我的表格
<form id="myform" role="form" style="width: 800px;" action="change_info.php" method="POST">
<div class="red">
<div><label for="atasan"><b>First Name</b></label> </div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="fname" type="text" name="fname" value="<?php echo $get_data['first_name'] ?>" autocomplete="off"><br>
<br>
<div class="red">
<div>
<label for="atasan"><b>Last Name</b></label>
</div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="lname" type="text" name="lname" value="<?php echo $get_data['last_name'] ?>" autocomplete="off"><br>
<br>
<div>
<label for="atasan"><b>Position</b></label>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="atasan" type="text" name="position" value="<?php echo $get_data['position'] ?>" autocomplete="off"><br>
<br>
<div class="red">
<div>
<label for="atasan"><b>Supervisor Name</b></label>
</div>
</div>
<input class="col-md-4 col-xs-4 form-control3" id="atasan" type="text" name="supervisor_name" value="<?php echo $get_data['supervisor_name'] ?>" autocomplete="off"><br>
<br>
<button class="btn btn-primary" type="button" data-target="#myModal" data-toggle="modal">OK</button>
<!-- Modal START -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3><b>Change Name</b></h3>
</div>
<div class="modal-body" style="float: center;">
<h3 style="text-align: center;" class="modal-title"><b>Are you sure?</b></h3>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span> <b>Yes!</b></button>
<button class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-thumbs-down"></span><b>No!</b></button>
</div>
</div>
</div>
</div>
<!-- Modal END -->
</form>
// If the modal is showing toggle will hide it
$('#myModal').modal('toggle');
// If you want to make sure it hides even if not showing.
$('#myModal').modal('hide');
'#myModal 将是您打开并想要关闭的 bootstrap 模式的 domElementId