HTML password validation [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a page that has a field and a button.
I need that if the input equals a pre-defined password then it will reveal some text on the screen.
I'm not an html expert that's why ask this here.
In the meanwhile I have only this for now ...
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form>
<input type="text" />
<input type="submit" />
</form>
</div>
</body>
</html>
Thanks!
EDIT:
I would also like to ask for an PHP more secure solution.
Thanks!

See THIS FIDDLE. I wont cover the same points made elsewhere concerning best practice and server side validation- these should have been made clear by now.
Type myValue in the textbox to see the hidden text.
jQ
$('input[type=text]').keyup(function () {
$(this).val() == 'myValue' ? $('span').show() : $('span').hide();
});
HTML
<input type="text" />
<span>Hidden Text</span>
CSS
span{
display:none;
}

You can use a combination of HTML and Javascript to do what you want. Change your input boxes to
<script type="text/javascript">
function validate(){
if(document.getElementById("my-field").value == "password"){
document.getElementById("my-div").style.display = "block";
</script>
<input type="text" id="my-field" />
<button onclick="validate();">Submit</button>
<div id="my-div">Some hidden text here.</div>
Hope that helps.

Use a server-side language for this. For example PHP. Doing something like this in HTML is completely wrong. Do not use JavaScript for secure operations - it is viewable/editable on the client's side.
However if you insist(you shouldn't!) you can do it with JavaScript:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form onsubmit="checkPassword()">
<input type="text" name="passwd"/>
<input type="submit" />
</form>
</div>
<script type="text/javascript">
function checkPassword(){
if(document.getElementByName('passwd').value == "topSecretPassword"){
alert("Good!");
}else{
alert("Bad :(");
}
}
</script>

I guess you're a beginner and you're just trying some examples so try the following code, but let me tell you NEVER check passwords with javascript NEVER NEVER!
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<script>
var preDefinedWord = "test123";
function checkMyWord()
{
if(document.getElementById("myword").value == preDefinedWord)
{
alert("its the same");
}
else
{
alert("not the same");
}
}
</Script>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form>
<input id="myword" type="text" />
<input onclick="checkMyWord()" type="button" />
</form>
</div>
</body>
</html>

Related

Hi everyone. i have a silly problem in a code. you can help me? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
it's my first time here, I still have to settle down. the problem with the code is that the result does not come out. Help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<div id="operatore" value="moltiplicazione"></div>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
</head>
<body>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
I don't understand what it could be, it all seems right, it doesn't give me debugging error I hope you help me🥺
As others have already mentioned, you messed a few things up.
First of all you have to put your form/markup into the body. Secondly a div cannot have a value, so may you use a hidden input or some kind of select.
Here is a working fiddle:
https://jsfiddle.net/j2gesdbm/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<input type="hidden" id="operatore" value="moltiplicazione"/>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
You are using a "value" attribute for a div
<div id="operatore" value="moltiplicazione"></div>
You can not add the "value" attribute to a div. If you want give a value to this tag, you have to change to an input tag
<input id="operatore" value="moltiplicazione"></input>
If you don't want the input tag to be visible you can set the input type as "hidden"
<input type="hidden" id="operatore" value="moltiplicazione"></input>
I hope I've helped :)

How to transfer inputted text, into output field [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Im not sure what to search on google but here is what Im trying to do..
Currently this is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn=find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
Where it says result1 id like that to change to whatever has been inputted in the text field provided after button been clicked on.
Lets say...
I have enetered 123 into the text field. Click Find, the result1 now changes to 123.
Im not sure where to start with this one, have already looked into google for readings, but couldn't find anything useful.
You need to add a click event listener to button element. When button is clicked, get the value from the input field and display it in the result div element
const btn = document.querySelector('.btn-find');
const inputField = document.querySelector('.pcode');
const result = document.querySelector('.res');
btn.addEventListener('click', () => {
if (inputField.value !== '') {
result.textContent = inputField.value;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn-find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
You'll need to add a class to your input:
<input id="myText" type="text" placeholder="Product Code" class="pcode">
and some JavaScript:
<script type="text/javascript">
function myFunction() {
document.getElementById("res1").innerHTML = document.getElementById("myText").value;
}
</script>
In-case you use jquery, you can do like this.
<input type="text" class="search__input">
<button>click</button>
$("button").click(event => {
let result = $(".search__input").val();
console.log(result);
});
you can do this, say the find button id is id="find"
$("#find").click(function(){
var inputdata = $(".pcode").val();
document.getElementById("res1").innerHTML = inputdata;
});
you can try this code. It will work.

Code is disappearing when I type in input element

Whenever I type into the <input /> element of my HTML, everything disappears. I din't see any problem or error on my JavaScript console, and when I inspect the page, the code seems to disappear as well.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Coding stuff</title>
</head>
<body>
<input type="text" id="myInput" onkeydown="write()" />
<p id="myDiv" style="width: window.innerWidth;" style="color: green;"></p>
<script>
function write() {
document.getElementById("myDiv").innerHTML += Math.floor(Math.random()*2) + " ";
document.getElementById("myInput").value = "";
}
</script>
</body>
</html>
Does anyone know why this is happening? Thanks

HTML5 Local Storage input not displaying

I'm struggling to see what is wrong with my code. I've coded a local storage app to show user inputs, however, what is being input, is not displaying on the screen.
I'll show my code and hopefully someone can see an error somewhere, I think it should be working fine?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Premier League Site</title>
<link rel="stylesheet" href="style.css"/>
<script src="elliot.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>Premier League Site</h1>
</header>
<nav id ="Menu_Bar">
<ul>
<li>Home</li>
<li>Teams</li>
<li>Extras</li>
</ul>
</nav>
<section id="sectionone">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"></p>
</form>
</section>
<section id="sectiontwo">
Stored Info should go here
</section>
<footer id="footer">
Elliot Harrison 2014
</footer>
</div>
</body>
</html>
That is my HTML code, here is my Javascript code.
function doFirst(){
var button = document.getElementbyId("button");
button.addEventListener("click", saveStuff, false);
}
function saveStuff(){
var one = document.getElementbyId("one").value;
var two = document.getElementbyId("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one){
var sectiontwo = document.getElementbyId("sectiontwo");
var two = sessionStorage.getItem(one);
sectiontwo.innerHTML = "Name of variable: "+one+"<br />Value: "+two;
}
window.addEventListener("load", doFirst, false);
Can anyone notice anything wrong?
Thanks!
EDIT: Noticed one problem, I did not have ">" at the end of
Javascript is case sensitive, you have to use getElementById instead of getElementbyId.
there is also antoher error in your html:
<p>(key) One: <input type="text" id="one" /></p>

action can't be turned into a function

Why could the same action when turned into a function stop working? are there any general rules? here is a very concrete and clear example of this issue.
jQuery Mobile, http://jsbin.com/osovoh/2/edit
in this version, js works well. the label of radio button gets changed instantly.
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
but if you remove the /* s and thus turn the same action into a function triggered by the other button,
function go() {
var radio_elem = $('#edit-new-amount-no-cost');
$("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
}
the the same code messes formatting of the destination. what's wrong?
If it is inside of the function, the markup change happens AFTER jQuery Mobile renders the page. You'll have to cause jQuery Mobile to re-render the page or element you are modifying.
here is the answer:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WORKING: replace text in radiobutton" />
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body style="text-align:center">
<div class="form-radios">
<div class="form-item" id="edit-new-amount-no-cost-wrapper">
<label class="option" for="edit-new-amount-no-cost" >
<input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio"/>
original label
</label>
</div>
</div>
<input name="click to change the label" type="button" onClick="go()">
<script>
function go(){
$("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
}
</script>
</body>
</html>

Categories