How to send user'name from a HTML file to another HTML file and show it on the site?
this is inside the HomePage
<div class="enterUserName" data-validate = "Enter username">
<input class="input1" type="text" name="username" placeholder="Player Name">
<span class="hi" data-placeholder=""></span>
</div>
<div class="container-login102">
<button type="button"class="login" onclick="location.href='Index.html'">
Start Playing
</button>
</div>
Here is how you could implement it with localStorage:
<div class="enterUserName" data-validate="Enter username">
<input id="input1" type="text" name="username" placeholder="Player Name">
<button onclick="saveUserName()">Save</button>
<button onclick="getUserName()">display</button>
<span class="hi" data-placeholder=""></span>
</div>
<div class="container-login102">
<button type="button" class="login" onclick="location.href='Index.html'">
Start Playing
</button>
</div>
<p id="display"></p>
<script>
function saveUserName() {
localStorage.setItem('userName', document.getElementById('input1').value)
}
function getUserName() {
if (localStorage.userName) { // userName exists
document.getElementById('display').innerHTML = localStorage.userName;
}
}
</script>
However, when using localStorage, the value is accessible only on the same origin, see here, otherwise you'll need a server-side proxy.
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
Can anyone explain why the "onclick" part won't fire?
function displayHello() {
let helloName = document.getElementByID('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementByID("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
PS:
I'm just learning JS, so, I'm not too familiar with a lot of stuff yet. (We just finished the HTML stuff last semester)
not getElementByID. use getElementById.
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
It does work, you just had a typo with getElementByID, it should be getElementById
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
In case others run into this same issue, I've uploaded a screenshot of the "git change log", that has all the corrections to the above, so that it worked as intended. ^_^
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
How to get a formId that is generated by using a jsp using jquery?
<c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
<form id="updateform${subUser.employerId}" action="${updateSubUserDetails}" method="post" >
<div class="modal-body">
<input type="hidden" name="subUserId" value="${subUser.employerId}"/>
<div class="form-group">
<input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control " value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
</div>
<div class="form-group">
<input type="text" id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control " value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})" placeholder="Edit Email"/>
</div>
<span id="avialabilityMessage${subUser.employerId}"></span>
<div class="form-group">
<input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control " value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
</div>
<sec:csrfInput/>
<div class="modal-footer">
<input type="button" id="muEditButtonID" onclick="updateSubUserDetails(${subUser.employerId})" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" value="Update">
</div>
</div>
</form>
How to get above dynamically generated form id in javascript jquery? Please assist me.
//if you sure there is only one form
document.forms[0]
//else
document.querySelector('[id^="updateform"]')
so, if you want to get id just add .id
//if you sure there is only one form
document.forms[0].id
//else
document.querySelector('[id^="updateform"]').id
I know there are already some threads about accessing an element within another element...I tried a lot of stuff but I can't get it to work...
JSFiddle -> http://jsfiddle.net/YcPc8/2/
What I want to do on the page is to fill out the username and the password - then click the login button.
Here is a part of the html code of the webpage:
<section id="notifications"></section>
<div style="display: block;" id="login" class="">
<div id="login-content">
<form>
<h1>Nessus Vulnerability Scanner</h1>
<input name="login" tabindex="1" placeholder="Username" maxlength="128" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" class="required login-username" type="text">
<i class="glyphicons username"></i>
<input name="password" tabindex="2" placeholder="Password" maxlength="128" autocomplete="off" class="required login-password" type="password">
<i class="glyphicons password"></i>
<div id="remember-me" class="floatleft">
<div class="checkbox login-remember"></div>
<span class="floatleft">Remember Me</span>
</div>
<button type="submit" id="sign-in" tabindex="3" class="button secondary login floatright">Sign In</button>
</form>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<h2>Tenable Network Security</h2>
<div class="clear"></div>
Now I want to fill in the login and the password field...
Here is some of the code I tried within a javascript:
var nessus = window.open("https://localhost:8834/html5.html#/scans");
var doc = nessus.document.getElementById("login-content").getElementsByName("login");
doc.setAttribute("value","USERNAME");
element.getElementsByName("login") returns a list of elements. You might want to write this if you're sure it will return 1 element:
var doc = nessus.document.getElementsByName("login")[0];
EDIT : Moreover, getElementsByName is a method of the Document Interface. You can't use it on node element.
You'd better give an ID to your username input field, and access it directly by
var doc = document.getElementById("usernameInput");
doc.value = "USERNAME";
JSFiddle : http://jsfiddle.net/YcPc8/4/