1

Estou criando um mural, porém gostaria de saber como faço para que ao clicar no botão Publicar, a mensagem do usuário apareça automaticamente na div abaixo do formulário, sem a necessidade do refresh da página. Tipo como ocorre nos posts do Facebook. O cadastramento ao banco de dados eu sei fazer, mas jquery não é meu forte.

<form method="post" class="form-control">  
  <div class="form-group">
    <label for="mensagem">Qual sua ideia?</label>
    <textarea name="Mensagem" class="form-control"></textarea>
  </div>
 <button type="submit" class="btn btn-primary">Publicar</button>
</form>

<div id="mostrarMensagens"></div>
3
  • Te que fazer Ajax. O form é submetido pra mesma página do formulário?
    – Sam
    Commented 4/01/2018 às 16:24
  • Olá dvd. Isso, será para a mesma página.
    – user24136
    Commented 4/01/2018 às 16:29
  • Não tem como vc criar um arquivo .php apenas para tratar disso?
    – Sam
    Commented 4/01/2018 às 16:31

1 Resposta 1

1

Adicione o código jQuery abaixo que irá capturar o submit do formulário e enviar para a URL pagina.php (página para onde será enviado o formulário. O nome da página você escolhe a que quiser).

O retorno do Ajax será inserido dinamicamente na div #mostrarMensagens:

$("form").on("submit", function(){
   var textarea = $("form textarea");
   var msg = textarea.val();
   $.ajax({
      url: 'pagina.php',
      data: { mensagem: msg },
      dataType: 'html',
      success: function(response) {
         $("#mostrarMensagens").append(response);
         textarea.val(''); // limpo o textarea
      }
   });
   return false;
});

No PHP, capture o formulário com $_GET['mensagem'];.

O ideal é que você tenha um arquivo PHP exclusivamente para receber as requisições do Ajax, que irá retornar o HTML que será inserido na div.

Por exemplo:

pagina.php

<?php

$msg = $_GET['mensagem'];

// faço o que tem que fazer (inserir no banco etc)

// retorno o HTML
?>
<strong><?=$msg?></strong>
2
  • Olá dvd. Tenho sim. Obrigado mais uma vez.
    – user24136
    Commented 4/01/2018 às 16:48
  • 1
    @Fox.11 Disponha cara. QQ coisa tamos aí :)
    – Sam
    Commented 4/01/2018 às 23:20

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