Twitter Bootstrap Question posted in

Modal Popup not clearing the fields – Twitter bootstrap

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>
Tags:

5

Answers


  1. 0

    you should use aomethind like this: 

     $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
    });
    Login or Signup to reply.
  2. 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(' ')*/
});
    Login or Signup to reply.
  3. 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("");})

    Login or Signup to reply.
  4. 0

    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/

    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search