Clear fields with Jquery

Asked

Viewed 27,033 times

1

Colleagues. I’m trying to clear the fields after Submit from a form, but I’m not getting it. Look:

$(document).ready(function() {
$("#resposta").ajaxStart(function(){ 
    $(this).html("Mensagem sendo enviada, por favor aguarde..."); 
           }        
        );
$("#submit").click(function() {
var nome     = $("#nome").val();
var email    = $("#email").val();
var assunto    = $("#assunto").val();
var mensagem = $("#mensagem").val();
$.post('enviar.php', { nome: nome, email: email, assunto: assunto, mensagem: mensagem, contato: true }, function(data) {

if (data !== false) {
$("#resposta").html(data);
}else{
$("#nome").val("");
$("#email").val("");
$("#assunto").val("");
$("#mensagem").val("");

    }

});
return false;
});
});

I tried it the following ways and it didn’t work either:

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

and

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

1 answer

7


Roughly speaking using the Submit() of the form on Jquery would be:

$(function(){
  $("#myForm").submit(function() { //no submit do formulário
    $('#myForm input').val(""); //coloca todos valores de todos inputs do form como vazio
    $('#myForm input[type = submit]').val("Enviar"); //recoloca o texto no botão
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
  <input type="text" placeholder="Campo 01" name="campo01"/>
  <input type="text" placeholder="Campo 02" name="campo02"/>
  
  <input type="submit" value="Enviar" /> 
</form>

<input type="text" placeholder="Campo Fora" name="campofora"/>

Your code would look like this to clear the form only if you were successful in submit:

$(document).ready(function() {
    $("#resposta").ajaxStart(function() {
        $(this).html("Mensagem sendo enviada, por favor aguarde...");
    });
    $("#form").submit(function() {
        var nome = $("#nome").val();
        var email = $("#email").val();
        var assunto = $("#assunto").val();
        var mensagem = $("#mensagem").val();
        $.post('enviar.php', {
            nome: nome,
            email: email,
            assunto: assunto,
            mensagem: mensagem,
            contato: true
        }, function(data) {

            if (data !== false) {
                $("#resposta").html(data);
                $("#form input").val(""); //limpa todos inputs do formulário
                $("#form input[type = submit]").val("Enviar"); //redefine botão submit
            } else {
                $("#nome").val("");
                $("#email").val("");
                $("#assunto").val("");
                $("#mensagem").val("");

            }

        });
        return false;
    });
});
  • Hello lvcs. Forgive me the question, because I am a layman in Jquery. Where do I include your code exactly? Thank you!

  • All right, I’ll do it using your code.

  • 1

    ready, it should work.

  • Perfect lvcs...worked... thanks for the strength. Hug

  • 1

    @ivcs, only a hint, when cleaning the fields use a selector within the scope of the form, or Voce will end up cleaning all the inputs of the screen, other thing, Voce can specify the types that will be cleaned without having to fill the name of the field Submit.

  • @Gabrielrodrigues on the scope, I had done this, after the first edition of the answer (because I remembered it).. About type, it is much simpler to reset than to select by type, because we can have several types in the same form.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.