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.
Related
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.
my console log is not outputting anything. It's at the very start of the javascript file, so I have no idea why it doesn't log anything.
Otherwise I'm getting a 302 "Error", but I assume the problem is server side.
Lastly, the ajax post is not getting written into the database. As I've never worked with AJAX before, any pointers would be welcome.
Note: I'm using a Mikrotik as a HotSpot, and it's using $ (dolar signs) for it's own purpuse, so I can't use JQuery.
Thanks for all the help.
This is the whole code, as is...
<!DOCTYPE html>
<html>
<head>
<title>HotSpot</title>
</head>
<body>
<!-- Hotspot login form -->
<form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
$(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<input type="hidden" name="username" type="text" value="HSuser" />
<input type="hidden" name="password" type="password" value="SimpleUserPassword" />
</form>
<!-- Mail for which gets inserted into the DB -->
<form name="mail" action="http://some.domain/validate-sanitize.php" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script rel="javascript" type="text/javascript">
document.getElementById("submit_ok").addEventListener("click", SendAjax);
function SendAjax() {
var email = document.getElementById("email").value;
console.log(email);
// Check if fields are empty
if (email=="") {
alert("Please enter your email.");
}
// AJAX code to submit form
else{
var xhr = new XMLHttpRequest();
xhr.open('POST', '$(link-login-only)', true);
xhr.send("dst=$(link-orig)&popup=true&username=HSuser&password=SimpleUserPassword");{
setTimeout(function(){
console.log("Fired " + email);
document.getElementById("submit_ok").submit();}, 500 );
}
}
}
</script>
</body>
</html>
This does not answer you question, still it will show the result.
Try replace console.log(email); with alert(email);.
Did you try another browser?
The problem was with Mikrotik. Login was set as CHAP (password authentication with salt), and this method was not implemented. Still don't know why that would be causeing the console.log problems, but well, there it is.
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 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!