JavaScript DOM Scripting By Example Adding and Removing Names Using the submit Event

Prerna Jena
Prerna Jena
384 Points

Alter the event handler

Alter the event handler on line 4 to run when the form is submitted, not just when the submit button has been clicked. Leave the callback function empty for now.

const form = document.querySelector('form'); const submitButton = form.querySelector('[type=Submit]');

submitButton.addEventListener('click', () => {

});

app.js
const form = document.querySelector('form');
const submitButton = form.querySelector('[type=Submit]');

submitButton.addEventListener('click', () => {

});
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Submit Event</title>
</head>
<body>
<form>
  <label>Name:</label>
  <input type="text" name="name">
  <input type="Submit" name="submit" value="Submit">
</form>
  <script src="app.js"></script>
</body>
</html>

4 Answers

Paul Scanlon
PRO
Paul Scanlon
Pro Student 26,723 Points

Hi Prerna

Change the event handler to form and from click to submit.

Hope it helped

Paul

Prerna Jena
Prerna Jena
384 Points

Still, I am blank. Can you please write the code.

Paul Scanlon
PRO
Paul Scanlon
Pro Student 26,723 Points
const form = document.querySelector('form');
const submitButton = form.querySelector('[type=Submit]');

form.addEventListener('submit', () => {

});

:)

Paul Scanlon
Paul Scanlon
Pro Student 26,723 Points

So this targets the form when it "submits" rather than the submit button when it is clicked.

Paul

Prerna Jena
Prerna Jena
384 Points

Thank you Paul :) :) :)