Clear inputs inside form after sending the message

Question

Clear inputs inside form after sending the message

Navigation

#1 by (2 votes)
#2 by (1 votes)

-1

I have form with some input , and I want that after the client sends the form, it cleans up 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();
});

Do the same click that sends the form, already clean the fields, except in the real one, it is cleaning before sending, then my JS that does the validation of the fields, says that they are not filled, what would be the best way to clear the fields once you submit the form?

jquery

asked by anonymous 06.02.2015 / 14:27

2 answers

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:
link
link

06.02.2015 / 14:28

Calling function without signature knowledge [closed] Option Styling via CSS [closed]

score 2 · Accepted Answer

Simulate the button after the form is submitted 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
  }
);