0

Boa noite,

Tenho um pequeno chat, em html, php e jquery, só preciso enviar a mensagem do form sem botão, mas simplesmente não está funcionando, alguém poderia me ajudar está assim o codigo:

 <form methood='post' id="message-form">
  <textarea class="textarea" id="message_text" placeholder="Write your message"></textarea>
  </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="sub_file/jquery-3.1.1.min.js"></script> 
<script>

  $("document").ready(function(event){

   // agora, se o formulário for enviado
    $("#right-col-container").on('submit', '#message-form' function(){
      // pega os dados da textarea
      var message_text = $("#message_text").val();
      // envia os dados para o arquivo sending_process.php
      $.post("sub_file/sending_process.php?user=<?php echo $_GET['user'];?>",
        {
            text: message_text,
        },

          //in return we'll get
          function(data, status){

             // primeiro remova o texto de
              // message_text so
             $("#message_text").val("");

             // agora adicione os dados dentro
              // o contêiner de mensagens
             document.getElementById("messages-container").innerHTML += data;
          }

        );
    });


    // se algum botão for clicado dentro
    //right-col-container
    $("#right-col-container").keyup(function(e){
          // como vamos enviar o formulário com o botão enter
        if(e.keyCode == 13){

           // então envie o formulário
          $("#message-form").submit() ; 
        }

    })


  });
</script>

meu arquivo que faço o insert do formulario sending_process:

<?php

    session_start() ; 
    require_once("../connection.php");
    if(isset($_SESSION['username']) and isset($_GET['user'])){
         if(isset($_POST['text'])){
            //now check for empty message 
            if($_POST['text'] !=''){
            //now from here we can insert
            //data into the database

            $sender_name = $_SESSION['username'];
            $reciever_name = $_GET['user'];
            $message = $_POST['text'] ; 
            $date = date("Y-m-d h:i:sa") ;

            $q = "INSERT INTO messages 
              (sender_name, reciever_name, message_text, date_time)
              VALUES('$sender_name','$reciever_name','$message', '$date')";
              $r = mysqli_query($con, $q) ;

              if($r){
                //message sent
                 ?>

                <div class="grey-message">
                  <a href="#">Me</a> 
                  <p><?php echo $message; ?></p>

                </div>

               <?php 

              }else{
                  //problem in query
                  echo $q;
              }


            }else{
                echo 'please write something first' ;
            }


         }else{
            echo 'problem with text';
         }
    }else{

        echo 'please login or select a user to send a message';
    }


?>

2 Respostas 2

2

Criar um form sem o botão de submit é muito ruim (péssimo) para usabilidade, você pode analisar os maiores chats (whatsapp, telegram e etc..) todos possuem este botão.

Sem contar que você submetendo o form por js através da condição do evento keyCode == 13, você acaba perdendo uma das principais funcionalidades do textarea que é a quebra de linha

Se você ou sua aplicação não suportam/desejam a quebra de linha eu sugiro trocar o campo de textarea para input e criar o form com o botão de submit oculto, assim você mantém a funcionalidade nativa de submit com o botão ENTER, usuários mobile continuarão enviando o form pelo teclado do celular.

Veja um exemplo:

jQuery(document).ready(function($) {
  $(document).on('submit', '#message-form', function (e) {
    // Importante para previnir o comportamente default de submit do form
    // e evitar o reload da página e possiveis duplicidades em requisições
    e.preventDefault();
    
    // debug
    alert('Form enviado com ENTER, preparando ajax.');
    
    var url = "sub_file/sending_process.php?user=<?php echo $_GET['user'];?>";
    var data = { message: $.trim($('#message_text').val()) };
    
    $.post(url, data, function (response) {
      $("#message_text").val("");

      // agora adicione os dados dentro
      // o contêiner de mensagens
      document.getElementById("messages-container").innerHTML += response;
    })
    .fail(function () {
      alert('Erro ao enviar a mensagem');
    });
  });
});
.hidden {display:none;}
input {padding: 10px 5px; width: 50%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form methood="post" id="message-form">
	<input type="text" id="message_text" placeholder="Write your message">
	<button type="submit" class="hidden">Enviar</button>
</form>

<div id="messages-container"></div>

4
  • Olá @Vinicius.Silva, ele funcionou só que quando clico no botão enviar, aparece o alert dizendo que foi enviado, só que na tela aparece a mensagem 'problem with text'
    – Ragnar
    Commented 13/06/2019 às 20:22
  • o erro está vindo do meu arquivo sending_process, parece que não está gravando no banco..vo atualizar a pergunta, se conseguirem me ajudar agradeço
    – Ragnar
    Commented 13/06/2019 às 22:20
  • Opa, essa mensagem está vindo do else{ echo 'problem with text';} que é referente a condição if(isset($_POST['text'])){ Se você reparar bem o que meu exemplo manda por ajax para seu php é { message: $.trim($('#message_text').val()) }; logo no seu php nunca existirá $_POST['text']. Você precisa trocar no php $_POST['text'] para $_POST['message'] ou trocar no js {message:... para {text:.. fica a seu critério onde deseja alterar Commented 13/06/2019 às 23:01
  • era isso mesmo..funcionou perfeito..muitissimo obrigado!
    – Ragnar
    Commented 13/06/2019 às 23:43
2
$("#message_text").keyup(function(e){
        if(e.keyCode == 13){
          $("#message-form").submit() ; 
        }
})
2
  • tentei mas não funcionou amigão, continua sem enviar.
    – Ragnar
    Commented 13/06/2019 às 20:23
  • Posso ver como está o teu código? Commented 13/06/2019 às 23:16

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 .