I am trying to make a Sign Up and Log In html. If user inputs data on SignUp.html, it will save as localStorage and if the data inputted on LogIn.html is not equal to the data inputteed in SignUp.html, it will not confirm. But somehow there is something wrong with the function.
Can someone please help me? I am still new to js
Here is SignUp.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameS"></input>
<button onclick="confirmInput()" type="button">SignUp</button>
</form>
</body>
</html>
and LogIn.html
<!DOCTYPE html>
<html>
<head>
<script src = "JS.js"></script>
</head>
<body>
<form>
<input id="usernameL"></input>
<button onclick="LogInput()" type="button">LogIn</button>
</form>
</body>
</html>
Here is the js
var x = "document.getElementById('usernameS')";
localStorage.setItem("usernameS", x);
var y = "document.getElementById('usernameL')";
localStorage.setItem("usernameL", y);
function confirmInput() {
alert("Welcome " + usernameS.value + ". You are now registered.");
window.location.replace('LogIn.html'); }
function LogInput(x,y) {
if (x==y)
{unsernameS = document.forms[0].usernameL.value;
alert("Welcome " + usernameL.value + "! You just logged in.");}
else if (x!=y)
alert("Username not recognized");}
At least Fix typo in your code {unsernameS = document.forms[0].usernameL.value;
Related
This question already has answers here:
How can I do string interpolation in JavaScript?
(21 answers)
Closed 20 days ago.
I'm new to Javascript and need some help. Basically, I want the user to be able to enter their name into the input type box and when they press submit it should alert hello, then whatever the user's name is. The code already outputs the user's name as an alert but I don't know how to add the "hello" before the value. Please help, thanks.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="t"></input>
<input type="submit" id="b"></input>
</body>
<script>
var t = document.getElementById("t");
document.getElementById("b").addEventListener("click", function() {
alert(t.value);
});
</script>
</html>
You could use alert('hello ' + t.value);
JS uses the + operator for string concatenation. So you can build the complete string with "hello " + t.value and pass that to alert.
alert("hello " + t.value);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Page Title</title>
</head>
<body>
<input type="text" id="t"></input>
<input type="submit" id="b"></input>
<script>
var t = document.getElementById("t");
document.getElementById("b").addEventListener("click", function() {
alert("Hey " + t.value);
});
</script>
</body>
</html>
note , i added meta charset to the code, i don't know if its one of the problem but its safe to always add it, and your closing body i put at the end of the script because the body tags covers every code in your html.. i then concatenated using the "" +....notice i put a space after the hey in apostrophes to print out your name as: Hey Name instead of it being clustered like HeyName
I don't understand why innerHtml shows the good result in the console, but does not display anything in the html page :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="button" value="test" onclick="testClick();"></input>
<p id="score2"></p>
<script>
var score = 0;
function testClick() {
score++;
document.getElementById("score2").innerHtml = score; //does not display anything
console.log("inner : " + document.getElementById("score2").innerHtml); //works
}
</script>
</body>
</html>
var score = 0;
function testClick(){
score++;
document.getElementById("score2").innerHTML = score;
}
<input type="button" value="test" onclick="testClick();"></input>
<p id="score2"></p>
Here is the updated snippet for your code. your are doing a syntax mistake "innerHTML" is correct while "innerHtml" in incorrect
Hi i have return url for JSON search. Now i would like to have a textfield. In which people can enter there search terms. And when pressed submit. I would like to go and run the search.
So far i have this code. the reading of the JSON works fine. Because when i fill in a complete url it show me the desired results. But i'am doing something incorrectly in building the URL form the basis url + search terms.
I would be great if someone could explain me what i am doing wrong.
document.getElementById('submit').onclick = function() {
var urlFD = "http://domain.com/support/search/solutions.json?term=" + document.getElementById('txt_name').value);
$.getJSON('urlFD', function(data) {
var output="<ul>";
for (var i in data) {
output+="<li>" + data[i].title + "--" + data[i].desc+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="txt_name" />
<input type="button" name="submit" id="submit" value="Submit">
<div id="placeholder"> </div>
</body>
</html>
Dont quote your variable!
$.getJSON(urlFD, function(data) {
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
first.html
<!DOCTYPE html>
<html>
</head>
<body>
<form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
</form>
</body>
</html>
other.js
function validateUsernamePassword()
{
var idNum = $("#userId").val();
alert('Well the id is :' + idNum);
// more code
}
The alert doesn't print the passed ID ... why ?
Modify your html like this:
<html>
<head>
<title></title>
</head>
<body>
<form>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
<input type="hidden" id="userId"></input>
</form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
</body>
</html>
Or you could do just this:
function validateUsernamePassword()
{
var idNum = localStorage.getItem("idNumber");
alert('Well the id is :' + idNum);
// more code
}
The second one is good since you already have the item in localstorage, so ther is no need of assign its value to another element
this trick may help you:
<html>
<head>
</head>
<body>
<dl>
<script>
window.var1 = "hello, world";
</script>
<input type="button" value="click" onclick="clicked()">
<script>
function clicked(){
alert(window.var1);
};
</script>
</body>