11

Fazendo o envio dos valores dos campos input através de JQuery para uma página PHP consigo efetuar a ação sem dar "refresh" na página principal porém, não consigo fazer com que os campos input voltem a ficar "vazios"?!? Como aplicar então o "reset" após a submissão?

HTML:

<div id='status'></div>
<form id="new_user" method="post" action="javascript:func()">
    <input type='text' name='name' id='name'/>
    <br />
    <input type='text' name='mail' id='mail'/>
    <br /><input type='password' name='password' id='password'/>
    <br /><input type='submit' name='submit' id='submit' value='enviar'/>
    <br />
</form>

CSS:

#status{
    position:absolute;
    width: 150px;
    height: 30px;
    top: 150px;
    left:10px;
    border: 1px solid black;
    color: red;
}

JQuery:

$(function($) {
  // Quando o formulário for enviado, essa função é chamada
  $("#new_user").submit(function() {
    // Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
    var name = $("#name").val();
    var mail = $("#mail").val();
    var password = $("#password").val();
    // Exibe mensagem de carregamento
    $("#status").html("<center><img src='core/img/loader.gif' alt='Enviando'/></center>");
    // Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
    $.post('#', {name: name, mail: mail, password: password }, function(resposta) {
        // Quando terminada a requisição
        // Exibe a div status
        $("#status").slideDown();
        // Se a resposta é um erro
        if (resposta != false) {
          // Exibe o erro na div
          $("#status").html(resposta);
        } 
        // Se resposta for false, ou seja, não ocorreu nenhum erro
        else {
          // Exibe mensagem de sucesso
          $("#status").html("<center>Cadastro realizado com sucesso!</center>");
          // Limpando todos os campos
          $("#name").val("");
          $("#mail").val("");
          $("#password").val("");
        }
    });
  });
});

jsfiddle

6 Respostas 6

21

Limpando todos os campos de um formulário:

$(':input','#form')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Redefinindo os valores iniciais de um formulário:

$('#form')[0].reset();

Agora basta escolher uma das soluções e adicionar após o seu $.post().

Exemplo no JSFiddle

5
  • Obrigado amigo. Seu primeiro exemplo não funcionou comigo?!? más o segundo ficou perfeito só uma nota: ele ficou dentro de else. Grato pela ajuda :) Commented 4/07/2014 às 15:43
  • @LauroMoraes Se você abrir o JSFiddle da resposta ele está funcionando. Você não esqueceu de trocar o ID do formulário?
    – utluiz
    Commented 4/07/2014 às 15:48
  • Troquei sim...mas não faço ideia do pq não funcionou aqui comigo. Já o segundo exemplo (redefinindo valores iniciais) funcionou perfeitamente. Após o retorno positivo dos dados e a resposta. Mais uma vez grato pela ajuda :) Commented 4/07/2014 às 15:58
  • Como faz para resetar todos os campos da página?
    – Dr.G
    Commented 19/02/2018 às 3:02
  • @Dr.G O segundo trecho de código mostra como resetar um form. Se tiver vários forms em uma página, faça o reset em todos eles ao invés de em um só. Se precisar de mais detalhes, sugiro fazer uma nova pergunta.
    – utluiz
    Commented 20/02/2018 às 1:58
3

Complementando a resposta anterior para deixar a função mais genérica usando apenas javascript, segue o código que funciona para outros tipos de input.

var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
    if (elements[i].type == "text") {
        elements[i].value = "";
    } 
    else if (elements[i].type == "radio"){
        elements[i].checked = false;  
    }
    else if (elements[i].type == "checkbox"){
        elements[i].checked = false;
    }
    else if (elements[i].type == "select") {
        elements[i].selectedIndex = 0;
    } 
}
1

Você pode usar o método nativo do JavaScript reset() para redefinir o formulário inteiro ao seu estado padrão.

Exemplo:

$("#myForm")[0].reset();

Nota: Isto não pode repor certos campos, como type = "hidden".

Amesma coisa pode ser realizada utilizando trigger jQuery():

$("#myForm").trigger("reset");

tente pesquisar um pouco no stackoverflow, existem vários topicos abordando o mesmo

Reset Form

0

Use o seguinte:

var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
  if (elements[i].type == "text") {
    elements[i].value = "";
  }
}
1
  • Não funcionou aqui...e tenho 3 campos, um password e dois text Commented 4/07/2014 às 15:12
-1

Usando JQuery

$('#form').each(function () { this.reset(); });

-2

Usando jQuery você pode optar por:

$("#form").trigger("reset");
1
  • 3
    A resposta é ok, porem já existe uma resposta de 2015 nessa pergunta indicando essa possibilidade. Commented 3/08/2022 às 21:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .