2

Boa tarde, tenho um formulário e quero que quando o botão de submit seja clicado ele não recarregue a página para o envio do post coloquei o return false; na função submit do jQuery mas não rolou...

$("#form-anuncio-edita-texto").submit(function () {
        if ($("#edita-anuncio-texto").val() !== "") {

            var formData = new FormData(this);

            $("#page-load").toggleClass('sk-loading');
            $("#anuncio-edita-text-alert").hide();
            $('#modal-anuncios-3').modal('toggle');

            var request = $.ajax({
                url: "modulos/paginas/" + identificador + "/process/updateMedia.php",
                method: "POST",
                data: formData
            });

            request.done(function (data) {
                $("#page-load").toggleClass('sk-loading');
                alert(data);
            });

            request.fail(function () {
                $("#page-load").toggleClass('sk-loading');
                toastNotification("<a href='index.php'>A página não pode ser carregada, se este erro persistir sujerimos que atualize a página ou clique <strong>AQUI</strong> e tente novamente.</a>", "Erro no Carregamento...", 15000, "error");
            });
        } else {
            $("#anuncio-edita-text-alert").show();
        }
        return false;
    });

Quando o campo está vazio ele entra no else e a página não recarrega, mas quando eu informo qualquer valor ele recarrega.

ATENÇÃO: Esse exemplo é com um campo de texto que seria facilmente resolvido utilizando a função click do jQuery armazenando o conteúdo numa var e colocando ela no data: {texto: vartexto}, mas não posso utiliza-la pois nesse formulário tem um campo FILE onde eu vou mandar um arquivo via AJAX.

5
  • tenta evitar o evento assim: $("form").submit(function(e){ e.preventDefault(); }); Commented 16/11/2017 às 16:17
  • @eduardocosta não funcionou, ele continua recarregando a página. Commented 16/11/2017 às 16:19
  • E como tens o teu botão na form? se tiver type="submit" tenta mudar para type="button" Commented 16/11/2017 às 16:24
  • @eduardocosta se eu mudar para button o submit não é enviado não entrando na condição acima, como disse na pergunta seria fácil resolver o problema com o evento click, mas o problema é que tenho um campo file no html, não consigo pegar a informação desse campo por jQuery a não ser via submit. Commented 16/11/2017 às 16:26
  • Tente dar um return false dentro da chamada do metodo .submit. $("#form-anuncio-edita-texto").submit(function(){ return false; }); Commented 12/09/2018 às 0:00

2 Respostas 2

4

Utilize o event.preventDefault() para evitar que o submit seja executado, chame a função passando o evento como parâmetro.

Exemplo:

$("#form-anuncio-edita-texto").submit(function(event){
   event.preventDefault();
});

event.preventDefault()

Cancela o evento se for cancelável, sem parar a propagação do mesmo.

$("#form-anuncio-edita-texto").submit(function(event){
  event.preventDefault();
  console.log("Entrei mas não enviei");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="pagina2.asp" id="form-anuncio-edita-texto">
  <button type="submit" id="btn">
    Enviar
  </button>
</form>

8
  • Não estou evitando o submit do botão já que o ID (#form-anuncio-edita-texto) é o ID do form não do botão. Commented 16/11/2017 às 16:35
  • Opa, não tinha o HTML imaginei que fosse o botão, mas de qualquer forma utilizando o event.preventDefault() passando o evento como parâmetro você obterá o resultado esperado. Commented 16/11/2017 às 16:36
  • O amigo @eduardocosta deu essa sugestão, mas não funcionou. Commented 16/11/2017 às 16:40
  • No exemplo que coloquei acima funciona perfeitamente, acredito que possa ser algo no seu javascript que esteja provocando um comportamento inesperado, chegou a verificar se existe erro no console? Commented 16/11/2017 às 16:41
  • se da algum erro eu não consigo ver, a página atualiza muito rápido antes mesmo de aparecer algo. Commented 16/11/2017 às 16:56
0

Acho que tens de fazer algo assim:

<form id="form">
 <input type="text" name="name" id="name">
 <button type="button" id="submit">teste</button>
</form>

<script>
 $('#submit').click(function () {
   $('#form').submit();
 });
 $('#form').submit(function (e) {
   e.preventDefault();
   if //logica
 });
</script>
2
  • Deu o mesmo problema que aneriormente =/ Commented 16/11/2017 às 16:48
  • E o botão têm o type="button"? Commented 17/11/2017 às 15:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .