Develop Reference

How to get data from Local storage onClick in javascript

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_'));
});

Linking form and button to javascript command

I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here
<form>
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button type="submit" id="WFFsearch">Search</button>
</form>
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').text();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics. The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!

$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/

you wanna use the .val() instead of .text() as text gets the value between 2 tags <div>here is some text</div> and val gets the value <input value="some value"/>

EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit", OR (recommended), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.
Also, you're trying to .text on an input. Input's have value. In jQuery you can get or set that value by calling .val() instead.
The code:
$('#frmGetStats').on('submit', function (e) {
e.preventDefault();
var searchInput = $('#search').val(),
url = "http://espn.go.com/" + searchInput + "/statistics",
win = window.open(url);
alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmGetStats">
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button id="WFFsearch" type="submit">Search</button>
</form>

To get the value of an input field, use .val(). .text() is for the text in a DOM element.
Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
return false;
});
DEMO

Taking a HTML form <input> value and using it to modify a <p> tag with Javascript

I am fairly new to Javascript and am trying to create a simple madlib application where a user can input a word through an HTML page and have that word appear in a paragraph tag when the user clicks the "submit" button. I am having troubles displaying the word that the user inputs. I know that I am close but for the life of me cannot figure out what I am missing.
Here is the HTML I am using:
<form>
<label>Word</label><input id="word"></input>
<input type="submit" value="submit" id="submitButton"></input>
</form>
<p id="story"> A {userWord goes here} is now part of the story </p>
And the Javascript:
var word = document.getElementById('word').innerHTML,
originalStory = document.getElementById('story'),
button = document.getElementById("submitButton");
button.onclick = function(){
replaceStory(word);
};
var replaceStory = function(userWord) {
var story = ("A " + userWord + " is now part of the story");
return originalStory.innerHTML = story;
};
Here is a JSFiddle: https://jsfiddle.net/5c4j2opc/

I have made a new JSFiddle: https://jsfiddle.net/5c4j2opc/3/ which works.
I changed type="submit" to type="button" to stop the page refreshing when the button is clicked and moved the word variable to the replaceStory function so it doesn't just get called once at the beginning of the script! Hope this helps.

You have to change two things.
The first is you are using innerHTML in a input element, when you want to access input element you need to get the value not the innerHTML, inputs not have this property.
The second one is that you need to pass the event on the onclick event since if you don't do it you can't cancel the submit action and then the page will be submit it automatically and reload the content. Then after you pass the event you have to apply event.preventDefault which will stop the submit for that button. Other option to avoid this problem would be possible to replace the submit button with a <button> tag or <input type="button"> since not of them will trigger the submit action.
You can see a working example https://jsfiddle.net/5c4j2opc/9/
html -> same you have
javascript
var word = document.getElementById('word'),
originalStory = document.getElementById('story'),
button = document.getElementById("submitButton");
button.onclick = function(e){
replaceStory(word.value);
e.preventDefault();
};
var replaceStory = function(userWord) {
var story = ("A " + userWord + " is now part of the story");
return originalStory.innerHTML = story;
};

You initialize wordjust in the beginning of the script. Besides, that the input value is not innerHTML, during that time, the value is empty.
As long as the return value is not set explicitly to false, the form will reload the page and overwrite any result.
Change your code:
var originalStory = document.getElementById('story'),
button = document.getElementById("submitButton");
button.onclick = function(){
var word = document.getElementById('word').value;
replaceStory(word);
return false;
};
var replaceStory = function(userWord) {
var story = ("A " + userWord + " is now part of the story");
originalStory.innerHTML = story;
};
updated fiddle

You had a couple of minor problems. The input type of the submit button should be button rather than submit. Submit does a post request and refreshes the page with the data received.
Initially you had:
var word = document.getElementById('word').innerHTML this would get the initial innerHTML which would be nothing. You have to get the inner text within word every single time the button is clicked to get the most recent text inside the textbox.
Finally, for a input node you should get .value rather than .innerHTML to get the inner text
html:
<form>
<label>Word</label><input id="word"></input>
<input type="button" value="submit" id="submitButton"></input>
</form>
<p id="story"> A {userWord goes here} is now part of the story </p>
javascript:
var word = document.getElementById('word'),
originalStory = document.getElementById('story'),
button = document.getElementById("submitButton");
button.onclick = function(){
replaceStory(word.value);
};
var replaceStory = function(userWord) {
var story = ("A " + userWord + " is now part of the story");
return originalStory.innerHTML = story;
};

I advise you to just understand Javascript first, and after then, focus on learning Jquery because it's much more easier and handy.
By the way if you want to do what you said:
You shouldn't use form tag, because you don't want to send something to server-side and you can use div tag as well instead of form tag.
<div>
<label>Word</label>
<input id="word" type="text"></input>
<button id="submitButton">Submit</button>
</div>
<span>A </span><span id="text">{here}</span><span> is now part of the story</span>
Jquery
$('#submitButton').click(function(){
txt = $('#word').val()
$('#text').text(txt);
});
Don't forget to import Jquery Package.
https://jsfiddle.net/softiran/gt8rr5pe/

You could also allow the user to change your story directly. I know this may not use an input tag, but it was very useful to me.
<div id="story">Once upon a time there was a man named
<p id="added" contenteditable="true" title="Click to change">
Bill</p>. He liked to eat tacos.</div>
I used this in a code that changed the name of the main character of a story into a user-selected name and allowed them to download the story. Hope this helps! All the user has to do is click the name "Bill" and they will be able to change the name to anything they want.

javascript getting the value of a text box

I have this text box here...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.

Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
document.getElementById('btnSearch').onclick = function() {
var search = document.getElementById('search').value;
var searchEncoded = encodeURIComponent(search);
window.location.url = "http://www.website.com/search/" + searchEncoded;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.

This should work:
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.

Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');
submit.addEventListener('click', function(e) {
var searchValue = encodeURIComponent(search.value); // encode the search query
window.location.href = 'http://www.website.com/search/' + searchValue ;
});

You can add it to the onclick event like so
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.

You would be better off using the < script> tag for this task. Example:
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search" id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
var text= document.getElementById('search').value;
location.href='http://www.website.com/search/'+text;
}
</script>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.

How to submit form in new pop up on button onclick action

I want to have a form and need to submit it to a url in a new pop up window on button onclick action. I want something like this.
<form id = "test" name = "test" action = "preview.jsp">
Email : <input type = "text" name = "email"/>
<button id = "submitButton" onclick = "submitFormInPopUp()"/>
</form>
So how to write this function submitFormInPopUp() which posts to action url in a new pop up page.
Thanks
Jitendra

Use this:
function submitFormInPopUp()
{
window.open('','Prvwindow','location=no,status=no,toolbar=no,scrollbars=yes,width=730,height=500');
document.test.action = "preview.jsp"
document.test.target = "Prvwindow"
document.test.submit();
}
i hope its help to u

function submitFormInPopUp(){
var url = "preview.jsp?email=" + document.getElementsByTagName('input')[0].value;
window.open(url);
}

Maybe you could use the target attribute?
http://www.w3schools.com/TAGS/att_form_target.asp
Change the button type to submit and specify target, you don't need any javascript.
<form id="test" name="test" action="preview.jsp" target="_blank">
Email : <input type = "text" name = "email"/>
<input type="submit" value="Submit" id="submitButton" />
</form>
Be aware though it's deprecated and not allowed in Strict.