Hello, my problem is that this basic chat program (which has all the functionality within index.html), whenever I click the send button, the page reloads with a question mark at the end of the url. Is this a form submit error? Please debug my code at https://replit.com/@OSoft/OChat?v=1#index.html
Looks like it’s because the method wasn’t defined. Just put a method in the form like this:
<form method="get"></form>
I don’t have time to edit my code. Could you please give me my code with that change applied.
Sure I guess? All you need to change is line 79 but alright:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OChat</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Product+Sans&display=swap">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #333333;
font-family: 'Product Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
}
#messages {
height: calc(100% - 70px);
overflow-y: scroll;
padding: 10px;
color: white;
}
#messages div {
animation: fadein 0.5s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
form {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 60px;
background-color: #444444;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#message-input {
width: calc(100% - 90px);
height: 40px;
padding: 10px;
border: none;
border-radius: 20px;
background-color: #555555;
color: #ffffff;
font-size: 18px;
box-shadow: inset 0 0 5px rgba(51,173,255,0.5);
}
#send-button {
width: 70px;
height: 40px;
margin-left: 10px;
padding: 0;
border: none;
border-radius: 20px;
background-color: #33ADFF;
color: #ffffff;
font-size: 18px;
box-shadow: 0 2px 3px rgba(51,173,255,0.5);
outline: none;
cursor: pointer;
}
#send-button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="messages"></div>
<form method="get"> <!-- this is the only thing I changed... -->
<input id="message-input" type="text" autocomplete="off">
<button id="send-button" type="submit">Send</button>
</form>
<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>
</body>
</html>
It still didn’t work. You can try by going to ochat.osoft.repl.co, and pressing the send button after typing a message.
1 Like
Oh that’s weird, maybe try post rather than get. And if that doesn’t work try adding action="/".
And either way this ? doesn’t mean anything bad it’s just for URL parameters.
Which parameter should I add action="/"? Also, post didn’t work. It solved the ? showing up, but the page still reloads.
Woah. Two people typing.
Ohhh, you don’t want your page to reload? You can’t do that with normal HTML forms. See this StackOverflow post.
The form isn’t strictly necessary since you’re using WebSockets or Socket.IO. I don’t think the form needs any attributes since attributes are to make a request on form submission.
1 Like
Stackoverflow doesn’t work on our network. Can you please just explain? I understand it has something to do with the form resubmission, and expected URL parameter data.
You have to use AJAX or something. Idk, I’m not the most experienced with JS :shrug:
Yes, every time the page reloads, it doesn’t have time to send the message, and it doesn’t show up afterwards. The funny thing is, my website was working just fine recently. And all of a sudden this happens.
1 Like
I’m not sure but you’ve got a button with the type submit, try an input with the type submit and see if that works… You definitely don’t need get or action you’re not making a request and your not sending the data to another page.
1 Like
I am very confused now. You want me to turn my input into a submit button?
That is true. This is simply a chat page, that sends messages across the server.
Also, I tried that. I turned my input into a type="submit". That page still did the same thing.
No, you have a button with the id send-button.
“I’d send”. I do not understand.
Oh, id send. I see…
I will try.