Question

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

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

以下是代码：

HTML code：

<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');    
  });

});

感谢。

Answer 1

您可以添加以下内容：

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

在显示之前

Answer 2

你实际上没有任何能够做你想做的JS代码。

你有没有尝试过什么？

这个怎么样：

$('#newModal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});

如何从Bootstrap模式对话框的HTML控件中清除以前填充的内容？

2 个答案: