I'm making a website for fun, and there's a little easter egg I want to put in it where you input a password to see a hidden page on the site.
I know how to make a login form with html and I get the "input" tag for putting in the password, but I'm not sure what the "output" should be..? I also want it to display a div or span only when the correct text is entered.
It would be cool if I could have both a username and password be required to match, but I don't know how that'd work at all.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Well, you need javascript for this and just an easy onclicklistener.
For example:
<button onclick="checkHidden()">Login</button>
<script>
function checkHidden()
{
if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
{
window.location.href = "andereSeite.html";
}
}
</script>
But obviously everyone can see the username & password.
They just need to let them show the source.
If you wanna use this secretly you need to use PHP :)
There are many tutorials out there for form + PHP.
Well, here is a simple example. Use onkeyup="" attribute to run the javascript function check_password(this) (this refers to the input-tag) after every entered character. If the password is right the div will appear with display: block/none;.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Related
So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.
Edit: |SOLVED| user Jaromanda X's solution worked perfectly. Thank you
My goal is to have the user enter a bit of text into the textbox and submit it. I want to check and see if the textbox is empty and, if so, it should alert the user that a name needs to be entered. If it is not empty I want it to display the text they had entered.
The issue is this: Every time I hit submit it takes the value of the textbox - empty or not - and displays it without ever alerting the user of an empty text field. I feel like I'm missing something very basic. Thank you for your help!
HTML File
<body>
<div id="statusBar">
<h1 id="playerName"></h1>
<h2 id="playerHP"></h2>
</div>
<div id="gameWindow">
Player Name: <input id="inputName" type="text" name="Player Name">
<br>
<input type="button" value="submit" onclick="getStats()";>
</div>
<script src="script.js"></script>
</body>
JS File
function getStats(){
if(document.getElementById("inputName").len === " "){
alert('You must enter a name!');
} else {
var playerHP = 10;
var playerName = document.getElementById('inputName').value;
//Display player name on screen
document.getElementById('playerName').innerHTML = playerName;
//remove the value placed in the text box
document.getElementById('inputName').value = "";
//Display the player's HP
document.getElementById('playerHP').innerHTML = playerHP;
}
};
Change your if statement to:
if (document.getElementById("inputName").value.length === 0) {
Right now you're trying to get a property len of your <input> element, which doesn't exist. You should first be getting the value of the input, and checking if its length is zero. Hence, .value.length.
It should be:
if (document.getElementById("inputName").value === "") {
// do something
}
You're not using the right conditional.
Replace the
document.getElementById("inputName").len
with
document.getElementById("inputName").value.length === 0.
So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>
I am sure this is super easy, but for some reason I just can't figure this one out.
I need to create a form on the page with the following fields and rules. If the user submits a form but the rules are broken for any field, the behavior listed must be done to advise the user. I am not allowed to use jQuery. Field01 & Field02 is one box. Field03 & Field04 is one box.
Field01: "Username" - Rule01: Cannot be empty, Behavior01: Put focus on it using focus().
Field02: "Username" - Rule02: Cannot be empty, Behavior02: Alert the user that "username is required".
Field03: "Birthyear" - Rule03: Must be numeric, Behavior03: Select the value using select().
Field04: "Birthyear" - Rule04: Must be between 1900 - 2012, Behaviour04: Turn the Birthyear text box background color to yellow.
This is what I have so far... Struggling with the Field03 & Field04.
Does anyone know how to approach this?
HTML:
<!DOCTYPE html>
<html>
<head>
<script defer="defer" type="text/javascript" src="dawid_spamer_Assign01.js"></script>
</head>
<body>
<div id="div1">
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
Username: <input type="text" id="username" name="username"><br>
Birth Year: <input type="select" id="birthYear" name="birthYear"><br><br>
<input type="submit" value="Submit">
</form></div>
<div id="div2">
<img src="cat.jpg" id="im1" name="image1"/>
<img src="dog.jpg" id="im2" name="image2"/>
<img src="fish.jpg" id="im3" name="image3" class='double'/>
</div></body></html>
JS in Separate file:
document.getElementById("username").focus(); // focus on text box
function validateForm(){
var x=document.forms["myForm"]["username"].value;
if (x==""){
alert("Username Required!");
// focus on text box
document.getElementById("username").focus();
return false; // validation failed
}else{
return true; // validation success
}
}
Try
document.getElementById("username").focus(); // focus on text box
function validateForm() {
var x = document.forms["myForm"]["username"].value;
if (x == "") {
alert("Username Required!");
// focus on text box
document.getElementById("username").focus();
return false; // validation failed
}
var dob = document.forms["myForm"]["birthYear"];
var y = dob.value;
if(!(/^\d+$/.test(y))){
alert('must be numert');
dob.select();
return false;
}
return true;
}
Demo: Fiddle
I assume the BirthYear field must be highlighted if the value provided is not numeric. This can be accomplished using the select() Method provided by JavaScript.
Use the isNaN() Method to check if the value provided is numeric.
I'm trying to add visible text to a password field that says "Enter a password" and on click the text is cleared and you type dots. I have two inputs one of type=text and another password. The password input is hidden from the start but appears after you click on the input with the "Enter a password" instruction.
It does this http://mudge.github.com/jquery_example/ but I'm trying to make it for password fields.
HTML
<input type="text" id="password_instructions" />
<input type="password" id="password" />
The Jquery
var $password = $('#password');
$password.hide(); //hide input with type=password
$("#password_instructions").click(function() {
$( this ).hide();
$('#password').show();
$('#password').focus();
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside empty password input
$( this ).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
});
What doesn't work:
When you fill the password input (with dots appearing) and click out the input is hidden and the #password_instruction input shows. So it's not respecting the if empty statement. For some reason it treats the input as empty even if I typed a password in.
What am I doing wrong here?
You seem to be expecting that there's some kind of "pause" after you call focus() and that the remnant of the JS code will be executed only when the enduser is finished typing the password somehow.
This is not true. The function is been executed fully in one go.
You need to move the following piece
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside password input
$(this).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
into another standalone function:
$('#password').focusout(function() {
if ($(this).val().length === 0) { //if password field is empty
$(this).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
}
});
Do you mean:
<input type="password" placeholder="enter password">
If you are wanting to implement this for legacy browsers, you'll have to move the check to the onBlur event. In jQuery this looks like:
$('#password').blur(function() {
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside password input
$( this ).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
});