CODEWITHSUNDEEP
javascripthtml
tomaszn
tomaszn

Reputation: 37

JavaScript addEventListener on submit not working

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)
});

Upvotes: 0

Views: 1231

Answers (3)

ROOT
ROOT

Reputation: 11622

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>

Upvotes: 0

Franci
Franci

Reputation: 2247

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.

Upvotes: 0

Alnitak
Alnitak

Reputation: 339786

<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)

Upvotes: 1

Related Questions