关闭或提交后在模态中重置表单

时间:2021-03-29 15:16:21

标签: ajax bootstrap-modal

我正在使用引导程序打开一个带有表单的模态:

<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">&times;</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 接收数据并将其发送到数据库)。模态关闭但我重新打开它,表单仍然充满旧值。

如果用户关闭模态或提交它,有没有办法清理整个表单?

0 个答案:

没有答案