1

我正在为我的网站使用Bootstrap 框架 v3.3.0。

我正在处理多个模式对话框。在一个对话框中，一种表单具有一个文本字段、一个日期控件和一个文件控件。成功提交表单后，我隐藏此模式并显示另一个带有成功消息的模式。在此模式上，有一个按钮，其文本为“提交另一种表单”。当用户单击此按钮时，包含成功消息的对话框将关闭，并且包含表单的模式对话框将打开，但它包含我之前填写的值。我不再想要这些值。我想清除这些字段。我该怎么做？

以下是代码：

HTML 代码：

<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Submit Form</h4>
          </div>
          <div class="modal-body" style="max-height: 300px; overflow-y: auto;">
            <br/>
            <!-- The form is placed inside the body of modal -->
            <form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control" name="reg_id" id="reg_id"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">                   
                  <input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />                  
                </div>
              </div>  
              <div class="form-group">
                <div class="col-sm-5 col-sm-offset-5">
                  <button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Your Request Uploaded Successfully</h4>
          </div>
          <div class="modal-body" style="max-height: 300px; overflow-y: auto;">
            <h4 style="font-weight:bold;text-align: center;">Thank you!</h4>
            <p style="text-align: justify;">Your request has been successfully submitted.</p>
            <div class="modal-footer" style="text-align:center;">
              <button type="button" class="btn btn-danger" id="btn_exit">Exit</button>
              <button type="button" class="btn btn-success" data-dismiss="modal" id="btn_scan_another">Scan Another Receipt</button>        
            </div>
          </div>
        </div>
      </div>
    </div>

jQuery代码：

$(document).ready(function() {
$("#btn_scan_another").on("click", function(event){
    event.preventDefault();
    $('#successModal').modal('hide');

    $('#newModal').modal('show');    
  });

});

谢谢。

4

2 回答 2

3

您可以添加如下内容：

$('#newModal').find('form')[0].reset();

在展示之前

于 2014-12-03T11:44:59.857 回答
0

您实际上没有任何 JS 代码可以满足您的需求。

你试过什么吗？

这个怎么样：

$('#newModal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});
于 2014-12-03T11:44:34.870 回答