Clear inputs inside form after sending the message

Question

I have a form with some input, and I want that after the customer sends the form, it clears the fields.

My HTML:

function contatoForm() {

  if ($.trim($('#contatoNome').val()) == '' || $.trim($('#contatoNome').val()) == 'Nome') alert('Informe seu nome!');
  else if ($.trim($('#contatoEmail').val()) == '' || $.trim($('#contatoEmail').val()) == 'E-mail') alert('Informe seu e-mail!');
  else if ($.trim($('#contatoTelefone').val()) == '' || $.trim($('#contatoTelefone').val()) == 'Telefone') alert('Informe seu telefone!');
  else if ($.trim($('#contatoCidade').val()) == '' || $.trim($('#contatoCidade').val()) == 'Cidade') alert('Informe a sua cidade!');
  else if ($.trim($('#contatoUf').val()) == '' || $.trim($('#contatoUf').val()) == 'UF') alert('Informe a Unidade Federativa!');
  else if ($.trim($('#contatoMensagemForm').val()) == '' || $.trim($('#contatoMensagemForm').val()) == 'Mensagem') alert('Informe a mensagem!');
  else {
    $.post('carregamentos/contato.php',
      $('#contatoFormulario').serialize(),
      function(abc) {
        alert('Sua mensagem foi enviada com sucesso!');
      }
    );
  }
  return false;
}

<form name="contatoFormulario" id="contatoFormulario" action="" method="post" onsubmit="return contatoForm();">
  <input type="text" id="contatoNome" name="contatoNome" value="nome*" placeholder="nome*" />
  <input type="text" id="contatoEmail" name="contatoEmail" value="e-mail*" placeholder="e-mail*" />
  <input type="text" id="contatoTelefone" name="contatoTelefone" value="telefone" placeholder="telefone" />
  <input class="grid_325 f-left" type="text" id="contatoCidade" name="contatoCidade" value="cidade" placeholder="cidade" />
  <input class="grid_145 f-right" type="text" id="contatoUf" name="contatoUf" value="UF" placeholder="UF" />
  <textarea type="text" id="contatoMensagemForm" name="contatoMensagemForm" value="mensagem*" placeholder="mensagem*"></textarea>
  <div class="contatoFormularioPreenchimento">(*) Preenchimento obrigat&oacute;rio.</div>
  <div class="clear"></div>
  <input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" checked="checked" value="news" />
  <label for="checkboxG5" class="css-label radGroup1 contatoLabel margin-top-20">Quero receber as novidades por e-mail.</label>
  <div class="clear"></div>
  <span id="enviaText" class="saibaMaisFlecha f-left margin-top-30 d-block cp">Enviar</span>
  <input id="envia" type="submit" class="flechaPreta f-left margin-top-25 cp margin-left-10" value="" />
  <input style="display:none" type="reset" id="limpa" />
</form>

I tried to do with

$( "#envia" ).click(function() {
    $("#limpa").click();
});

Make the same click that sends the form, already clear the fields, only in real, it is cleaning before sending, so my JS that validates the fields, says that they are not filled, what would be the best way to clear the fields once send the form?

Answer 1

You can also use:

$('#form_id_teste input[type="text"]').each(function() {
    $(this).val('');
})

or:

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

Sources or references of the same question:
https://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method
https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery

Answer 2

Simulate the click on the button after the form is sent by ajax.

$.post('carregamentos/contato.php',
  $('#contatoFormulario').serialize(),
  function(abc) {
    alert('Sua mensagem foi enviada com sucesso!');
    $('#limpa').click(); // Aqui o form já foi submetido, então pode ser limpo
  }
);