Como enviar form sem refresh?

[Sampaio Leal]

Olá pessoal! Estou montando um site que usa alguns sistemas em PHP, AJAX, e MySql!

 

Então, já montei sistema de cadastro e login, porém o que estou tendo dificuldades é o chat!

Ta tudo certinho, ta atualizando sem flickar, com AJAX! Mas o meu problema é na hora de enviar a mensagem para a database! Alguem sabe como faço isso sem atualizar a pagina! No caso eu só queria pegar o que está dentro da <textarea> esalvar em uma variável, assim quando apertar o botão Enviar iria mandar para a database em algum tipo de function ou algo do tipo!

[sergiolopessp]

Normalmente eu faço isso enviando os dados por ajax e devolvendo o resultado em uma Div escondida, ou recuperando o payload pra analisar o que veio de resposta e jogar uma popup ou alert com sucesso ou erro.

[DiF]

@Sampaio Leal Como já mencionaram o ajax, já estão ciente dele. Mas nenhum dos dois postou um código de exemplo.. então vamos lá.

 

Submeter um form sem "refresh" é bem simples:

 

Exemplo:

<form id="formulario">
  <textarea id="textarea" name="texto"></textarea>
  <input type="submit" value="Enviar"/>
</form>  

No jQuery fazemos assim:

$(document).ready(function(){
   $("#formulario").on("submit", function(e){
       e.preventDefault();
       var textarea = $("#textarea").val(); 
        $.ajax({
            url: "processaDados.php",
            method: "POST",
            dataType: "html",
            data: textarea
        }).done(function(data){
             //faz algo quando enviar certo 
        }).fail(function(data){
            //faz algo quando der errado
        });  
   });
});

Bom este é só um exemplo..  se tiver outros campos para enviar.. é interessante usar o serialize() no atributo  "data"

[sergiolopessp]

@dif Verdade, postei uma possível solução, mas não postei um exemplo de como fazer.

[Sampaio Leal]

Em 02/08/2016 às 17:21, dif disse:

@Sampaio Leal Como já mencionaram o ajax, já estão ciente dele. Mas nenhum dos dois postou um código de exemplo.. então vamos lá.

 

Submeter um form sem "refresh" é bem simples:

 

Exemplo:

<form id="formulario">
  <textarea id="textarea" name="texto"></textarea>
  <input type="submit" value="Enviar"/>
</form>  

No jQuery fazemos assim:

$(document).ready(function(){
   $("#formulario").on("submit", function(e){
       e.preventDefault();
       var textarea = $("#textarea").val(); 
        $.ajax({
            url: "processaDados.php",
            method: "POST",
            dataType: "html",
            data: textarea
        }).done(function(data){
             //faz algo quando enviar certo 
        }).fail(function(data){
            //faz algo quando der errado
        });  
   });
});

Bom este é só um exemplo..  se tiver outros campos para enviar.. é interessante usar o serialize() no atributo  "data"

obrigado parceiro, resolvido, eu estou com dificuldades para pegar o post em php

[DiF]

@Sampaio Leal Poderia postar como você tentou fazer? e o conteúdo do arquivo php

[Sampaio Leal]

Bom no arquivo index.php está mais ou menos assim:

$(document).ready(function(){
	   $("#form").on("submit", function(e){
	       e.preventDefault();
	       var textarea = $("#texto").val(); 
	        $.ajax({
	            url: "status.php",
	            method: "POST",
	            dataType: "html",
	            data: textarea
	        }).done(function(data){
	             //faz algo quando enviar certo 
	        }).fail(function(data){
	            //faz algo quando der errado
	        });  
	   });
	});

O formulário está assim:

<form role="form" id="form">

<div class="form-group">

<textarea class="form-control" placeholder="Digite aqui seu status!" name="texto" id="texto"></textarea>
<button type="submit" id="send" class="btn btn-success">Enviar</button>

</div>

</form>

E no status.php eu crio a conexão e tento pegar o POST, mas não sei qual é!

[DiF]

@Sampaio Leal Vejo que você copiou meu exemplo. Este é um dos primeiros erros. Repare que os retornos done() e fail() estão vazios. eu não coloquei nada por que deixei para você perceber.

 

Mas ainda assim, faltou uma peça importante.. QUAL o conteúdo o status.php.  poste aqui também,  para ver como você está recebendo os dados.

 

Quando tiver dúvida se tá enviando algo, use o console.log()  ou um alert() contendo o valor do campo que quer saber.

[Sampaio Leal]

27 minutos atrás, dif disse:

@Sampaio Leal Vejo que você copiou meu exemplo. Este é um dos primeiros erros. Repare que os retornos done() e fail() estão vazios. eu não coloquei nada por que deixei para você perceber.

 

Mas ainda assim, faltou uma peça importante.. QUAL o conteúdo o status.php.  poste aqui também,  para ver como você está recebendo os dados.

 

Quando tiver dúvida se tá enviando algo, use o console.log()  ou um alert() contendo o valor do campo que quer saber.

Bom na verdade eu estava tentando usar com o evento click() em um button que enviaria os dados, mas ai acho que seu exemplo seria melhor para suporte aqui né!

 

Não precisa de done() ou fail(), pelo menos no meu teste não vai precisar por enquanto!

 

cara o conteúdo do status.php é apenas a conexão mysql usando PDO e inserindo os dados da textarea via variável $text que pega o $_POST mas aí é o problema o que eu coloco dentro do post! Aí percebi que eu dou um serialize() no form e no metodo POST eu pego um input, já está resolvido meu caso!