Sampaio Leal Sampaio Leal - 4 months ago 15
MySQL Question

How to add a data from textarea in database without refresh page

I was developing a system of Login and Register with PHP, HTML, MySql etc, so, i have a problem with my chat!

I want to get data from textarea, and if the button was clicked, empty the textarea, and send the text to database without refresh a page! I have a system that refresh the data from the database and refresh the div "chat" in index.php !

Help me!

Answer

You can use the following code:

The following uses AJAX and PHP, First, make a function to the button, that when the send button is pressed, the AJAX function will be executed:

function msgsend() 
{
 var msg = $("#message").val();
 if (msg!='')
  {
   $('#message').val("");
   $.post("msgsubmit.php", { msg: msg },  
   function(result)
   {  
    msgrecv();
   }); 
  }
}

And then check if new message is received and populate the Messages field:

function msgrecv(){
 $.post("msgchk.php",  {temp0 : 1},
 function(result){  
 var div = document.getElementById('convo');
 div.innerHTML = div.innerHTML + result;
 if (result)
  {
   var elem = document.getElementById('convo');
   elem.scrollTop = elem.scrollHeight;
  }
 }); 
}

So, the logic. Every user has a lastid which tells the message of the id last seen by the user, and then when a new message is added to the database by the user, the AJAX function is called and the message is submitted to the database and msgrecv () function is called to get the details of the message in the conversation box, note that the message box goes empty here, and on the other end, the function msgrecv() is automatically called every 10 seconds tto check for new messages or not, In the PHP code, I have a session variable created with $lastid which stores the id of last message and then check the database for message id > $lastid and if there is something, just echo/print it out which will be taken as the result of the AJAX function...

P.S. - I have used this code from one of my projects and since I don't know your code, so you may need to modify this according to your code...

And the elem.scrollTop = elem.scrollHeight; is just to scroll to bottom of the convo box (Which is the new message, as new messages appear in the bottom of the convo box), so whenever a new message arrives, the user won't have to scroll down to see that...

There is an error Updating the database:

Well, then you can see my PHP code for reference: (This is for Message Submit)

$msgcount = $row['messages'];
$msgcount = $msgcount + 1;
$chk=1;
$sql = "INSERT INTO ".$jobid."_conversation (date, from_id, from_username, to_writer, message, writer_read) 
        VALUES (now(), $userid, '$username', 0, '$message', 0)";
if (mysqli_query($con, $sql)) 
{
 $sql1 = "UPDATE jobs SET messages='$msgcount' WHERE id=$jobid";
 if(mysqli_query($con, $sql1))
  {
   echo 1;
  }
 else
  {
   echo 0;
  }
 }
 else
 {
  echo 0;
 }

Here, echo-ing 1 for succcess and 0 for failure in adding in the databse...

Now for Message Check:

$lastid = $row1['id'];
if ( $lastid > $id)
{
 $to_writer = $row1['to_writer'];
 $message = $row1['message'];
 $rtrn = $rtrn."<div class=\"row\">";
 if ($to_writer == 1)
 {    
  $rtrn = $rtrn."<div class=\"well well-sm col-sm-offset-1 col-sm-8\">".nl2br($message)."</div>";
 }
 else
 {
  $rtrn=$rtrn."<div class=\"well well-sm col-sm-offset-3 col-sm-8\">".nl2br($message)."</div>";
 }
  $rtrn=$rtrn."</div>";
}

Here, $towriter is the username of the person to whom the message is sent, and this checks whether the message should be on the right side in the conversation box or in the left side of the conversation box, (Differentiating between sent and received messages)... And rest some HTML is there because I was using Bootstrap to display each message in a well...

Hope this helps... :)