JavaScript addEventListener on submit not working

Question

it's a total newbie question, but I'm having serious issues with my first JavaScript task. I've decided to learn JS and start with a TODO List, and I'm now stuck at the very beginning.

The event listener that should trigger when the form is submitted doesn't work. When I change the event it listens for to "click", "focus" or "blur" it works, but not with submit. Can anyone be of advise?

PS. Is there a simple explanation for event.preventDefault(); ? What does it do, and when it should be used?

Thanks a million.

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form>
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
            <input id="submitNewTaskButton" type="submit" value="+">
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

My JavaScript:

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

newTaskInputForm.addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});

score 1 · Answer 1 · answered Mar 06 '20 at 16:12

1

<input> elements don't raise submit events - it's the <form> that does that.

(in other words, you've attached the listener to the wrong element)

answered Mar 06 '20 at 16:12

Alnitak

334,560
70
407
495

I've read the documentation for this like a dozen times and didin't catch it. Many thanks! Works fine now. – tomaszn Mar 06 '20 at 16:17

score 0 · Answer 2 · answered Mar 06 '20 at 16:21

The submit event only exist on form element. Check here.

so, it is

<html>
...
<form id="form></form>
...

<script>

let form = document.getElementById('form')

form.addEventListener('submit',function(){})

</script>
</html>

The event.preventDefault() I think it is best explained here.

Welcome to Javascript.

ROOT · Accepted Answer · 2020-03-06T16:30:47.570

Two changes made here, the event listener add to the <form> not the input submit, also changed the <input> tag to <button> check this SO question to know the difference between them.

And for e.preventDefault(), basically its used to stop default HTML tags behavior, for example <a> tag when clicked they will redirect users to a different page or domain sometimes, also forms submit actions usually redirect the page too to a different page, e.preventDefault() will stop this behavior and let the developer decide what should happen after the form submit, or <a> anchor tag is clicked, when should it be used: this is up to the app design, so if the application you are working on require some HTML tags to behave differntly e.g <a> and <form> tags to do Ajax calls.

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

document.getElementById('newTaskForm').addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form id="newTaskForm">
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
              <button id="submitNewTaskButton" type="submit">+ form</button>
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

JavaScript addEventListener on submit not working

3 Answers3