Problem with HTML form submit?

So what exactly do you want me to do? I need every single step organized.

I’m walking home from school right now, in a couple of minutes I’ll be home and I’ll hop on my PC and help you out

Where I am, it is 9:45 PM and I will be prepared to go to sleep.

It’s 3:47 pm here in Australia.

(On my phone I couldn’t manage to highlight this.)
I’m suggesting changing that to this:

<input id="send-button" type="submit" />

Because I’m not 100% sure that the button having the submit type is actually recognised, we’ll see. :slight_smile:

The page still reloads with that change applied, every time I press the send button.

Oh, is reloading the issue? Just remove the form or specifically don’t have a button/input with the type submit. You could also try adding onsubmit="return false;".

This should stop the page refresh:

1 Like

Here is the objective of this program:
It is a chat program. It has a send button which sends all the text that is in the text input box, to any clients that also have the website open

Personally I just never use forms, which probably isn’t the best practice from a semantic perspective, but it works fine…

The code you gave me already exists within the scripts.

The most puzzling part is, that it was working fine when I started it.

Yeah, I’m pointing out that should prevent page refreshes too and it’s already in your code.

That makes sense because the event.preventDefault() should prevent the page from refreshing.

1 Like

And it was not a change in my code, because I turned way back in the history and it still acted the same way.

Sorry. I meant is it related to browser cache or any data?

<script src="/"></script>
    const socket = io();
    const messageForm = document.querySelector('form');
    const messageInput = document.querySelector('#message-input');
    const messagesDiv = document.querySelector('#messages');

    // handle incoming messages
    socket.on('message', message => {
      const messageElement = document.createElement('div');
      messageElement.textContent = message;

    // handle form submission
    messageForm.addEventListener('submit', event => {
      const message = messageInput.value.trim();
      if (message) {
        socket.emit('message', message);
        messageInput.value = '';
      return false;

It’s because there’s an error, io is not defined, so the code below isn’t run because that error is thrown (hence event.preventDefault() is not called on form submission). You can fix that by replacing this: <script src="/"></script> with this: <script src=""></script> or actually adding the Socket.IO library at that path.


Okay, now we are getting somewhere. :slight_smile:
It doesn’t reload now, but now I don’t receive any messages on it. Apparently, the message doesn’t get through.

Check on the server-side if the message is received, just print the data received when the message event is triggered by the client.

1 Like

I am noticing this in my console now…
Screen Shot 2023-03-06 at 10.03.40 PM

Before you mentioned you can’t access StackOverflow, is it possible Socket.IO is blocked for some reason?