i was wondering how i could do the following:
I get the input from the user using form(okay fine)
i take that input and store it as a variable in javascript(got it).
The variable i just saved changes the text of another page in the website (it permanently changes the text of that webpage and isn't depended on the js variable of that file anymore(it can also import the text into the web page if need be if possible))
for eg:- enter image description here
Here the user enters the details let's say the name for now
and then in the second img the text of the website changes, and when i download the second img website which doesn't hold the original js which stored the variable, it still shows the text as it might have stored the text in the file locally using js or something.
[2]: https://i.stack.imgur.com/4nZCD.png
Please help me out.
In my experience, the best way to store information from page-to-page is through local storage.
Local storage persists from page to page, while JavaScript variables are cleared out, and cookies can be un-reliable based on the response from the server they are sent too.
In your function that takes the user input, write something along the lines of:
localStorage.setItem('myCat', 'Tom');
And to retrieve this information, you can reference it like:
const cat = localStorage.getItem('myCat');
Here is a reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Related
I am making an autofill extension. On the options page, the user enters info such as name & email. Then it is saved to the localStorage. Now, what I would like to do is have the value of one of the keys in the localStorage to be the text inputted in a textbox on a specific page. I assume you do this by using a background page. How would I go about doing this? Is there a better way of doing this?
You shouldn't need a background page. The easiest way is to use chrome.storage instead of localStorage to save the options. You can then access the information from a content script, which is the only way to access and modify the DOM of a web page.
On the page you want to show it
function LoadText(){
var name = window.localStorage.getItem("name");//name
var email = window.localStorage.getItem("email");//name
$('#myname').val(name);
$('#myemail').val(email);
}
Call the function and it will load
I'm working on an online art auction. The bid updates are all manual. When a person clicks "Bid Now!" via a button below the piece, a simple form pops up in a new window. The form is on a page with a little bit of information, including the title of the piece they bid on (the title then becomes the subject of the email I receive from the form). My question is, can I parse the title of the piece onto the pop-up form page FROM the previous page using javascript or jQuery? The script would have to Get the piece of text from the previous page somehow. I'm envisioning something like this:
<img src="image.html"/>
The pop-up form page (shown in fiddle) could Get "TitleOfWork" and place it in the first line of text. (But that value would change, so I'd need to call it a variable).
My other alternative (how the the previous programmer set things up) is to make a form page for every piece of work, because the titles are all different. I REALLY don't want to do that because it's just impractical. There are hundreds of works in this auction.
I feel like this is a much simpler solution than I'm making it out to be... I'm just self-taught and don't know many of the basics. Hope this makes sense!
*EDIT:
This is the javascript I'm trying to work with (i'll include it directly on the bid-form page, but I need the "value" to be a variable (aka, the "value" I defined in the link that opened the form, which would be the title of the work):
<script>
// Check browser support
if (typeof(Storage) != "undefined")
{
// Store
localStorage.setItem("lastname", "[variable]");
// Retrieve
document.getElementById("title").innerHTML=localStorage.getItem("lastname");
}
else
{
document.getElementById("title").innerHTML="Sorry, your browser does not support Web Storage...";
}
</script>
Here's an updated link to the fiddle.
http://jsfiddle.net/UVkVt/2/
My suggestion is you need to use localstorage instead.
Add html id and value into your code
Bid Now!
In your javascript file, you need to grab value from id, save and retrieve it using localstorage.
save
localStorage.header = $("$TitleOfWork").val();
retrieve
$("#header").setText(localStorage.header);
your popup html code
<h1 id="header"></h1>
P.S: you need to use jquery
I'd like to help the visitors to my site to fill out a form on the other site (beyond control) using the data, generated on my site.
It would be possible to use a bookmarklet to post the data to the form while the user is on my site, but the form is some clicks behind the authentication. Considering that a bookmarklet may read only what's been stored (cookie, session, storage) while on the current site, it is not possible to use the bookmarklet on the other site to fill out the form with data, stored while on my site.
Please, suggest any javascript, client-side solutions of this. Like a bookmarklet or something similar.
Thank you.
With a bookmarklet I'd say you're on the right track, but use a dynamic one. e.g:
function makeBookmarklet(){
var elt=document.createElement('a');
var hrefString='';
for(var k=0;k<arguments.length;k++){
hrefString+=' document.getElementById("'+arguments[k].id+'").value="'+arguments[k].value+'";';
}
elt.href=hrefString;
return elt;
}
And then you would call that function, and each argument should be an object with an id and value attribute. The id should be the id of the field to automatically fill out. value should be the value to insert into that field. It returns an element, so put it somewhere in the document and tell the user to drag it into the bookmarks bar, and click it on the other site. Just to make it clearer, you would call it like this:
aElt=makeBookmarklet({id:'username',value:document.getElementById('username').value},{id:'othercrap',value:'fixedvalue'});
I have editor that I can get it's code with js in my page and user can write his html code in it. I want show current user's html code in new window without saving the code in database or something else. How can I do that?
hi why dont you store your values in html5 storage objects such as sessionStorage/localStorage, visit Html5 Storage Doc to get more details. using this you can store intermediate values temporaryly/permanently locally and then access your values
for storing values for a session
sessionStorage.getItem('label')
sessionStorage.setItem('value', 'label')
or store values permanently using
localStorage.getItem('label')
localStorage.setItem('value', 'label')
So you can store (temporarily) form data between multiple pages using html5 storage objects
YOu can use the sessionstorage object to store the user's code temporarily for a session and get it on next page using above syntax
Follow steps below :
On the preview page, place an IFRAME.
From the first page, where user inputs HTML, set a session variable.
On click of some button on first page, set the session and redirect to preview page.
The preview page is supposed to fetch the session value and display it inside the IFRAME
This might help you:
JSBin Demo
So I'm trying to implement similar functionality to Facebook where I am including information from YouTube should a users post contain a link, and when clicked it embeds the video.
I've accomplished it thus far, I'm just wondering how Facebook stores this information.
To me there are two options:
1) Have the post saved as normal (it is just plain text), and if the post contains a youtube link, append it on the fly in JavaScript whenever that content is viewed. However I know that when you post a link, Facebook gives you the option to change the title, description etc. Which leads me to..
2) Generate the HTML that would be otherwise appended when viewed and store it alongside the post at the database-insert level.
If so, doesnt that add a significant amount of information per post? What happens if you want to change the formatting of all youtube content within posts on your site later on? Each will be stored individually and seems like it would be a pain.
What is the best way to manage & engineer this sort of functionality?
Cheers,
I'd store the information itself in the database, but not as HTML. Generate the HTML on the fly but store the data in a separate place. If you don't want to add too many extra database fields consider storing the information in some serialized form (like serialize() in PHP).
Anyway I would always keep information separated and never store auto-generated HTML unless it's some sort of cache that can be re-generated.
If you want the user to include his video within his text, store the link in HTML within that user's intervention, and output it as is from the database on the page. Then your users can edit their posts to decide whether to place the video before, after, in the middle or not at all, and can change the details in HTML.
If you are showing the video in some standard way, then store the video link along with the post in a separate database column, and generate the HTML on the fly. You can have data in columns for size, colour etc..., but the flexibility will always be limited to what you decide to store: if there is a database coloumn for colour then you are letting the user choose the colour, otherwise... not.
So, the most flexible is to let your users type HTML. If you think they aren't up to it, or you want to limit their choices of what they can format, you could use a java(script) rich text editor of the type that you have in stackoverflow, wikipedia etc., with possibilities to edit text in certain chosen ways via buttons. You could also store the post in XML, say in a chosen subset of HTML5 (anything that is valid in a certain container...), and transform it at presentation time.
to me this sounds like a problem that was taken too far.
if you implement ckeditor in your post form,
it should resolve the problem ( if i understood it right ),
since in ckeditor you can embed an swf/flv,
and the output will be html.
that gives the editor the power to decide exactly where he want the video ( since he can add the link wherever he wants in the form ).
since the flv/swf come with its meta data from youtube, you dont need to save that data,
just the link to the video.