I have a form with a username, password and verification pin inputs. The user enters their username and password and clicks sign in, which will unhide a div that allows them to enter their verification pin. In the hidden div it shows up 'Hello this account is using a verification pin' however I would like to know if there is a way where I can make it say 'hello //username that was entered// this account is using a verification pin'. How would I achieve this?
The button that unhides the div
<input class="btn_green_white_innerfade btn_medium" type="button"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
The field where the user enters the username.
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username"
id="steamAccountName" maxlength="64" tabindex="1" value=""><br> <br>
The message that shows up in the hidden div
<div class="auth_modal_h1">Hello <span
id="login_twofactorauth_message_entercode_accountname"></span>!</div>
<p>This account is currently using a verification pin.</p>
</div>
Any help will be appreciated
This should do it:
var username = document.getElementById("steamAccountName").value
document.getElementById("login_twofactorauth_message_entercode_accountname").innerText = username
This basically means that everything you add to the div is done with jQuery instead of having it mixed which can lead to confusion later.
Add id="username" to your input.
Add id="modaldiv" to your hello div
Remove everything in that div.
var username = $("#username").val();
var divhtml = "Hello " + username + " <span
id='login_twofactorauth_message_entercode_accountname'></span>!
$("#modaldiv").html(divhtml);
The following code will definitely get you started. It allows you to get the value that the user has entered in the input box with .value and add content to another div with .innerHTML.
var displayUsername = function() {
var username = document.getElementById('username').value
if(username != '') {
document.getElementById('message').innerHTML = 'Hello '+username+'!'
}
}
<input type="text" name="username" id="username">
<button class="clickMe" onclick="displayUsername()">Click ME!</button>
<div id="message"></div>
Of course it is possible. You can use the DOM. In your showDiv() function you could fetch the entered username with the dom. You could do something like:
function showDiv() {
const username = document.getElementById("userLogin");
const div = getElementById("login_twofactorauth_message_entercode_accountname")
div.getElementsByTagName("p").innerText = "Hy " + username + ", welcome...";
}
This code should do the trick!
Hope this help!
I added an id="feedback" to your html:
<div id="feedback" class="auth_modal_h1" style="display:none;">
Hello <span id="login_twofactorauth_message_entercode_accountname"></span>!
<p>This account is currently using a verification pin.</p>
</div>
then, I added this javascript:
<script>
function showDiv() {
document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
document.getElementById("feedback").style.display = 'block';
}
</script>
Related
I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?
You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>
If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>
Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>
You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"
Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>
I have a Feedback form which allows people to submit feedback, however I want to give the user the option to remain anonymous, the thing is my CMS must have Email and Name as a mandatory fields so I was thinking of adding a dummy name and email email if they wish to be Anonymous and then hide the field. It'll look something like this:
<input type="checkbox" class="anon">
if this is ticked then add the name "Remain Anonymous" to the Name field and add anon#anonymous.com to Email field, and then also hide the div.remain-anonymous. If unticked, then show the div again and clear the fields to blank again. And do the same again if it is ticked again etc.
<form>
<div class="remain-anonymous">
<input type="text" value="Name" class="name-field">
<input type="text" value="Email" class="email-field">
</div>
<textarea placeholder="Feedback comments"></textarea>
<input type="submit" value="Submit">
</form>
You can try out the below JQuery to achieve what you want.
$(document).ready(function () {
$(".anon").on("click", function () {
var $this = $(this);
if ($this.is(':checked')) {
$(".name-field").val("Remain anonymus");
$(".email-field").val("anon#anonymous.com");
//comment this to see the fields set.
$(".remain-anonymous").hide();
} else {
$(".name-field").val("Name");
$(".email-field").val("Email");
$(".remain-anonymous").show()
}
});
});
check out the same code in the JSFiddle . click here
You can do it like below:
$(function(){
var email = "anon#anonymous.com",
name = "anonymous";
$('.anon').change(function(){
if($(this).is(":checked")){
$('.remain-anonymous').hide();
$('.name-field').val(name);
$('.email-field').val(email);
}else{
$('.remain-anonymous').show();
$('.name-field').val("");
$('.email-field').val("");
}
});
});
Here is the code, I can't figure out why enter/return isn't working! Is it because it's inline?
HTML
<div class="wrap"><form name="login" style="margin: 0px">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<input TYPE="text" NAME="pass" size="17" onKeyDown="e.keyCode == 13;" id="fname" class="cool"><br><input type="button" value="LOGIN" class="asbestos-flat-button" onClick="TheLogin(this.form)">
</form>
</div>
JS
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = 'password';
if (this.document.login.pass.value == password) {
top.location.href="home.html";
}
else {
location.href="index.html";
}
}
// End hiding --->
</script>
I'm learning JS so any help would be so awesome!
UPDATE
Thanks for your help. Still not working when integrated. The page doesn't load the home.html when I hit enter/return. Instead I get no refresh, and the address bar has the url http://example.com/?pass=password.
If I click the button it does load the home.html!
thanks!
Here I wrote a JSFiddle with the working example.
In the HTML code:
Remove onKeyDown="e.keyCode == 13;" from the <input> text element.
Remove onClick="TheLogin(this.form)" from the <input> button element.
Change the type of input button from 'button' to 'submit'. In this way, when you press "enter" in the input text form the form is submitted.
Intercept the "submit" event in the form, adding onSubmit="theLogin(this.form)" on <form> element.
Note: I have renamed the function name from "TheLogin" to "theLogin" because in JavaScript the functions begins with lowercase letters if they are not constructors.
The HTML code:
<div class="wrap">
<form name="login" style="margin: 0px" onSubmit="theLogin(this.form)">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<INPUT TYPE="text" NAME="pass" size="17" id="fname" class="cool">
<br>
<input type="submit" value="LOGIN" class="asbestos-flat-button">
</form>
</div>
And the JavaScript code:
theLogin = function() {
var password = 'password';
if (this.document.login.pass.value === password) {
top.location.href = "home.html";
} else {
location.href = "index.html";
}
}
You have missed the <input type="submit">, without it you can't use the Enter key to submit the form.
I have a login page. I want the form to validate the form to allow the form to submit if I only enter a specif word for the username and a different word, of my choosing, for the password. I do not wish to use a sql database. I want it to validate to a specific word that I pre-set it to. If it is right I would like it to redirect me to my index.htm page once I hit submit. But if it is wrong I would like it to clear the text fields. What code do I use to do this. Here is a basic layout of my code:
html
<body>
<h1 class="color">Login</h1>
<form action="index.htm">
<span class="heading">Username:</span><br>
<input name="username" type="text" id="username" size="20">
<br>
<span class="heading">Password:</span><br>
<input name="password" type="password" id="password" size="10"><br>
<button name="Login" type="submit" onclick = "evaluateInput()">Login</button>
</form>
</body>
js
evaluateInput = function(){
inputBox = document.getElementById("username");
if(inputBox.value == "<insert password here>"){
}else
}
}{
inputBox = document.getElementById("password");
if(inputBox.value == "<insert password here>"){
}else
}
}
If you succeed form validation as commented out above, you can use below code to redirect.
window.location.href = "index.html"
EDIT
evaluateInput = function(){
inputUsername = document.getElementById("username");
inputPassword = document.getElementById("password");
if(inputUsername.value == "<insert username here>" && inputPassword.value == "<insert password here>"){
window.location.href = "index.html"
}
}
I am new to javascript, and i only know c++ so far, but i know the logic but i just don't know the syntax on javascript
so i have this form :
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
when the user types his/her name how do i save the value to some variable and display it with javascript?
i have already tried using
function displayName(){
var username = getElementById("inputname").value;
document.write(username);
}
and i put
<script>displayName();</script>
below the form. it doesn't seem to work, how do i do it?
and how do i use:
<input type="submit"></input>
in relation to it?
Try this,
Javascript
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
}
HTML
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
<input type="button" onclick="displayName();"></input>
<span id="msg"></span>
By changing onclick="return displayName()" to onkeypress="displayName()" you will be able to see the changes on the spot.
change your html and js like this. onblur function call when user leaves the input from focus. get the enter value onblur
<span>Please type your name here: </span>
<input id="inputname" type="text" onblur="displayName();" value=""></input>
js
function displayName(){
var username = document.getElementById("inputname").value;
document.write(username);
}
you need to change your fucntion little bit..
getElementById() is not a direct function in javascript..use it with document object
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
return false;
}
on submit click
<input type="submit" id="btnSave" onclick="return displayName();" value="Save" />
<div id="msg" > </div>