user3278038 user3278038 - 7 months ago 72
PHP Question

Chat system using Mysqli, PHP and AJAX is inserting blank message into Database

I've hit a brick wall in my chat system project and I have tried all day to find a solution. So here I am.

In the file insert.php I am trying to use $_REQUEST to get the value of the textarea from chat.php.

When I type something in and click send, a blank message is sent to the database.

After playing around with it, sometimes the webpage displays a "1" in the div element im trying to display the message in.

Any help would be very much appreciated thank you.

UPDATE -
Changing this ---> xmlhttp.open('GET', 'insert.php', true); to this ---> xmlhttp.open('GET', 'insert.php?msg='+msg, true); displays a 1 and inserts a 1 into the database.

chat.php

<!DOCTYPE html>
<html>

<head>
<title>{ Chat App }</title>
<link rel = "stylesheet" href = "styles/style.css" media = "all" />
<script src="insert.js"></script>
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
</head>

<body>
<form name = "form1">
<textarea name = "message"></textarea>
<br>
<a href = "#" onclick = "submit()">Send</a>
<br>
<div id = "msg"></div>
</form>
</body>

</html>


insert.js

function submit(){
if(form1.message.value == ''){
document.writeln('Enter some text fool.');
}
var msg = form1.message.value;
var xmlhttp = new XMLHttpRequest(); // main object

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // data is ready
document.getElementById('msg').innerHTML = xmlhttp.responseText; // txtHint div now displays the data received by the request
}
};

xmlhttp.open('GET', 'insert.php', true);
xmlhttp.send();
}


insert.php

<?php
include("connection/connection.php");
global $con;

$msg = isset($_REQUEST['msg']);

$insert = "INSERT INTO msg (message) VALUES ('$msg')";
$run_insert = mysqli_query($con, $insert);

$get_msg = "SELECT * FROM msg ORDER by id DESC";
$run_msg = mysqli_query($con, $get_msg);

while($row = mysqli_fetch_array($run_msg)){
echo $row['message'];
}
?>

Answer

The first problem is when you check for the null value, the function continues and submits the form if it is null or not.

insert.js

function submit(){
    if(form1.message.value == ''){
        document.writeln('Enter some text fool.');
        // stop the submit action
        return;
    }
    var msg = form1.message.value;
    var xmlhttp = new XMLHttpRequest(); // main object

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // data is ready
            document.getElementById('msg').innerHTML = xmlhttp.responseText; // txtHint div now displays the data received by the request
        }
    };

    xmlhttp.open('GET', 'insert.php', true);
    xmlhttp.send();
}

The next problem is in the form handler, you are saving a boolean value isset($_REQUEST['msg']). Try this

insert.php

...
$msg = (isset($_REQUEST['msg']) && !empty($_REQUEST['msg']) ? $_REQUEST['msg'] : false;
if($msg){
  // save data to database 
  ...
}