Problem with HTML form submit?

Code Help HTML/CSS/JS
21

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

22

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

23

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

24

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:

25

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

26

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;".

27

This should stop the page refresh:

1 Like
28

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

29

Personally I just never use forms, which probably isnā€™t the best practice from a semantic perspective, but it works fineā€¦

30

The code you gave me already exists within the scripts.

31

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

32

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
33

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

35

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

36 
<script src="/socket.io/socket.io.js"></script>
  <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;
      messagesDiv.appendChild(messageElement);
    });

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

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="/socket.io/socket.io.js"></script> with this: <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script> or actually adding the Socket.IO library at that path.

2 Likes
38

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.

39

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
40

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

41

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