Clear Modal Bootstrap

Asked

Viewed 3,218 times

0

How can I clean the modal data, sometimes the user enters the data but not saved, and if he opens the modal again, the data is there, I would like to clean this data, how should I proceed? Sometimes it also happens to save, and when clicking to add the new data, the old data that was saved is still in modal. Follow the code of 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

2 answers

5


You can clean up the inputs after the event Hidden.bs.modal be 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>
<script src="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>

  • It cleans the data, but even clears up what is written on the button, I would like it to clean only the textbox.

  • @marianac_costa I edited the answer by selecting only the inputs which are of the text type. See if it suits you now. If you have a specific field, you can use some type of selector, such as id or class. Something like $('#txtNome').val(' ').

  • It worked, thank you.

1

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

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

Browser other questions tagged javascript asp.net webforms

You are not signed in. Login or sign up in order to post.