Reset to input fields after Ubmit with Jquery

Question

By sending input fields values via Jquery to a PHP page I can do the action without "refreshing" the main page but I can’t make input fields "empty" again?!? How to apply "reset" after submission?

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

Answer 1

Clearing all fields of a form:

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

Resetting the initial values of a form:

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

Now just choose one of the solutions and add after your $.post().

Example in Jsfiddle

• Source of cleaning techniques

Answer 2

Complementing the previous answer to make the function more generic using javascript only, follow the code that works for other types of 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;
    } 
}

Answer 3

You can use the native Javascript method reset() to reset the entire form to its default state.

Example:

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

Note: This cannot reset certain fields, such as type = "Hidden".

Amesma thing can be performed using Trigger jQuery():

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

try searching a little in stackoverflow, there are several topics addressing the same

Reset Form

Answer 4

Use the following:

var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
  if (elements[i].type == "text") {
    elements[i].value = "";
  }
}

Answer 5

Using Jquery

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