Modal Popup not clearing the fields

Question

I have used Twitter Bootstrap Modal popup for form. I have two buttons one is submit and close. If I click close button or 'x' button on top of popup is closing but if I open again The fields are not clearing as like in this

  <asp:Button ID="btnShowModal" runat="server" Text="+" CssClass="btn btn-primary btn-info " data-target="#pnlModal1" data-toggle="modal"  OnClientClick="javascript:return false;" />
        <div id="pnlModal1" role="dialog" tabindex="-1" class="modal fade">
                            <div class="modal-dialog">
                                <div id="Div1" class="modal-content" runat="server">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">
                                            <span aria-hidden="true">&times;</span>
                                            <span class="sr-only">Close</span>
                                        </button>
                                        <h4 class="modal-title">Bank Details</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row-fluid">
                                            <div class="myform">
                                                <table class="table table-bordered table-hover">
                                                    <tr>
                                                        <td>Bank Name : </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBankName" runat="server" ></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvBankName" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtBankName" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Account Name:</td>
                                                        <td class="aa" >
                                                            <asp:TextBox ID="txtAccName" runat="server" ></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvAccName" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtAccName" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Account Number:</td>

                                                        <td>
                                                            <asp:TextBox ID="txtAccNo" runat="server"></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvAccNo" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtAccNo" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Country:</td>
                                                        <td>
                                                            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvCountry" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtCountry" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="modal-footer">
                                                <asp:Button ID="btnAddBankAccount" runat="server" Text="Add" CssClass="btn btn-info" UseSubmitBehavior="false" ValidationGroup="savebankdet" OnClick="btnAddBankRecord_Click" />
                                                <button class="btn btn-info" id="btnbnkclose" data-dismiss="modal"  aria-hidden="true">Close</button>
                                            </div>


  </div>

Answer 1

http://getbootstrap.com/javascript/#modals shows an event for when a modal is hidden. Just tap into that:

$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/5LCSU/

I would suggest the above as it bind the clearing to the modal itself instead of the close button, but I realize this does not address your specific question. You could use the same clearing logic bound to the dismiss buttons:

$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/jFyH2/