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>

As like in given fiddle fill and close 'x' and open again, the fields are not clearing http://jsfiddle.net/alexsuch/RLQhh/ — charan tej, Jun 06 '16 at 10:12
Hope this link will help you: [How to reset the bootstrap modal when it gets closed and open it fresh again?](http://stackoverflow.com/questions/26863003/how-to-reset-the-bootstrap-modal-when-it-gets-closed-and-open-it-fresh-again) — Rahul Hendawe, Jun 06 '16 at 11:51

score 1 · Accepted Answer · answered Jun 06 '16 at 10:50

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/

answered Jun 06 '16 at 10:50

Kinjal Gohil

958
9
15

Hi Gohil this code can be useful if I use input, textarea tags html tags but here I am using Asp Controls like TextBox. I tried your code but it didn't worked – charan tej Jun 06 '16 at 11:05
It doesn't mater if you are using ASP controls. It will work for asp controls also. – Kinjal Gohil Jun 07 '16 at 03:24
you can try with assign common class to all and then instead of input you can use class name in your jquery code. please try with this, it will work. – Kinjal Gohil Jun 07 '16 at 03:26
@Gohil it worked for me but it is not resetting the validation messages. Can you help me here – charan tej Jun 15 '16 at 09:52

score 0 · Answer 2 · answered Jun 06 '16 at 10:14

0

you should use aomethind like this:

 $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
    });

answered Jun 06 '16 at 10:14

Irakli Gabisonia

806
8
19

http://stackoverflow.com/questions/26863003/how-to-reset-the-bootstrap-modal-when-it-gets-closed-and-open-it-fresh-again – Irakli Gabisonia Jun 06 '16 at 10:16
If I use that $(".modal-body1").html(""); It will print empty Form. – charan tej Jun 06 '16 at 10:20
you should reset form not modal body – Irakli Gabisonia Jun 06 '16 at 10:31

Bonsai · Answer 3 · 2016-06-06T10:28:10.787

0

For reset your Bootstrap modal, you can do this JS

$('.modal').on('hidden.bs.modal',function(){
   $(this).find('form')[0].reset(); /*Or reset your field with .val(' ') and .text(' ')*/
});

edited Jun 06 '16 at 10:28

answered Jun 06 '16 at 10:17

Bonsai

346
3
17

David Chelliah · Answer 4 · 2016-06-06T10:46:07.473

0

You have to clear all the form fields within the bootstrap modal when pop-up is shown

$('#myModal').on('shown.bs.modal', function () {$('#myform')[0].reset(); })

Since your code doesn't have a form tag shown, you have to resort to clearing each and every input elements through script like below $('#myModal').on('shown.bs.modal', function () {$('input [type="text"]').val("");})

edited Jun 06 '16 at 10:46

answered Jun 06 '16 at 10:21

David Chelliah

1,319
1
13
24

score 0 · Answer 5 · answered Jun 06 '16 at 10:50

try in aspx

<script>
function ModalClose() {
     $("#PanelModal").modal('hide');
}
</script>
<asp:Button runat="server" CssClass="btn btn-warning" Text="Close" ID="ButtonClose" OnClick="ButtonClose_Click" />

in aspx.cs

protected void ButtonClose_Click(object sender, EventArgs e)
{
     txtBankName.Text = "";
     ClientScript.RegisterStartupScript(this.GetType(), "close", "ModalClose()", true);
}

this can be use without animation

Modal Popup not clearing the fields

5 Answers5