我正在使用引导程序打开一个带有表单的模态:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Sign up</button>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
</div>
<form name="myform" id="myform" class="form-horizontal" role="form" method="POST">
<div class="modal-body" style="text-align:left">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Your name</label>
<input required type="text" class="form-control" name="name" value="">
<input type="checkbox" id="" name="checkboxes[]" value="checkbox">
<label for="checkbox">Choice 1</label>
[...]
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="submitForm">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="reset">Cancel</button>
</div>
</form>
</div>
</div>
</div>
我写了一些 javascript 来处理表单并将数据发送到 process.php 页面:
$("#submitForm").click(function (e) {
var valid = this.form.checkValidity();
$("#valid").html(valid);
if (valid) {
event.preventDefault();
$.ajax({
type: "POST",
url: "process.php",
data: $('#myform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
error: function (msg) {
$("#error").html(msg)
$("#error").show();
}
});
}
});
第一次运行良好(process.php 接收数据并将其发送到数据库)。模态关闭但我重新打开它,表单仍然充满旧值。
如果用户关闭模态或提交它,有没有办法清理整个表单?