How to use the data from local storage in javascript onClick. I have my html file and javascript file below. Thanks
<fieldset>
<form>
<!--GET USER NAME-->
<p>
<label for="inName" >What is your name?</label>
<input type="text" id="inName" name="f_name"/>
</p>
<!-- GET COLOUR--> // I m not sure about how the get color as user can
//choose the color from drop down color palet.
<p>
<label for="inColor" >What is your favourite colour? </label>
<input type="color" id="inColor" name="f_color" />
</p>
<p> // how to get the value when user clicks the button
// in order to call onClick function to output the
user's name and
// display favorite color in background.
<input type="submit" value="Click to save" />
<p/>
</fieldset>
</form>
I don't know how to get data from local storage when user click to submit the form :
//NOW THAT WE HAVE STORED DATA ON ONE PAGE, WE CAN ACCESS IT FROM ANY PAGE ON THIS
WEBSITE.
window.onload = function(){
//GET ELEMENTS USED FOR OUTPUT
var userOut = document.getElementById("newMsgBox");
//GET VALUES FROM COOKIES/LOCAL STORAGE
var userName = localStorage.getItem("nameIn");
var userColor = localStorage.getItem("inColor");
//CREATE OUTPUT WITH VALUES
if (userName !== null) {
userOut.innerHTML = " " +userName;
}
}//end onload
If you want to listener event from an specific button and then access to your localStorage you could do this:
first get the element:
const button = document.getElementById('<clickable_element_id>');
then add a listener to the button;
button.addEventListener("click",(event)=> {
event.preventDefault() // only if you want to prevent the action
//here you can access to your local store items like:
const a = localStorage.getItem("<item you saved previously>");
...
});
It's really unclear what you want to do but
let inColor = document.getElementById('inColor');
let inName = document.getElementById('inColor');
Will fetch the values for you.
I think you are looking for something like this.
<script>
function saveData() {
let inColor = document.getElementById('inColor');
let inName = document.getElementById('inName');
localStorage.setItem("inColor", inColor);
localStorage.setItem("inName", inName);
}
</script>
<input type="Button" value="Click to save" onclick="saveData"/>
Import Jquery and use this. I hope help you. when you click on button with id idOfBtn jquery gonna eject the event and call the localStorage with key (key). Replace it for you key name.
$("#idOfBtn").click(function() {
alert(localStorage.getItem('_key_'));
});
Related
I'm trying to create a function such that, when the form is submitted the details filled by the user (ie his/her name and email id) is appended to a list/array. And then the list/array is displayed.
For example...
When I fill in the credentials for the first time:
Name - A
Email - something#abc.com
The output on submitting the form should be:
[["A", "something#abc.com"]]
When I fill in the credentials for the second time:
Name - B
Email - someone#xyz.com
The output on submitting the form should be:
[["A", "something#abc.com"], ["B", "someone#xyz.com"]]
But when I tried this, I am not getting the output of the list/array.
Here's what I tried...
const info = [];
function display(){
var nm = document.getElementById("nm").value;
var em = document.getElementById("em").value;
var data = [nm, em];
info.push(data);
var text = document.createElement("h2");
text.innerHTML = info;
}
<body>
<script src="script.js"></script>
<form onsubmit="return(display())">
<input type="text" placeholder="Name" id="nm">
<input type="email" placeholder="Email" id="em">
<input type="submit" value="Submit">
</form>
</body>
The reason it's not displaying the data is for two reasons.
Everytime you submit the form, it refreshes the page. To prevent this you have to prevent the default action of the button submission. Which can be done using the function preventDefault() via an event. Better explained in the code.
You have not appended the created element to anything element, so it is not displaying anywhere on the webpage.
Both can be resolved by checking the code and it's explanation below!
const info = [];
function display(e){ // the `e` parameter is the event passed in.
e.preventDefault(); // We run the function preventDefault to prevent the page from reloading.
var nm = document.getElementById("nm").value;
var em = document.getElementById("em").value;
var data = [nm, em];
info.push(data);
var text = document.createElement("h2");
text.innerHTML = info;
document.body.appendChild(text); // You haven't appended the information to
// anything, here I append the created Element to the Body so it displays, but do note, that this displays
// the full list, you may want to change this to display only the newer data
// or perhaps append to a element that prints out each time a new user is added.
//console.log(info); You can see that the array now updateds in the console.
}
<script src="script.js"></script>
<!-- Pass the event of submitting a form as an argument -->
<form onsubmit="display(event)">
<input type="text" placeholder="Name" id="nm">
<input type="email" placeholder="Email" id="em">
<input type="submit" value="Submit">
</form>
In my website, I have a textbox which I'm using to ask the user for their name. Below I have 2 images, a cancel "button" which is just an image which has an tag to take it back to the index, and a Go image which is linked to another HTML page where the input taken from the text box will be used to fill in a paragraph. This page is linked below:
I am fine with how the cancel image is functioning but is it possible for me to use the Go image to take me to my other HTML page as well as to store the data input into the "your name" text box?
<div class="name_input_box">
<input type="text" placeholder="Your name" id="name" required />
<label for="name" class="label_name">
</label>
</div>
my code for the input box^
<a href="Add_page.html">
<img src="assets/Go_button.png" img style="height:35%; width:35%;">
</a>
My code for the "go" image^
I appreciate this might seem simple but I can't find any video tutorials on how to tackle this, many thanks to anyone who takes the time to help me on Easter Sunday :)
Either use localStorage or just have a form
<form action="Add_page.html">
<div class="name_input_box">
<label for="name" class="label_name"><input type="text" placeholder="Your name" name="name" required /></label>
<input type="image" src="assets/Go_button.png" img style="height:35%; width:35%;">
</div>
</form>
and use the location.search to get the name.
If I understand your questions well, I think this is what you are looking for.
Local storage stores your data for your and you can get your data any time you need it.
try this out linking this script to your html code and making reference to the right id's.
// get data from the input tag/local storage value
var input_data = document.getElementById('input_data').value
//local storage key
var key_name = 'UserName';
// paragraph to fill input ..you can p tag for this
var result_screen = document.getElementById('result_screen')
// image link / button
var goBtn = document.getElementById('goBtn');
goBtn.onclick = function () {
// To check for empty input value
if (key_name && value) {
localStorage.setItem(key_name, input_data);
location.reload();
}
}
// loop through the input value entered by users
for (var i = 0; i < localStorage.length; i++) {
var key_name = localStorage.key_name(i);
var input_data = localStorage.getItem(key_name);
result_screen.innerHTML += `${key_name}: ${value}<br>`;
}
I need to reset the input field when user clicks on the rest button, I have other content on the page which is getting cleared except input field, I'm not sure if this is happening because I'm using old values after post request.
<input type="text" name="app_number" class="form-control" onreset="this.value=''" value="{!! Request::input('app_number') !!}" id="app_number" placeholder="Application Number" required>
JS for reset button:
document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = "";
};
Reset Button:
<button class="btn btn-primary" id="reset-button" type="reset">Reset</button>
Use type="reset" for your button:
<button type="reset">Cancel</button>
try using reset():
document.getElementById("app_number").reset();
In this case you must use JQuery Lib. Basic you need to set ID for this element. And in jquery you listen click on this Element.
$('#app_number').on('change', function () {
// enter code here
});
Please try to use in js like:
$(document).on('click', '#YourOnclickButtonID', function(){
var $alertas = $('#YourFormID');
$alertas.validate().resetForm();
});
So answering my own question, any feedback would be appreciated but this is working.
It turns out that no matter what value="{!! Request::input('app_number') !!}" will always have value as this code gets executed on the server side and unless you make another post request you can not change the value and by using only vanilla JS and without post request this cannot be done.
So, instead of getting values from Request why not just takes the values from user input and save it to local storage and then just grab it and inject into the input field.
I added onkeyup event ion to the input field
<input type="text" name="app_number" class="form-control" onkeyup='saveValue(this);' id="app_number" placeholder="Application Number" required>
and JS to store and retrieve input
document.getElementById("app_number").value = getSavedValue("app_number"); // set the value to this input
function saveValue(e) {
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v) {
if (!localStorage.getItem(v)) {
return ""; // You can change this to your defualt value.
}
return localStorage.getItem(v);
}
and then reset the form as usual
document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = '';
};
Your reset button :
<button class="btn btn-primary" id="reset-button" onclick="myFunction()">Reset</button>
In js:
function myFunction(){
document.getElementById("app_number").value = "";
}
I have a textfield:
Voornaam: <h3 class="title1">Kevin</h3>
<input type="text" id="myTextField1" />
<input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>
I can set a value of this using this function:
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
}
Now in my other page, I want to use the value. I know I can for example pass a value from one page to another like this:
<a href='convert.php?var=data'>converteren.</a>
And then for example show it by doing this in the other page:
echo $_GET['var'];
But I cant really seem to figure out how to use the value which I've set using my textfield.
So my goal for now is to display the value I've set using my textfield in the other page using the method I just described.
Basically all I want to happen is for my textfield to change the value inside here aswell:
<a href='convert.php?var=data'>converteren.</a>
So where data is the value, I want it to become what I've put in the textfield.
Could anybody provide me with an example?
I've altered a bit your javascript code to make the link as you want.
To explain the answer, i've added document.getElementById("myLink").href="convert.php?var=" + myNewTitle ; which updates your a href while your function runs and is not empty.
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
document.getElementById("myLink").href="convert.php?var=" + myNewTitle ;
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
}
<a id="myLink" href='#'>converteren.</a>
Wrap your inputs inside a form element.
In the action attribute, specify the destination url.
In the method attribute, choose between GET and POST.
For example:
<form method="GET" action="convert.php">
<input type="text" id="myTextField1" />
<input type="submit" id="byBtn" value="Change" onclick="change1()"/>
</form>
Clicking the submit button will call "convert.php?myTextField1={value}".
i have an input which displays data in local storage underneath. At the moment it currently keeps adding whatever has been inputted and displays with an '' in between. This is fine however all I need is for it to Store and display ONE input and display it. If the user
wants to change the input, there will be a button which clears local storage.
Can anybody help with the function for this.
<script>
function storeText(inputID) {
//check to see if the localStorage item already exists
var userInput = localStorage.userInfo;
//set it up for new data to be appended
if(userInput!=null) userInput+=" ";
else userInput="";
//add the new data
userInput += document.getElementById(inputID).value;
//set the localStorage field with the updated data
localStorage.userInfo = userInput;
//write it to the page
document.getElementById("result").innerHTML = localStorage.userInfo;
if (userInput > 1){
alert("Please Clear to add a new goal");
return false;
}
</script>
This is my Input and display
<input id="userText" type="text"/>
<input type="button" value="store" onclick="storeText('userText')"/>
<div id="result">
Result here
</div>
localStorage.clear(); - this will clear local storage entirely
localStorage.removeItem('userInput'); - this removes a specific item - you can then just re-add it.
Just apply this to your buttons onClick event