I'm trying to make a password field for a webpage. So far I have:
<form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>
Pathetic I know. It doesn't have to be fancy, I just need it to "get" the password from the textbox and match it against the password for the page. I'm assuming I can use an if-else?
*Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
Sadly I've been fooling with this for hours. I tried functions, too, and that didn't seem to work (for me) either.
If you go that route, you need to put the validation inside a function that gets called in the onclick event of your button. Also to access the password <input node in js, you can give it an id and use document.getElementById(id). Also, = is an assignment operator. Use == for comparison :)
<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>
Or an even easier way would be to pass the password DOM node as an argument to the function:
<head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>
Is this what you are looking for?
document.forms['PasswordField'].elements['password'].value
I used jquery and here's my solution:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[name='login']").click(function() {
var s = $("input[name='password']").val();
if(s == "rawr") {alert('Correct!')}
else {alert('Wrong Password')}
});
});
</script>
</head>
<body>
<form name="PasswordField" action="">
Password:<input type="password" name="password">
<input type="button" value="Log in" name="login">
</form>
</body>
</html>
Related
Sorry if this is a relatively basic question but I'm getting a little bit frustrated, and this is the first time I'm using GitHub Pages
What I want is:
Accept text in form
Compare text in form with password "pass"
if correct, go to a different html site
else, do nothing
thanks in advance
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<form onSubmit="checkPass(this)">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
<script>
function checkPass(passForm) {
var password = document.getElementById('pwd');
if (password == "pass"){
windows.open("Website extension here")
}
}
</script>
</body>
</html>
But anyone can view source and open the website right? Everything is right except you missed .value. Add a return false and make windows as window:
function checkPass() {
var password = document.getElementById('pwd').value;
if (password == "pass") {
window.open("https://example.com")
}
}
<form onSubmit="checkPass(); return false;">
<label>Password:</label>
<input type="text" name="Password" id="pwd" size="20">
<input type="Submit" name="Submit">
</form>
The above code will not work in sandbox. So try it using CodeSandbox Demo.
I have been working on this really simple login, where all i want to do is say, if the password is "apple" and password is "123" then link me to another page when i click submit button.
I gave up on the submit button linking portion but i still don't understand why my code won't register, everything looks right to me
<!DOCTYPE html>
<html>
<body>
<form name="loginForm">
<input type="text" name="username" placeholder="Username" value=""/>
<input type="password" name="password" placeholder="Password" value=""/>
<input type="button" name="submit" value="Login" onclick="validate()" />
</form>
<script type="text/javascript">
function validate() {
var user = document.loginForm.username.value;
return user;
var pass = document.loginForm.password.value;
return pass;
if ( (user=="apple") && (pass=="123") ) {
document.write("It worked");
} else {
document.write("Wrong Password");
}
}
</script>
</body>
</html>
Suggestions:
return keyword will exit the function, so the code after return won't be reached. To remove the two 'return' statement is the first step.
document.write will clear the page after document is loaded. You probably need alert function
try using document.getElementById/getElementByName (which is better) instead of document.loginForm...
It is also better to put onsubmit in the form tag (fired after type=submit button is clicked) instead of onclick event for button.
It is better to put Javascript inside the HTML head tag.
Below is a much better/working version:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
if ( (user=="apple") && (pass=="123") ) {
alert("It worked");
return true;
} else {
alert("Wrong password");
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit='javascript:return validate()'>
<input type="text" id="username" placeholder="Username" value=""/>
<input type="password" id="password" placeholder="Password" value=""/>
<input type="submit" value="Login" />
</form>
</body>
</html>
I'm trying to create a simple registration form with basic HTML and PHP to insert data to my database. Basically, I want to validate the fields first before inserting the data and so I have created an external JavaScript file. Problem is, it is displaying the actual JavaScript code on the next page as opposed to validating!
My HTML file:
<html>
<head>
<title>Register Page</title>
<body>
<form id="register" method="POST" action="register.js" onsubmit="return verify()" action="register.php">
Forename: <input type="text" name="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</head>
</html>
My JavaScript file:
<script type="text/javascript">
function verify(){
var forename = document.getElementById["forename"].value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
Instead of just validating I'm being redirected to a new webpage showing me the code I have written above.
I am completely new to web development and it would mean a lot if someone could help me out. All I want to do is just validate the fields before adding them to the database.
Two things you have to change
add id to your input control because you are fetching the value of text through Id
<input type="text" name="forename" id="forename">
syntax of getElementById()
var forename = document.getElementById("forename").value;
Once You do the validation for username and password. Submit the form
<script type="text/javascript">
function verify(){
var forename = document.getElementById("forename").value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
<form id="register" method="POST" onsubmit="return verify()" action="register.php">
Forename: <input type="text" id="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
I think you should recheck your syntax for document.getElementById["forename"]
It should be document.getElementById("forename")
You can try debugging step wise. For example, try console.log.
var forename = document.getElementById("forename").value;
console.log(forename);
Try Chrome/Firebox Inspect element > Console and see if anything is been printed.
Hope this helps.
Peace! xD
You shouldn't be declaring register.js as the action for your <form>. The action attribute of a <form> element tells the browser where to send (POST or GET) the form data to, which is why you're being taken to register.js in your browser.
You need to intercept the browser submitting the form, do your validation, and then send the data on to your PHP file (register.php). It might be worth reading some tutorials on javascript form validation, such as this TutorialsPoint one.
What you can be able to do is to take your hole script into a echo in php, then create a php validation for the js and check if js got successfully done then execute script if so.
if you want your javascript on same html page then put this type
<html>
<head>
<title>Register Page</title>
<script type="text/javascript">
function verify(){
var forename = document.getElementById["forename"].value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
}
</script>
</head>
<body>
<form id="register" method="POST" action="" onsubmit="return verify()" action="register.php">
Forename: <input type="text" name="forename"><br>
Lastname: <input type="text" name="surname"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</html>
I have done a login page. I want my js validateForm()function to alert a user if they have left out the username or password. This is the code I have got at the moment.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["username"].value;
if (x==null || x=="")
{
alert("Please enter username");
return false;
}
}
</script>
</head>
<div class="users form">
<br>
<form name="myform" action="Employees/login" onsubmit="return validateForm()" method="post" >
<?php
if (isset($error)) {
echo "<p style='color:red;font-size: 20px''>Username or Password is invalid. Please try again.</p>";
}?>
<p>Enter Username:
<input type="text" name="username" placeholder="username" style="height: 25px;width: 160px;"/></p>
<br><br>
<p>Enter Password:
<input type="password" name="password" placeholder="password" style="height: 25px;width: 160px;"/></p>
<br>
<input type="submit" style="height:35px;width:100px;font-size: 18px; align:center;" value="Sign in">
</form>
</div>
At the moment it is not working, and I think the problem is with the code line "var x=document.forms["myForm"]["username"].value;" Can someone please help?
The issue is forms["myForm"], you used an uppercase F, when actually your form name is all lowercase so it should be:
var x=document.forms["myform"]["username"].value;
// ^ lowercase
Not part of the problem, but you might prefer to use unobtrusive JavaScript to set the onsubmit handler instead of in the HTML attribute:
window.onload = function(){
document.forms["myform"].onsubmit = validateForm;
};
Now, in validateForm you can use this instead of finding the form manually.
function validateForm()
{
var x = this["username"].value;
...
}
How would I adapt this code to run without using the form, but the prompt() method instead? By including a prompt instead of a form to ask for user input.
<html>
<head>
<title>Login page</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt; color:#00FF00;>Simple Login Page</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/ {
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
window.open('target.html')/*opens the target page while Id & password matches*/
}
else {
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>
Thanks!