Form submit input not running my onClick function

Question

I have created a simple login form, and want to run a js function once the form is submitted. However, nothing happens when I click submit. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CARD GAME</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login()">
</form>
</body>
</html>

JS:

function login(){
    console.log("here")
}

Why are you giving type="submit" to a input field instead use a button.Give action to form . action="post" — Theophin Johnson, Jan 19 '21 at 12:49

Yousaf · Accepted Answer · 2021-01-19T13:20:50.213

Is the browser window reloaded when you press the submit button? If yes, then your form is indeed submitted.

You don't see the output of console.log statement because, by default, browser window is reloaded on form submission. You can disable this default behaviour using event.preventDefault()

HTML:

<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login(event)">
</form>

JS:

function login(event){
    event.preventDefault();
    console.log("here")
}

Suggested improvements:

Instead of using onclick attribute on the button element, use .addEventListener() to add the click event listener on the button.
Move the script element to just before the closing body tag.

Alternative Solution

Another way is to preserve the logs. In the "Netowork" tab of browser developer tools, check the "preserve logs" checkbox input. Doing this will preserve the output of console.log statement even if the browser window is reloaded on form submission.

For details of how to enable this option in developer tools, visit:

How to enable “Preserve Log” in Network tab in Chrome developer tools by default?

s.kuznetsov · Answer 2 · 2021-01-19T16:33:16.773

If you want to perform certain actions by clicking on submit, then declare event onsubmit inside the form tag. Like this:

<form onsubmit="login(event);">
...

And add disabling the default behavior - event.preventDefault().

function login(event){
    event.preventDefault();
    console.log("here")
}

But I do not advise you to declare js events inside html tags. Since this will lead to bad consequences.

Try it:

let form_submit = document.querySelector('form');

form_submit.onsubmit = function(event) {
    event.preventDefault();
    console.log("here");
}

And remove onclick="login()" from input submit. Here:

<input type="submit" onclick="login()">

score 0 · Answer 3 · answered Jan 19 '21 at 12:49

0

I see two things here for now.

Put your code which includes js file at the bottom of your HTML, just above closing body tag. <script src="index.js"></script>
Check if your JavaScript file is called index.js

answered Jan 19 '21 at 12:49

browinski

21
3

score -1 · Answer 4 · answered Jan 19 '21 at 12:52

Replace <input type="submit" onclick="login()"> with <button type="button" onclick="login()">Login</button>
Add an ID to your form: <form id="myform"> ...

in your JS do:

function login(){
    alert("here");
    document.querySelector("#myform").submit();
}

Form submit input not running my onClick function

4 Answers4

Alternative Solution