I have looked everywhere but cannot find an answer. I will change my code if I have have to, but I hopefully won't have too, so If you can you give me an answer in JavaScript that would be great.
I am attempting to make a password database for this code;
<!DOCTYPE html> <html lang="en"> <head> <title>login2</title> <meta charset="utf-8" /> </head> <body> <input class="textBox" id="pass" type="password" maxlength="30" required/> <button type="button" onclick="a()">Login</button> <script>
function a() {
var i = document.getElementById('pass').value;
if (i == "1234") {
window.location = "in.html";
}
else {
window.location = "index.html";
}
} </script> </body> </html>
I want to make it so instead of saying if (i == "1234) I can get a value from an external database, with a list of passwords.
If you can please tell me how to modify the contents!
Thanks, Please help!
What I would suggest doing, and have done in the past is by storing hashes in memory rather than the password(s). You could implement a version of Joseph Myers's MD5 script, then modify the contents of the <script> tag to match the following:
var i = document.getElementById('pass').value;
if (md5(i) == "##MD5ofExpectedPassword##") {
window.location = i+".html"; // Change the name of the page to the password
} else {
window.location = "index.html";
}
Related
I have a name input on 1.html.
I need to call a function where the input will be stored after completion, and when the person clicks ~next~ to go to the next page (2.html), whatever was stored appears there.
Example:
~1.html~
What's your name?
~input~ John ~input~
~2.html~
Hi, John! How can i help you?
I know i can use Session Storage to do it, but i'm not sure on how to proceed.
Here's what i have:
1.html
<p>"Whats Your Name?"</p>
<input id="your-name-input" type="text">
<a href="2.html">
<button id="next-button">Next</button>
<script>
nextButton = document.getElementById("next-button);
nextButton.addEventListener("click", () => {
var name = document.getElementbyId("your-name-input").value;
if(name !== "") {
sessionStorage.setItem("name", name);
} else {
alert("Please fill yout name")
});
</script>
And then, on 2.html i have:
<p id="user-name"></p>
What i'm trying to do, is to put inside the <p>, the following greeting:
Hi (name.value), how can i help you?
How can i call a function that loads the name value on the 2.html page when the page loads?
The below code should work. There are a few things missing in your code, not sure if you copied everything in.
In either case, the below works for me. You just need to update the link in the window.location = syntax. When you do that, it will take your stored value to the new page in the same tab, and display it using the script code in 2.html.
Code in 1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>Your name test</title>
</head>
<body>
<p>Whats Your Name?</p>
<input id="your-name-input" type="text">
<button id="next-button">Next</button>
<script>
const nextButton = document.getElementById("next-button");
const input = document.getElementById("your-name-input");
nextButton.addEventListener("click", () => {
const name = input.value;
if(name !== "") {
sessionStorage.setItem("name", name);
window.location = "<link to your 2.html file>";
} else {
alert("Please fill your name")
}
});
</script>
</body>
<footer>
</footer>
</html>
Code in 2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>See, it works</title>
</head>
<body>
<p id="user-name"></p>
<script>
const displayText = document.getElementById("user-name");
const storedValue = sessionStorage.getItem("name");
console.log(storedValue);
window.addEventListener("load", () => {
displayText.innerHTML = "Hi " + storedValue;
})
</script>
</body>
<footer>
</footer>
</html>
Original ans to original question:
You could use an addEventListener with an IF statement for your 'next' button and then the code you already have for localStorage.
Depending on what you need from your page, you could also use sessionStorage - that one doesn't save the input forever so might save, albeit limited, space on your user's computer.
I don't see the HTML for your button yet. But assuming you have it, here's an option for the rest of your code in 1.html.
Inside 1.html script tag:
nextButton = document.getElementById("yourButtonID");
nextButton.addEventListener("click", () => {
var name = document.getElementById("your-name-input").value;
if(name !== "") { // if input is not empty
localStorage.setItem("name", name); // set the value in localStorage
} else {
alert("Please fill your name")} // else, display an alert (if you like)
});
Edit: Just confirming: I want what the user typed to be saved so that when he reloads/leaves the webpage and comes back what he wrote earlier is still there.
I tried using cookies but it only put one line of Default(variable) when I reloaded the page. Im trying to get it to work with localStorage now but it sets the textarea to "[object HTMLTextAreaElement]" or blank when I reload. I read that this error can be caused by forgetting to add the .value after getElementById() but I did not make this mistake. I am hosting and testing the webpage on Github(pages). What am I doing wrong? here is the code(ignore the comments also it might not work in jsfiddle bc it localstorage didn't work there for me):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>le epic web page</title>
</head>
<body><!--
= "\n"-->
<textarea id="txt" rows="4" cols="50" oninput="save();"></textarea>
<script>
var Default="P1 Homework: \nP2 Homework: \nP3 Homework: \nP4 Homework: \n";
if(localStorage.getItem("P") == ""){
document.getElementById("txt").value=Default;
localStorage.setItem("P")=Default;
}else{
document.getElementById("txt").value=localStorage.getItem("P");
}
//update cookie (called when typed)
function save(){
var txt=document.getElementById("txt").value;
//txt=txt.replace(/\r\n|\r|\n/g,"</br>");
localStorage.setItem("P",txt);//set cookie to innerHTML of textArea, expires in 1 day
}
//when page closed/reloaded
window.onbeforeunload = function(){
localStorage.setItem("P",txt);//update cookie when page is closed https://stackoverflow.com/a/13443562
}
</script>
</body>
</html>
When you are exiting the page, you are referencing the text element and storing that in localstorage. Since localStorage is a string it converts the html element reference into the text you see.
window.onbeforeunload = function(){
localStorage.setItem("P",txt);
}
You are doing it correctly with save, so just call save with the beforeunload event
window.addEventListener('beforeunload', save);
Another bug in the code is the line
if(localStorage.getItem("P") == ""){
when localStorage is not set, it returns null. So the check would need to be a truthy check ( or you can check for nullv)
if(!localStorage.getItem("P")){
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>le epic web page</title>
</head>
<body>
<textarea id="txt" rows="4" cols="50" oninput="save();"></textarea>
</body>
<script>
const Default =
"P1 Homework: \nP2 Homework: \nP3 Homework: \nP4 Homework: \n";
if (
localStorage.getItem("P") === "" ||
localStorage.getItem("P") === null ||
localStorage.getItem("P") === undefined
) {
localStorage.setItem("P", Default);
} else {
let currentValue = document.getElementById("txt");
currentValue.value = localStorage.getItem("P");
}
function save() {
let txt = document.getElementById("txt").value;
localStorage.setItem("P", txt);
}
window.onbeforeunload = function () {
let txt = document.getElementById("txt").value;
localStorage.setItem("P", txt);
};
</script>
</html>
I am trying to retain data in a localstorage after reload but it is not working
this is my attempt
<script>
window.onbeforeunload = function() {
localStorage.setItem(name, $('#inputName').val());
}
window.onload = function() {
var name = localStorage.getItem(name);
if (name !== null) $('#inputName').val(name);
alert(name);
}
</script>
<html>
<body>
<input type="text" id="inputName" placeholder="Name" required>
</body>
</html>
on refreshing the page after entering data on the form it keeps alerting null. kindly assist
In your onbeforeunload, name is the name of the window (because you haven't given it any other value, and browsers have a global name property which is the name of the window — it's usually blank).
In this line:
var name = localStorage.getItem(name);
...it's undefined, because of the var name.
You need to use a proper name, for instance:
window.onbeforeunload = function() {
localStorage.setItem("your-setting-name", $('#inputName').val());
};
window.onload = function() {
var name = localStorage.getItem("your-setting-name");
if (name !== null) $('#inputName').val(name);
alert(name);
};
Also note charlietfl's oint that if you don't want to alert null on the first visit to the page, you need to put the alert in the body of the if:
window.onload = function() {
var name = localStorage.getItem("your-setting-name");
if (name !== null) {
$('#inputName').val(name);
alert(name);
}
};
Otherwise, it'll alert null on the first visit and then whatever the last value was otherwise.
(Also note that I've added some missing ;. Automatic Semicolon Insertion will add these particular ones, but it's an error-correction mechanism, so I'd advise not relying on it.)
Other issues:
You're using jQuery functions, but haven't shown any script tag including jQuery on the page.
You have the closing </html> tag before the <input ...> tag.
Here's a fiddle with the above fixed (can't use Stack Snippets with local storage): https://jsfiddle.net/un86not0/ Full working page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Example</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
window.onbeforeunload = function() {
localStorage.setItem("your-setting-name", $('#inputName').val());
};
window.onload = function() {
var name = localStorage.getItem("your-setting-name");
if (name !== null) {
$('#inputName').val(name);
alert(name);
}
};
</script>
<input type="text" id="inputName" placeholder="Name" required>
</body>
</html>
The variable name haven't been initiated yet you already used it as a value reference. Maybe it wasn't working well because of that?
Here in this solution, you can separately reference the local storage item without using the variable name which might have caused it not to work.
<script>
window.onbeforeunload = function() {
localStorage.setItem('myItem', $('#inputName').val());
}
window.onload = function() {
var name = localStorage.getItem('myItem');
if (name !== null) $('#inputName').val(name);
alert(name);
}
</script>
Please help me, in my application I will have enabled and disabled fields depending on conditions but when I press f12 I am able to edit disabled fields also so I have implemented a small hack kind of implementation but not sure if it is better approach
Please suggest me any better approach
<%# taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
<script>
function divFunction(user){
event.preventDefault();
$.ajax({
type: 'POST',
url:'publicProfile.action?userNbk='+user,
dataType: 'text',
success: function(data){
var obj = jQuery.parseJSON(data);
document.getElementById("userNameHeader").innerHTML = obj.articleUserName;
document.getElementById("publicEmail").innerHTML = obj.articleUserEmail;
document.getElementById("publicNbk").innerHTML = obj.articleUserNbk;
document.getElementById("publicPid").innerHTML = obj.articleUserPersonId;
document.getElementById("publicGender").innerHTML = obj.articleUserGender;
document.getElementById("publicJob").innerHTML = obj.articleUserOccupation;
document.getElementById("publicAddress").innerHTML = obj.articleUserAddress;
document.getElementById("publicIntrests").innerHTML = obj.articleUserIntrests;
}});
}
</script>
<script type="text/javascript">
function isConsoleOpen() {
alert("hello");
var startTime = new Date();
debugger;
var endTime = new Date();
return endTime - startTime > 10;
}
$(document).ready(function() {
alert("helo");
if(isConsoleOpen()) {
/* alert("You're one sneaky dude, aren't you ?") */
document.getElementById("aaaaaa").innerHTML="You're one sneaky dude, aren't you ?";
}
})
$(document).keydown(function(event){
if(event.keyCode==123){
return false;
}
else if(event.ctrlKey && event.shiftKey && event.keyCode==73){
return false; //Prevent from ctrl+shift+i
}
});
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div id="aaaaaa">
<form>
<input type="text" disabled="disabled">
<input type="text" disabled="disabled">
<input type="text" disabled="disabled">
<input type="text" disabled="disabled">
</form>
</div>
</body>
</html>
To specifically answer your question, there is no way to keep users from editing your disabled fields. It is impossible to keep users from viewing and editing your HTML.
The only thing you can do to truly take care of this issue is to use server-side validation. If there is a field you don't want text passed into, you're just going to have to set up some kind of validation on the server side to not process the data from that field. Unfortunately, that's just a part of web development.
Creating "hacky" solutions is not a good idea. It leads to unmanageable code, and in this case, it does not even solve the issue.
In fact, (and yes this is opinion-based) I would even say it encourages people to mess with your fields, because if I were hunting around in your code and I saw you trying to keep me out, the first thing I'm going to do is try to get around your hacky block. And 100 times out of 100, I'm going to succeed.
Preventing HTML from being seen and/or edited is impossible.
This html code below is suppose to execute and launch an alert asking for a username and if you get the username correct than it will ask for a password but nothing happens if i open this page in a browser. Why this doing this? What am I missing? Please don't tell me this is a unsecure way to do this I already know I'm just improvising until I implant a better way.
<html>
<head>
<script language="JavaScript">
var username;
var user1="grant"
username=prompt('Please Log in. Username:',' ');
if (username=user1);
var pass1="password";
password=prompt('If you are suppose to be here you have a password. Please type it now:',' ');
if (password==pass1);
else {
window.location="wrongpassword.html";
}
else {
window.location="wrongpassword.html";
}
</script>
<body>
</body>
<html>
You are missing some braces. Corrected code (fiddle: http://jsfiddle.net/RyjhP/1/):
var user1="grant";
var username=prompt('Please Log in. Username:',' ');
if (username==user1){
var pass1="password";
password=prompt('If you are suppose to be here you have a password. Please type it now:',' ');
if (password==pass1){
alert("correct!")
}
else {
window.location="wrongpassword.html";
}
}
else {
window.location="wrongpassword.html";
}
short way to do that.
js
window.onload=function(){
window.location=prompt('Enter Pass')!='password'?'wrong.html':'ok.html'
}
example
http://jsfiddle.net/6KzDJ/
but this is a very bad thing.
you should check the password from a secure location with ajax.