Menu
I am quite new to HTML and JavaScript. Below is the sample code. The below code block works fine with onsubmit as form tag attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#" onsubmit="functSubmit()">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
But when I write below code with addEventListener() it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
document.getElementById("form1").addEventListener('submit', functSubmit(event));
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
Can anyone please explain why addEventListener is not working?
903
The onsubmit attribute provides the script datas to executed whenever the submit event is occurred so it does not submit the datas to the server with the help of submit() function it will be postponed to the server side.
The onsubmit event is an event that occurs when you try to submit a form. You can put your form validation against this event type. The following example shows how to use onsubmit. Here we are calling a validate() function before submitting a form data to the web server.
The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.
OnSubmit is used on a form , and indicates that the information is to be submitted to the server at this point unless you return false. OnClick is used on anything, and indicates that it was clicked, offering no other context to the intention of the event at all.
That's because you're immediately invoking the event listener's callback. Just pass the function as an argument, without invoking it. Anytime the form is submitted, that function will have the event object passed into it.
document.getElementById("form1").addEventListener('submit', functSubmit);
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
</body>
</html>On a side note: it's generally better practice to separate the concern of your HTML from your JavaScript. While inlining your event handlers in attributes works, it couples two separate concerns. For maintainability's sake, manage your handlers separately. You also get the benefit of leveraging event delegation.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
