terça-feira, 5 de fevereiro de 2013

Limpar Campos textbox com Jquery

Olá pessoal  meu nome e Wesley Neves, e  hoje vou  mostrar uma dica muito produtiva.
Usando ASP.NET e Jquery.

Imagine que você tenha um formulário com diversos campos TextBox e tenha um botão para limpar os dados
digitados, mas você não quer fazer isso no servidor, mas sim no cliente.

Então vamos lá.

No seu Web forms você vai ter uma <div> aonde vai ficar todos os seus controles textbox

<div id="controles">
                    <div class="lblCodigo">
                        Codigo:
                    </div>
                    <div class="txtCodigo">
                        <asp:TextBox ID="txtCodigo" ClientIDMode="Static" runat="server"
                            Width="83%" />
                      </div>
                    <div class="lblNome">
                        Nome:
                    </div>
                    <div class="txtNome">
                        <asp:TextBox ID="txtNomeCategoria" ClientIDMode="Static"
                            runat="server" Width="100%" />
                    </div>
                    <div class="lblDescricao">
                        Descrição.:
                    </div>
                    <div class="txtDescricao">
                        <asp:TextBox ID="txtDescricao" runat="server" ClientIDMode="Static" Width="100%"
                            MaxLength="500" TextMode="MultiLine" Rows="1"/>
                    </div>
<div>

<asp:ImageButton ID="btnLimpar" runat="server" ClientIDMode="Static" ImageUrl="~/SuaImagem"
                                OnClientClick="LimpaCampos(false)" CausesValidation="False"  />




Repare que como o txtDescricao tem o atributo  TextMode="MultiLine" ele e renderizado como um TEXTAREA.

agora crie um arquivo javascript  importe a referência dele no webforms e digite o código abaixo:

// Limpa os campos e evita o postback
function LimpaCampos(post) {
    $('#controles').find('input').val('').find($("textarea").val(''));

    if(post== false) {
     $('#MainForm').submit(function() {
        return false;

       });
    }

}

Pronto você agora limpa todos os dados do seu formulário sem ter que ir no servidor.
Simples,rápido e fácil.

Até a próxima.

Nenhum comentário:

Postar um comentário