I'm try to create a form with two input (Username and password) and one button(submit). my index.html code
<!DOCTYPE html>
<html>
<head>
<title>login</title>
</head>
<body>
<form>
<p>username</p>
<input type="text" id="username" />
<p>Password</p>
<input type="text" id="Password" /><br>
<button type="button" onclick="getinfo()">submit</button>
</form>
<script src="main.js"></script>
</body>
</html>
then adding some javascript code for just getting a username and password which enter in username and password field in html form. my main.js code
function getinfo(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Name = " + username + "password = " + password);
}
But i don't getting any alert. i'm try to find out but i can't understand why my code is not working.when i search internet i find some related post but unfortunately it did not help,it's maybe for my little understanding in javascript , but i need help about this.
The id in <input type="text" id="Password" /> has an upper case P, while in javascript you are calling it with a lower case p.
Note:
Problems in your javascript code are usually easy to find using the browser console to check for errors. The error thrown here was:
Uncaught TypeError: Cannot read property 'value' of null
so it was immediately obvious that one of the elements doesn't exist on the page.
Here is the corrected code:
function getinfo() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Name = " + username + " password = " + password);
}
<!DOCTYPE html>
<html>
<head>
<title>login</title>
</head>
<body>
<form>
<p>username</p>
<input type="text" id="username" value="" />
<p>Password</p>
<input type="text" id="password" value="" /><br>
<button type="button" onclick="getinfo()">submit</button>
</form>
<script src="main.js"></script>
</body>
</html>
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