Develop Reference

Using submit type but IF statement does not work

I am trying to make a very simple login page for a website I created and I am having issues with the submit button. I got the submit button to work fine if I use a "button" type in HTML however the Enter key does not work then. I discovered if I use a "submit" type, the Enter button and the mouse click will work however... the button now goes over my IF statement, straight to my Else statement. Any help would be appreciated.
HTML form:
<form>
<label for="pswd">ENTER PASSWORD</label>
<br>
<input class="box" type="password" id="pswd">
<br>
<input class="confirm" type="submit" value="SUBMIT" onclick="checkPswd();" />
</form>
JS code:
function checkPswd() {
var confirmPassword = "08012020";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location = "index.html";
} else {
alert("Password is incorrect, Please try again.")
}
}
Again, thank you in advance...

The key is returning false after calling your function, so the page redirect is not triggered by the input submission:
function checkPswd() {
let confirmPassword = "08012020";
let password = document.getElementById("pswd").value;
if (password === confirmPassword) {
alert("CORRECT!");
} else{
alert("Password is incorrect, Please try again.")
}
}
<form>
<label for="pswd">ENTER PASSWORD</label>
<br>
<input class="box" type="password" id="pswd">
<br>
<input class="confirm" type="submit" value="SUBMIT" onclick="checkPswd(); return false;" />
</form>
I would like to add that performing client-side password checking is very insecure since the source code can easily be inspected, so if you are hoping to use this in a real website I would suggest you consider a different approach!

How do i make a js code that redirects to a certain html page with a certain input?

let me explain this better, i would like to know how it's possible to create a js code that checks if an html input is correct and in case it is it redirects you to another page, here is what i tried based on what i managed to find out.
html part:
<form name="access" onsubmit="return validate()">
<input
type="text"
id="inputbox"
value="Password"
pattern="idkwhatishoouldwriteinhere"
/>
<input type="submit" value="Submit" />
</form>
js part:
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html");
}
}
in case you are wondering why i put the "answer" in the patter is because this is supposed to be a little easter egg and i feel like looking directly at the js is meaningless becuase it contains the link you should be redirected to.
enter code here

You need to give your input the name Password, otherwise document.access.Password is undefined.
function validate() {
if (document.access.Password.value != "idkwhatishoouldwriteinhere") {
alert("Wrong password");
document.access.Password.focus();
return false;
} else {
window.open("index.html")
}
}
<form name="access" onsubmit="return validate()">
<input type="text" id="inputbox" value="Password" name="Password" />
<input type="submit" value="Submit" />
</form>
<!-- password is "idkwhatishoouldwriteinhere" -->

You want this.
You had some issues with the id of the field and name etc
I also changed your inline code to eventListener which is the recommended method
Password is fred
window.addEventListener("load", function() {
document.getElementById("access").addEventListener("submit", function(e) {
const inputbox = document.getElementById("inputbox");
if (inputbox.value != "fred") {
alert("Wrong password");
inputbox.focus();
e.preventDefault(); // cancel submit
} else location.replace("index.html")
});
})
<form id="access">
<input type="password" id="inputbox" value="" placeholder="Password" />
<input type="submit" value="Submit" />
</form>

If you want to keep your code close to what you already have, I would adjust it like this. I would suggest storing your class names and ids as variables and then accessing them from the variable. Also there is no need to return false in your if. There are other good solutions on here but this one will keep your code pretty close. This will also ensure that you don't end up with a null value when accessing the value in your password field.
const passwordField = document.getElementById('inputbox');
function validate() {
if(passwordField.value != "idkwhatishoouldwriteinhere") {
alert( "Wrong password" );
passwordField.focus() ;
}
else {
window.open("index.html")
}
}
<form name="access" onsubmit="validate()" href="javascript:void(0)">
<input type="text" id="inputbox" value="Password" />
<input type="submit" value="Submit" />
</form>

Two button submit form issue

Hi successfully made a form where there are two submit buttons.
I needed two buttons because I need each button to take the form to a different place, while get/post the information in the first form.
This is how I did it
Javascript:
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" input name="pick" required value="<?php echo isset($_POST['pick']) ? $_POST['pick'] : ''; ?>"/>
</div>
<input type="button" onclick="submitForm('page2.php')" class="btn small color left" value="ADD ANOTHER STOP" />
<input type="button" onclick="submitForm('page3.php')" class="btn medium color right" value="Continue" />
</form>
It works, both buttons submits to the relevant pages.
But now there is one problem I can't seem to fix, previously if the form was not filled, and i clicked submit, it would ask me to fill up the required fields, now it does not anymore.
If required fields are not filled up, it still submits the form.
I need button 1 to not require required fields to be filled up, and button 2 to require it as button 2 submits the form, while button 1 brings it to a new form to fill up with other details before they submit from there.
Anyone know of a way I can sort this?

You can try this: <input type="text" name="pick" id="pick" required/> and in the javascript
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
if (document.getElementById('pick').value) {
form.submit();
}}
else{
alert('Please fill the required field!');}

