3

Estou fazendo um simples formulário para ser enviado com jQuery Ajax. Os dados estão sendo enviados, mas está atualizando a página normal.

Gostaria de saber o que estou fazendo errado, pois no envio do formulário a página está sendo atualizada, mas eu gostaria que isso não ocorresse.

Segue os códigos:

Ajax:

$(document).ready(function() {
$(".enviamensagem").submit(function (){     
    $(".listamensagem").html("<h4>Carregando Mensagens</h4>");      
    var formdata = $(".enviamensagem").serialize();
    $.ajax({
        type:"POST",
        url:"dados.php",
        data: formdata,
        beforeSend: function(){
        },
        success:function(data){           
          $("#areamsg").html(data);           
        }
    });
}); 

});

HTML:

<form method="post" class="enviamensagem">
    <fieldset>        
      <label >Escrever Mensagem: 
          <textarea name="mensagem" required></textarea></label>               
          <input type="submit" class="botao" id="btnenviamsg" value="Enviar" />           
     </fieldset>
</form>
1
  • Altere seu .submit(function(){... para .submit(function(e){... e adicione logo no inicio da function e.preventDefault(); antes de $(".listamensagem")..., acho que resolve
    – Augusto
    Commented 13/12/2016 às 17:49

2 Respostas 2

3

O clique no botão de submit é um evento do próprio browser, ele deve ser anulado para utilizar um ajax. Existem diferentes formas de fazer isso.

e.preventDefault() - funciona na maioria dos casos, mas não previne a execução de outros handlers que podem estar associados.

$(".enviamensagem").submit(function(e){ 
    /* qualquer código */

    e.preventDefault();

    /* qualquer código */
}); 

e.stopPropagation() ou e.stopImmediatePropagation() - interrompe o evento da forma correta no jQuery, pq interrompe todos os handlers do jQuery relacionados ao botão.

$(".enviamensagem").submit(function(e){ 
    /* qualquer código */

    e.stopPropagation();

    /* qualquer código */
}); 

Os métodos jQuery acima podem ser utilizados em qualquer parte do código da função, porém é recomendado que utilize logo no começo da função.

Lembrando que é importante colocar o nome da variavel de evento como parametro da função,conforme o exemplo: function(e), senão não irá funcionar.

return false - interrompe o evento em javascript nativo, o que NÃO respeita os handlers específicos do jQuery e em DOM2 não funciona.

$(".enviamensagem").submit(function(){ 
    /* qualquer código */

    return false;
});
2

Você pode utilizar o event.preventDefault() ou então dar um return false na função do submit. Isso serve para prevenir a submissão da página

Veja:

$(".enviamensagem").submit(function (e){     
   e.preventDefault();
   // resto do código
});

Ou:

$(".enviamensagem").submit(function (e){     
    // resto do código

    return false;
});

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 .