Is there absolutely no way to have html forms not refresh the page after submit WITHOUT jQuery?

Question

So I am now working on learning node.js servers with socket.io, and having the form submitted would recreate a new web socket connection. I have read that it could be fixed using jQuery to alter the submit action of the form in order to not have it refresh the page, but right now I just want to see if it could be done without jQuery or AJAX. my html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket</title>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <form id="form" onsubmit="" action="">
        <input name="message" id="message" type="text" placeholder="message" autocomplete="off">
        <input id="send" type="submit">
    </form>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

where main.js :

const socket = io.connect('83.130.85.31:7776');

const button = document.getElementById("send");
const message = document.getElementById("message");
const form = document.getElementById("form");

const sendMessage = (event) => {
    socket.emit("message", {message: message.value});
    message.value = "";
};

form.addEventListener("submit", sendMessage)

socket.on("message", (data) => {
    console.log(data.message);
})

I know my code is very naive, I just focus on understanding implementation of socket.io right now and it was a small test.

Make the button `type="button"` instead of `type="submit"`, and/or prevent the default action in the handler. — Pointy, Jun 30 '20 at 16:34
jQuery is just a JS library, it can't do anything that native JS can't do. — Barmar, Jun 30 '20 at 16:36
the second argument to `addEventListener()` should just be the name of the function, not a function call. — Barmar, Jun 30 '20 at 16:37

Barmar · Accepted Answer · 2020-06-30T16:46:37.950

-1

Use Event.preventDefault()

const sendMessage = (e) => {
    e.preventDefault();
    socket.emit("message", {message: message.value});
    message.value = "";
};

button.addEventListener("click", sendMessage);

You can do the same thing with the form's submit handler:

form.addEventListener("submit", sendMessage);

edited Jun 30 '20 at 16:46

answered Jun 30 '20 at 16:39

Barmar

741,623
53
500
612

If I use that code I can't submit using ENTER, no? It would only work for clicking on the button – Idan Cohen Jun 30 '20 at 16:41
@IdanCohen Yes, but your current one suffers from the same problem. That's a separate issue, solved by not using the click event. – Kevin B Jun 30 '20 at 16:42
@IdanCohen Correct. The solution would be to use a `submit` listener on the form instead of a `click` listener on the button. – Barmar Jun 30 '20 at 16:43
Yes, I included the wrong version of my code. I am sorry. so I should add a listener to my
on main.js and insert the functionality there?
– Idan Cohen Jun 30 '20 at 16:45
I've updated the answer. – Barmar Jun 30 '20 at 16:46
Thank you, preventDefault() works! – Idan Cohen Jun 30 '20 at 16:55

Is there absolutely no way to have html forms not refresh the page after submit WITHOUT jQuery?

1 Answers1