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)
});
3 answers
solution1
1 2020-03-06 16:12:41
<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)
solution2
0 2020-03-06 16:21:36
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.
solution3
0 ACCPTED 2020-03-06 16:21:54
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 eg <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.