Clear Modal Bootstrap

Question

Clear Modal Bootstrap

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

How can I clear the modal data, sometimes the user types the data, but does not save, and if it opens the modal again, the data is there, I would like to clear this data, how should I proceed? Sometimes it also happens to save, and when clicking to add the new data, the old data that has been saved is still in the modal. Here is the code for my modal:

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="grid-10">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Cadastrar Banco</h4>
        </div>
        <div class="modal-body">
          <br />
          <asp:Label ID="Label2" runat="server" Text="Nome"></asp:Label>
          <asp:TextBox ID="txtNome" runat="server" CssClass="radiusInput"></asp:TextBox>
          <br />
          <br />
          <br />
          <asp:Label ID="Label1" runat="server" Text="Número"></asp:Label>
          <asp:TextBox ID="txtNumero" runat="server"></asp:TextBox>
          <br />
          <br />
          <br />
        </div>
        <div class="modal-footer">
          <asp:Button ID="Button1" runat="server" Text="Gravar" CssClass="radiusInput" OnClick="Button1_Click1" />
        </div>
      </div>
    </div>
  </div>
</div>

javascript asp.net webforms

asked by anonymous 19.06.2017 / 21:56

2 answers

1

You can use the hidden.bs.modal event of the modal to clear the data when it is hidden, as follows:

$('#myModal').on('hidden.bs.modal', function (e) {
     // Seu código aqui..
})

19.06.2017 / 22:12

Remove spacing created between image and div Center a circular div within another div

score 3 · Accepted Answer

You can clear the inputs after the hidden.bs.modal event is called.

A simple example would be this:

$(document).ready(function() {
  $('.modal').on('hidden.bs.modal', function() {
    console.log('fechar modal')
    $(this).find('input:text').val('');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>

<div class="modal fade">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <input class="form-control" placeholder="nome" />
        <input class="form-control" placeholder="Número" />
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Fechar</a>
      </div>
    </div>
  </div>
</div>