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

Question

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.

Answer 1

You could add something like:

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

before showing it