CODEWITHSUNDEEP
javascripthtmlformsinputonclick
bmynard
bmynard

Reputation: 25

Form submit input not running my onClick function

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

Upvotes: 0

Views: 2182

Answers (4)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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

Upvotes: 1

Yousaf
Yousaf

Reputation: 29282

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?

Upvotes: 1

MiK
MiK

Reputation: 913

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

Upvotes: 0

browinski
browinski

Reputation: 21

I see two things here for now.

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

Upvotes: 0

Related Questions