When pressing Enter, text box goes down a line instead of calling function

Question

I'm trying to set a messaging website (school purposes).
What I want to happen is that when the user presses Enter the text in the textbox will be sent to a PHP page called InsertMessage.php and DisplayMessages.php and the text box to be set to "".
Instead, When I press enter the text box will only go down a line.

$(document).ready(function() {

  $("#ChatText").keyup(function(e) {
    //when we press enter
    if (e.keycode == 13) {
      var ChatText = $("#ChatText").val();
      $.ajax({
        type: 'POST',
        url: 'InsertMessage.php',
        data: {
          ChatText: ChatText
        },
        success: function() {
          $("$ChatMessages").load("DisplayMessages.php");#
          ("ChatText").val("");
        }
      });
    }
  });

  setInterval(function() {
    $("#ChatMessages").load("DisplayMessages.php");
  }, 1500);

  $("#ChatMessages").load("DisplayMessages.php");
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ChatBig">
  <div id="ChatMessages" class="scrollbar">
  </div>
  <textarea id="ChatText" name="ChatText" placeholder="Type Message..."></textarea>
</div>

Here is a response using [jQuery Event Keypress](https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) — Shim-Sao, Jun 15 '19 at 14:39

BlakkM9 · Accepted Answer · 2019-06-15T15:40:46.117

0

when you check for the key it needs to be e.keyCode instead of e.keycode also there are many other typos

  $("$ChatMessages").load("DisplayMessages.php");
  #("ChatText").val("");

for example shoud be:

  $("ChatMessages").load("DisplayMessages.php");
  $("ChatText").val("");

there might be some more so check your syntax

Working snippet:

$(document).ready(function(){
    $("#ChatText").keyup(function(e){
        //when we press enter
        if(e.keyCode === 13)
        {
            var ChatText= $("#ChatText").val();
            $("#ChatText").val("");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="ChatMessages" class="scrollbar">
    <textarea id="ChatText" name="ChatText" placeholder="Type Message..."></textarea>
</div>

edited Jun 15 '19 at 15:40

answered Jun 15 '19 at 14:41

BlakkM9

400
4
17

Thanks! I changed some of these, but it still does'nt work :( Am new to this and Im using notepad++ because studio code annoyed me. Now trying VS. I need it really fast if you can help me :) – Yoav Pinto Jun 15 '19 at 15:09
Do you know how to open the console in your browser? this will help you finding the errors if notepad++ is not highlighting them. I would suggest you to use an IDE for that but I don't know any good and free IDE for web development. – BlakkM9 Jun 15 '19 at 15:16
Opened the console, am looking for an IDE right now.. What do I do with the console? – Yoav Pinto Jun 15 '19 at 15:20
The console should print errors that are caused by your script if you load your script in the browser. – BlakkM9 Jun 15 '19 at 15:25
It doesnt print anything :( Anyways I just downloaded PHPStorm – Yoav Pinto Jun 15 '19 at 15:30
PHPStorm is good this will help a lot. Hmm i'll edit my answer and add the code snippet i tested it with and then you can build your code around it – BlakkM9 Jun 15 '19 at 15:35
but the snippet works? then the problem need to be elsewhere maybe its a problem with your php. I don't know. The text in your code only gets reset when the ajax call to the php was successfull so maybe thats not the case. – BlakkM9 Jun 15 '19 at 15:48
Ah I forgot to delete my part haha – Yoav Pinto Jun 15 '19 at 15:49
And the response is stored inside vat CharText right? – Yoav Pinto Jun 15 '19 at 15:50
whatever was in the textarea before enter was pressed will be stored in var CharText (also when the textarea is empty for example) – BlakkM9 Jun 15 '19 at 15:51
Now, if I have problems with my ajax call, where should I look? – Yoav Pinto Jun 15 '19 at 15:57
below success:function()... you can add ``error:function(xhr, status, err) {console.log(xhr.responseText)}`` or something like this to get more information why the request fails or if it fails – BlakkM9 Jun 15 '19 at 16:08
After many many many trial and error I found that the problem is with this: ``` $("#ChatMessages").load("DisplayMessages.php"); ``` syntax – Yoav Pinto Jun 15 '19 at 16:35
can't help you with that, I'm not very experienced with php. I'd use nodejs for something like this – BlakkM9 Jun 15 '19 at 16:41

When pressing Enter, text box goes down a line instead of calling function

1 Answers1