You just need to use jquery to validate the form when the first button is clicked and you can use formaction attribute on the button to specify where the button should go when it's clicked.
$('document').ready(function(){
$('#btn1').on('click',function(){
var pick = $('input[type="text"][name="pick"]').val();
if(pick == ""){
alert("enter pick");
return false;
}else{
$(this).submit();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" name="pick" value="your value">
</div>
<button type="submit" formaction="page2.php" class="btn small color left" id="btn1">ADD ANOTHER STOP</button>
<button type="submit" formaction="page3.php" class="btn medium color right">Continue</button>
</form>

You could use jQuery for this.
if ($('#something').length)
This will check if there exist an element with the id 'something', but not if it is empty or which value it has.
To check this you can use:
if($('#something').val().length>0)
or
if($('#something').val() != "")
Do with it what ever is needed.
You could even add this check within your submitForm function just above the current code.

Try this:
<script>
function submitForm(action) {
var a = $("input[name=pick]").val();
if(a) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
} else {
alert('please fill the required field');
return false;
}
}
</script>

Using this way(simple way):--
<form id="myForm" name="myForm" onSubmit="encriptar_rc4();return false;">
<input type="submit" name="submitOne" value="submitOne" class="submitButton" />
<input type="submit" name="submitTwo" value="submitTwo" class="submitButton" />
</form>
<script>
$(function(){
$(".submitButton").click(function(e){
alert($(this).attr("name"));
});
encriptar_rc4();{
alert('hola');
}
});
</script>

Making a simple password checker in HTML/Javascript that displays a div upon correct password

I'm trying to make code for a simple password checker that will be part of a website I give to students for an activity. I don't care if the password is easy to find in the code. I just want the students to be able enter a password, and press enter or click the button to see if the password is correct.
This is the javascript:
<script type="text/javascript">
function isValid(){
var keyvalue = document.getElementById('keyvalue').value;
if (keyvalue == "miranda")
{document.getElementById('welcomeDiv').style.display = "block";}
else
{alert('ACCESS DENIED')}
}
</script>
The HTML
<form name="PasswordField" action="">
Type Password Below:</br>
<input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass).click()">
<input type="button" id="subPass" value="ACCESS" onclick="isValid(this);">
</form>
<div id="welcomeDiv" style="display:none;" class="answer_list">
</br>
<p>ACCESS GRANTED</p></br>
Click to go to next stage.
</div>
Clicking the button works well, but if I press enter it will flash the hidden div briefly before reloading the page, thus hiding the div again. I'm trying to figure out how to prevent it from doing this.

Your action="" is probabaly not doing what you what it to.
Use `onsubmit="return false;"' instead:
<form name="PasswordField" onsubmit="return false;">
Type Password Below:</br>
<input type="text" id="keyvalue" name="keyvalue" onkeydown = "if (event.keyCode == 13) document.getElementById('subPass').click()">
<input type="button" id="subPass" value="ACCESS" onclick="isValid(this);">
</form>
Or just make it a <div instead of a <form

The button is submitting the form, reloading the page.
In the onclick attribute of your button you need to return false to override the browser's default behaviour of actually sending the form:
<input type="button" id="subPass" value="ACCESS" onclick="isValid(this); return false">
As Marvin mentioned in a comment you also need to fix the quotes in the onkeydown attribute of your text input and remove some extra spaces:
<input type="text" id="keyvalue" name="keyvalue" onkeydown="if (event.keyCode == 13) document.getElementById('subPass').click()">

When I press enter key, unable to login

I have been trying to log in to a offline HTML/CSS page using the enter key but unable to start with JavaScript which needs I'm sure.
But can log in using the mouse when I click the log in button which i have created ..
How do i use the enter key stroke to log in?
This is the javascript which I have hard coded for credential test which works using the mouse click.. I want it for the enter key.. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">
<h1>
Login Page
</h1>
<div>
<form name="login">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>
<script language="javascript">
function check(form)
{
if(form.user.value == "user" && form.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
}
</script>

Use the submit event handler. The click handler on an element will only fire if you click on it. What you are trying to do is submitting a form, but handling the form with javascript instead of on the server. I would recommend binding that dynamically, but as you have all javascript here inline, I'll give an example inline too.
You'll need to attach a submit event handler to the form element. If you do it inline, this will work with onsubmit="..." instead. The return is there to prevent/allow the form to be submitted to the server. If the function returns 'true', the form will be submitted to the server. If the function returns 'false', the form will not be submitted. You'll also need to change the type of your submit button to submit. This will tell the browser to submit the form if that button is clicked. Alternatively, if you press enter in an input field, the browser will see this as submitting the form too.
<form name="login" onsubmit="return check(this)">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="submit" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
The javascript behind it will remain mostly the same. You'll notice that we passed this to the function. This will pass the element itself (in this case the form element) to the function. As said before, you'll need to return false. I've changed form to frm as form is a globally defined variable in some browsers.
function check(frm)
{
if(frm.user.value == "user" && frm.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
return false;
}
An example jsfiddle: http://jsfiddle.net/AS5t5/