How to clear previously filled in contents from HTML controls of Bootstrap modal dialog?

PHPLover

I'm using Bootstrap framework v3.3.0 for my website.

I'm dealing with multiple modal dialog boxes. In one dialog there is one form having one textfield, one date control and one file control. After submitting the form successfully I hide this modal and show another modal with success message. On this modal there is one button having text "Submit another form". When user clicks on this button the dialog containing success message get close and the modal dialog containing form opens but it contains the previous values that I filled in. I don't want these values again. I want to clear these fields. How should I do this?

Following is the code:

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>

The jQuery code :

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

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

});

Thanks.

Ferret

You could add something like:

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

before showing it

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

From Dev

Validation in bootstrap modal dialog

From Dev

AngularJS - How to Create a Modal Dialog from the Controller

From Dev

How can I clear the server-side MVC model validation errors from a bootstrap modal?

From Dev

How to switch from a bootstrap modal to a angular modal

From Dev

href in modal dialog in bootstrap

From Dev

Displaying a bootstrap Modal dialog from Angular Controller

From Dev

How clear bootstrap modal on hide

From Dev

How to show a modal dialog from a modeless form?

From Dev

Cancel button on bootstrap modal doesn't clear filled data

From Dev

how to clear data of bootstrap modal at the time of submit

From Dev

How to reuse modal html from bootstrap?

From Dev

How to clear the contents of a file from the command line?

From Dev

How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

From Dev

How can we change the HTML table contents dynamically using javascript through modal-dialog?

From Dev

How can I clear the server-side MVC model validation errors from a bootstrap modal?

From Dev

How can I clear the MVC jquery unobtrusive validation errors from a bootstrap modal?

From Dev

How to dismiss a web modal dialog from bootstrap manually?

From Dev

How to switch from a bootstrap modal to a angular modal

From Dev

How to show a modal dialog using bootstrap

From Dev

How to get selected item in Bootstrap 3 dynamic dropdown modal dialog from javascript

From Dev

Bootstrap modal dialog set attributes from javascript

From Dev

how to clear data of bootstrap modal at the time of submit

From Dev

How to clear the contents of an iFrame from another iFrame

From Dev

Contents from remote page to Bootstrap Modal

From Dev

How to detect the dismissal of a bootstrap modal dialog in javascript?

From Dev

Prevent bootstrap modal from closing when inputs are not filled

From Dev

Header from bootstrap with HTML contents

From Dev

How to update the contents of a Bootstrap modal?

Related Related

  1. 1

    How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

  2. 2

    Validation in bootstrap modal dialog

  3. 3

    AngularJS - How to Create a Modal Dialog from the Controller

  4. 4

    How can I clear the server-side MVC model validation errors from a bootstrap modal?

  5. 5

    How to switch from a bootstrap modal to a angular modal

  6. 6

    href in modal dialog in bootstrap

  7. 7

    Displaying a bootstrap Modal dialog from Angular Controller

  8. 8

    How clear bootstrap modal on hide

  9. 9

    How to show a modal dialog from a modeless form?

  10. 10

    Cancel button on bootstrap modal doesn't clear filled data

  11. 11

    how to clear data of bootstrap modal at the time of submit

  12. 12

    How to reuse modal html from bootstrap?

  13. 13

    How to clear the contents of a file from the command line?

  14. 14

    How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

  15. 15

    How can we change the HTML table contents dynamically using javascript through modal-dialog?

  16. 16

    How can I clear the server-side MVC model validation errors from a bootstrap modal?

  17. 17

    How can I clear the MVC jquery unobtrusive validation errors from a bootstrap modal?

  18. 18

    How to dismiss a web modal dialog from bootstrap manually?

  19. 19

    How to switch from a bootstrap modal to a angular modal

  20. 20

    How to show a modal dialog using bootstrap

  21. 21

    How to get selected item in Bootstrap 3 dynamic dropdown modal dialog from javascript

  22. 22

    Bootstrap modal dialog set attributes from javascript

  23. 23

    how to clear data of bootstrap modal at the time of submit

  24. 24

    How to clear the contents of an iFrame from another iFrame

  25. 25

    Contents from remote page to Bootstrap Modal

  26. 26

    How to detect the dismissal of a bootstrap modal dialog in javascript?

  27. 27

    Prevent bootstrap modal from closing when inputs are not filled

  28. 28

    Header from bootstrap with HTML contents

  29. 29

    How to update the contents of a Bootstrap modal?

HotTag

Archive