0

I'm creating a shoutbox based on php, mysql and ajax for my website. Now I want the user to be able to write a message, open the saving file using Ajax and insert the message to the database with php. Everything is working fine - except for the ajax part. Somehow it doesn't open the saving file.

html:

<input type='text' id='shoutbox-comment' name='shoutbox-msg' style='width: 179px;' value='My message'>  
<input type='submit' name='shoutbox-submit' value='ok' onclick='shoutbox-send();'>

I'm using the framework Medoo for any database request. I've tried the code using a normal html form and the file itself is working fine.

php "shoutbox-write.php":

if (!empty($_POST['msg'])){
    $userid = $_SESSION['id'];

    $message = substr($_POST['msg'],0,200);
    $message = xss($message);

    $now = time();
    $database->insert("shoutbox", ["userid" => $userid, "message" => $message, "time" => $now]);
}

Now comes the problem part. I've tried various things, I even changed the whole script to GET to see if it's working. Nothing works. The first javascript code is one I took from here. The second one is the one I used before. Both are not working though. Please note that I want to solve this without using JQuery.

function shoutbox-send() {
    var xmlHttp = new XMLHttpRequest();
    var url="<?php echo PATH; ?>divers/shoutbox-write.php";
    var message = document.getElementById('shoutbox-comment').value;
    var parameters = "msg="+message;
    xmlHttp.open("POST", url, true);

    //Black magic paragraph
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", parameters.length);
    xmlHttp.setRequestHeader("Connection", "close");

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        document.getElementById('shoutbox-comment').value="";
        }
    }
    xmlHttp.send(parameters);
}

function shoutbox-send() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var message = document.getElementById('shoutbox-comment').value;
            document.getElementById('shoutbox-comment').value = "";
        }
    };
    xhttp.open("POST", "<?php echo PATH; ?>divers/shoutbox-write.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("msg=" + message + "");
}

I'd appreciate your help.

Edit: Solved! Function names must not contain hyphens. It's working now

Riyuri
  • 28
  • 7
  • What does *"open the saving file"* mean? Note function names can't have hyphens in them. Start by checking errors in your console – charlietfl Jul 18 '19 at 14:37
  • Thank you so much! I knew it must've been something small :D I didn't know that the function must not contain hyphens btw with "open the saving file" I meant using ajax for the "shoutbox-write.php" file – Riyuri Jul 18 '19 at 14:39
  • OK...so checking errors is always first step to debugging and you gave no indication of any errors in problem description – charlietfl Jul 18 '19 at 14:40
  • I'm sorry. This is my first question and I wasn't sure how to write it correctly. I thought it was correct like this since I thought that the ajax code is completely wrong – Riyuri Jul 18 '19 at 14:42
  • That's cool...just pointing out that including error details is important. Probably seeing a syntax error message and will point to the line and character on that line for a big clue – charlietfl Jul 18 '19 at 14:44
  • 1
    Is ```-``` allowed in a function name? Check your javascript log for a message like ```Uncaught SyntaxError: Unexpected token -```. Try changing the name of your JS function and subsequent ```onclick``` call. – Kyrre Jul 18 '19 at 14:47
  • I have only self-taught knowledge, so I don't know much about debugging. Therefore I couldn't find any errors. Sorry again and thanks a lot for your help. I've tried figuring it out on my own for a long time :) – Riyuri Jul 18 '19 at 14:48
  • @Riyuri, it's okay to have some gaps and you will learn what you need as you gain more experience. `console.log(...)` in js and `var_dump()` in php are very simple ways to debug variables, but there's more to learn and it could help you out to do some online searching. "How to debug in php" or "php debugging" etc – Reed Jul 18 '19 at 15:06
  • I too am "self" taught. I had one semester for iOS development and it was really a great experience. But PHP and Android (Java) were my primary languages, and I learned through the web & SO. Now just PHP & the html/css/js are what I work with. I'm often come across new things and go "Oh my gosh. How did I not know that?" Like Test Driven Development. Love it. Learned about it 1 month ago, and I have 3+ years dev experience. Podcasts have been great for that - filling in the gaps, giving me a taste of things so I can then decide whether to dig in or not. Thanks for coming to my TED Talk lol – Reed Jul 18 '19 at 15:10

0 Answers0