I'm having allot of trouble with this and I've tried many different ways to do this and I just ran out of ideas.
Here's my code:
var user = document.Log.User;
var pass = document.Log.Pass;
function Login (){
if(user.value == "Admin"){
window.open();
}
}
Here Is the HTML side:
<form name="Log">
<input class="Log" type="text" name="User">
<input class="Log" type="password" name="Pass">
<input type="button" value="Login" name="But" onclick="Login()" style="width: 70px;position: relative;left: 150px;top: -25px;">
</form>
If your variable assignments are in Javascript that's loaded before the body, then the elements that they refer to don't exist yet, and you should be getting errors. There are a number of ways to fix this:
Put the Javascript in the body somewhere after the form.
Put the Javascript inside window.onload=function() { ... }.
Assign the variables inside the Login() function.
use id Selector an put your variable assignments inside Login function:
HTML :
<form name="Log">
<input id="User" class="Log" type="text" name="User">
<input id="Pass" class="Log" type="password" name="Pass">
<input type="button" value="Login" name="But" onclick="Login()" style="width: 70px;position: relative;left: 150px;top: -25px;">
</form>
JS:
function Login (){
var user = document.getElementById("User");
var pass = document.getElementById("Pass");
if(user.value == "Admin"){
window.open();
}
}
I don't know why you are doing this kind of login logic stuff with js, but, this would work:
function Login (){
var user = document.querySelector('form[name=Log] [name=User]');
var pass = document.querySelector('form[name=Log] [name=Pass]');
if(user.value == "Admin"){
window.open("yoururl.com");
}
}
Hope this helps. Cheers
Related
I'm still learning, so if there's any help, or the answer is really trivial like something I need to put before hand, an explanation of the reason why this is happening would be greatly appreciated!
This has been a problem ever since I have started using it for weekend projects. Whenever I make a button, for example one that I have been trying to use is
<button type="submit" id="btn" onclick="validate()">login</button>
However, when I click on the button, instead of showing me what its supposed to show, it just states this on a gray page.
This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 405
HTML
<div class="wrapper">
<form class="box" method="post">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type="submit" id="btn" onclick="validate()">login</button>
</form>
</div>
JS
//I do understand that this is not a good way of setting up a username and password ,since anyone can easily get it. Ive been just doing this as a weekend project, i just want it to show an alert if it works or not
function validate(){
let username = document.getElementById('username');
value;
let password=document.getElementById('password');
value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}
I have tried to see if it was a problem with my js, but nothing seems to change, so that is why im starting to suspect that it its the button thats causin the problem
Firstly its not
document.getElementById('password');
value;
its
document.getElementById('password').value;
Secondly, there is no action property present I'll suggest removing the entire form tags
<div class="wrapper">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button type=" submit" id="btn" onclick="validate()">login</button>
</div>
<script>
function validate() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (username == 'please' && password == 'work') {
alert('finally');
} else {
alert("NOOOO")
}
}
</script>
on your for, you are using attibute method="post" which has alternative of method="get" which being sent using URLs you are using method="post" which has a missing attribute action="/action_page.php" that will process you're page.
Like this
<form class="box" action="/action_page.php" method="post">
since you don't have action attribute, and has method="post", the post is being sent to the same page you are sending and without receiving it properly like in php.
$username = $_POST['username'];
If you still want to continue using javascript at test it, remove at post method, and remove the type="submit" on your button as it behaves on submitting if you just want to test using javascript.
Here is your final script.
HTML
<form class="box">
<h3>login</h3>
<div class="username">
<input type="text" placeholder="enter username" id="username" name="usernmame" value="">
</div>
<div class="password">
<input type="password" placeholder="enter password" id="password"">
</div>
<button id="btn" onclick="validate()">login</button>
</form>
</div>
JS
function validate(){
let username = document.getElementById('username').value;
let password=document.getElementById('password').value;
if(username =='please' && password == 'work')
{
alert('finally');
} else{
alert("NOOOO")
}
}
I'm trying to pass credentials to fill automatically the inputs login of this website: https://www.pinterest.pt/login/ .
I don't know what are the variables. So I used the inspect of the browser to know what is the id of each input.
I'm using this code but it is not working:
function Test() {
var name = document.getElementById("id").value;
var password= document.getElementById("password").value;
document.forms["registerForm"].submit(); //form submission
}
<!DOCTYPE html>
<html>
<body>
<form id="registerForm" name="registerForm" method="post" target="_top" action="https://www.pinterest.pt/login/">
<input id="email" name="id" type="email" value="examplelogin" />
<input id="password" name="password" type="password" value="examplepassword" />
<input type="button" name="submit" id="btn" value="Submit" onclick="Test()" />
</form>
</body>
</html>
Do you know what I'm doing wrong?
Thank you for your help.
Not so much an answer to your question, but more of a future reference, you don't need to get all elements within a form via a selector. You can simply use the following technique:
function Test() {
let form = document.getElementById('registerForm');
var password = form.elements.password.value;
var email = form.elements.email.value;
form.submit();
}
Notice how accessing form.elements grants direct access to the element you're trying to read out.
I may just be nit-picking, but since this is a form submit, you probably need to use onsubmit and not just have the button click do something. Try this maybe?
<!DOCTYPE html>
<html>
<body>
<form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada" onsubmit="submitFunction()">
<input id="usuario" name="_58_login" type="text" value="examplelogin" />
<input id="password" name="_58_password" type="password" value="examplepassword" />
<button type="submit">Submit</button>
</form>
<script>
function Test() {
// your submit code
}
</script>
</body>
</html>
Forms can be very picky sometimes. Always best to use a working example for exactly what you're doing as a reference.
I have been practicing basic programming with Bootstrap, HTML, CSS, and JavaScript and for the moment I'm doing a website that starts with a landing page that asks for a password and then sends you to another page.
The thing is that the form and the JavaScript validation aren't working together and I don't know why and what I'm doing wrong, so If someone could help me it would be awesome! Thanks!
<div class="jumbotron">
<form name="PasswordField" action="">
<div class="form-group">
<label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
</form>
</div>
<script type="text/javascript">
function isValid(password)
{
var pass ="seahorse";
var password = document.getElementById("password");
if (password.value.toUpperCAse().match(pass))
{
window.location.href = "HappyChristmas.html";
return true;
}
else
{
alert('Nope, try again');
return false;
}
}
</script>
You're not calling isValid() when submitting the form.
You're transforming your input value toUpperCase() and checking if it matches a lowercase password "seahorse".
Check the snippet I made according to your code and it's running fine and dandy.
I added onclick call on your submit button so that it calls your isValid() function.
Also it's worth mentioning that you're passing a parameter to your isValid() function, but you don't need to because you're retrieving the password element and its value directly inside the function.
Another thing worth mentioning is that you're returning a boolean for the function but you don't really need to because you're not doing conditions in your script and when changing location on window.location or alert() the code will be stopped.
function isValid()
{
var pass = "seahorse";
var password = document.getElementById("password");
if (password.value.match(pass))
{
window.location.href = "HappyChristmas.html";
}
else
{
alert('Nope, try again');
}
}
<div class="jumbotron">
<form name="PasswordField" action="">
<div class="form-group">
<label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
</form>
</div>
First Add the event to the form to call your javascript function
<form name="PasswordField" action="/where/to/go" onsubmit="return isValid()">
Second remove the argument from the function definition function isValid(password){ ... } because you are overwriting it with the dom node (var password = document.getElementById("password");)
Third this can be changed
if (password.value.toUpperCAse().match(pass)){
to this
if (password.value.toUpperCase() == pass.toUpperCase()){
Two reasons:
1. You're not calling the isValid function from anywhere and 2. You don't have a argument password to add into the function. Give this a try:
<div class="jumbotron">
<form name="PasswordField" action="">
<div class="form-group">
<label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<-- Add an ID to the button -->
<button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
</form>
<script type="text/javascript"
const pass ="seahorse"
const password = document.getElementById("password");
const submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", e=>{
e.preventDefault();
isValid();
})
function isValid() {
if (password.value.toLowercase().match(pass)){
window.location.href = "HappyChristmas.html";
return true;
}
else{
alert('Nope, try again')
return false;
}
}
</script>
I have two input fields as this:
input type="hidden" name="action" value="login">
input type="hidden" name="action" value="admin_login">
I have two separate login forms, which I want to become one
I've searched for the solution on internet and it seems that it is better to let in tho form the value of "login", so that normal users login using their credentials, and then do some javascript in the page translated as IF username === adminX then this. form value="admin_login".
Any help on how to accomplish this, I don't know much of javascript
Using java script you can do this by
<script>
function check_login() {
if (userType==admin){
Myform.value="admin_login";}
else{
Myform.value="user";
}
}
</script>
<input type="submit" onclick="check_login()">
I think the best way to do this by having single form for both user but now depend on server side how you handle it.like
if(userType==admin_login) {
//show admin permissions for result page
}
else{
hide all admin permissions and show only given permission for normal user for result page
}
later: done it like this, because next day the version from comment is not working anymore..boh
<form method="POST" action="index.php">
<input type="text" placeholder="Username" id="username" onBlur="myFunction()" name="username" value="">
<input type="password" placeholder="Password" name="password">
<button type="submit" name="action" id="log" value="login">SIGN UP</button>
</form>
and javascript:
<script type="text/javascript">
function myFunction(){
var username = document.getElementById("username").value;
if(username == 'admin'){
document.getElementById("log").value='admin_login';
}else{
document.getElementById("log").value='login';
}
}
</script>
Hope it helps someone in the future. Thank you!
I have an HTML form that I would like to make interact with some JavaScript:
...
<form name="signup">
<label id="email" for="email" placeholder="Enter your email...">Email: </label>
<input type="email" name="email" id="email" />
<br />
<input type="submit" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
...
I have some JavaScript that I want to take the entered email address and store it in an array (it is currently inline with my HTML hence the script tags):
<script type="text/javascript" charset="utf-8">
var emailArray = [];
function signup(){
var email = document.signup.email.value;
emailArray.push(email);
alert('You have now stored your email address');
window.open('http://google.com');
console.log(emailArray[0]);
}
</script>
I was hoping that this simple script would store the email in emailArray but the console remains empty throughout the execution.
What is wrong with this code?
You have two problems.
Your form is named signup and your global function is named signup. The function is overwritten by a reference to the HTML Form Element Node.
Your submit button will submit the form, causing the browser to leave the page as soon as the JS has finished (discarding all the stored data and probably erasing the console log)
Rename the function and add return false; to the end of your event handler function (the code in the onclick attribute.
Please rename your function name (signup) or Form Name (signup),
because when you are try to access document.signup......
It'll make a type error like, object is not a function
Try below Code,
<script type="text/javascript">
var emailArray = [];
function signup() {
var theForm = document.forms['signupForm'];
if (!theForm) {
theForm = document.signupForm;
}
var email = theForm.email.value;
emailArray.push(email);
console.log(emailArray[0]);
}
</script>
<form name="signupForm">
<label id="email" for="email" placeholder="Enter your email...">Email: </label>
<input type="email" name="email" id="email" />
<br />
<input type="button" name="submit" id="submit" value="Signup" onclick="signup(); return false;"/>
</form>
The problem that is given is that the form name is "signup" and the function is "signup()", then the function is never executed (this is better explained in this answer). If you change your form name or your function name everything should work as expected.
try this code :
<form name="test">
<label id="email" for="email" placeholder="Enter your email...">Email: </label>
<input type="text" name="email" id="email" onBlur=/>
<br />
<input type="button" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
<script type="text/javascript" charset="utf-8">
var emailArray = [];
function signup(){
var email = document.getElementById('email').value;
emailArray.push(email);
alert('You have now stored your email address');
window.open('http://google.com');
console.log(emailArray[0]);
return false;
}
</script>
As suggested in the comments, just change your email variable to:
var email = document.getElementById('email').value;
then just push it to your emailArray
EDIT
You'll need to rename the ID of your label. The reason it's currently not working is because the value being returned is that of the first element with the id of email (which is your label, and undefined).
Here's a Fiddle
I would propose two improvements to your code:
Put your javascript right after the <form> element in order to be sure that dom element exist in the document
Attach click handler using addEventListener method. Read more here.
Email:
var emailArray = []; function signup(){ var email = document.getElementById('email').value; emailArray.push(email); alert('You have now stored your email address'); window.open('http://google.com'); console.log(emailArray[0]); return false; } document.getElementById("submit").addEventHandler('click', signup, false);