Reset in input fields after submit with Jquery


By sending the input field values through JQuery to a PHP page I can do the action without refreshing the main page, but I can not make the input fields "empty" again?!? How do I then apply the "reset" after submission?


<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 />


    width: 150px;
    height: 30px;
    top: 150px;
    border: 1px solid black;
    color: red;


$(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
        // Se a resposta é um erro
        if (resposta != false) {
          // Exibe o erro na div
        // 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


asked by anonymous 04.07.2014 / 16:44

4 answers


Clearing all fields on a form:

  .not(':button, :submit, :reset, :hidden')

Resetting the initial values of a form:


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

JSFiddle Example

04.07.2014 / 17:13

Complementing the previous response to leave the generic function using only javascript, it follows the code that works for other input types.

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;
12.01.2015 / 17:18

Use the following:

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

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



Note: This can not reset certain fields, such as type="hidden".

The same thing can be done using trigger jQuery() :


try to search a little in stackoverflow, there are several topics approaching it

Reset Form

12.01.2015 / 17:27