如何从Bootstrap模态对话框的HTML控件中清除以前填写的内容?

PHP情人

我正在为我的网站使用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');    
  });

});

谢谢。

雪貂

您可以添加如下内容:

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

在展示它之前

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么模态对话框中的内容会被截断?

来自分类Dev

如何从文本框中清除以前的搜索?

来自分类Dev

如何简单地在ember组件中包装bootstrap 2模态对话框?

来自分类Dev

Bootstrap模态对话框未显示

来自分类Dev

Bootstrap模态对话框未显示

来自分类Dev

如何处理硒中的模态对话框?

来自分类Dev

如何在 ReactJS 中显示模态对话框?

来自分类Dev

如何清除或制作/删除HTML对话框的新实例

来自分类Dev

当用户在 JQuery UI 中的模态对话框之外单击时,如何防止模态对话框关闭?

来自分类Dev

如何使Tab键在此对话框控件中工作?

来自分类Dev

如何获取宽度-对话框中控件的高度

来自分类Dev

如何实现模态对话框的效果

来自分类Dev

引导模态对话框中的验证

来自分类Dev

在AngularJS中显示模态对话框

来自分类Dev

棱镜7.2中的模态对话框

来自分类Dev

在模态对话框中显示图标

来自分类Dev

在AngularJS中显示模态对话框

来自分类Dev

模态对话框中的Ajax Spinner

来自分类Dev

在画布中定位模态对话框

来自分类Dev

我们如何从jQuery对话框中传递参数并更改html的内容?

来自分类Dev

ASP Update Panel中的Bootstrap模态对话框阻止了tinyMCE插件中的输入焦点

来自分类Dev

如何使用Twitter Bootstrap在模糊背景下进行模态对话框?

来自分类Dev

Twitter Bootstrap-中心模态对话框

来自分类Dev

在模态对话框中使用Bootstrap Clockpicker

来自分类Dev

单元测试React Bootstrap模态对话框

来自分类Dev

javascript的Bootstrap模态对话框集属性

来自分类Dev

按顺序显示 Bootstrap 模态对话框

来自分类Dev

AngularJS ui.bootstrap 模态对话框未显示

来自分类Dev

如何清除以前绘制的Matplotlib文本框?

Related 相关文章

热门标签

归档