I am practicing making an e-commerce site. I am struggling passing my javascript variable between the shopping cart page to the checkout page. I tried following this example:
page one:
<a href="example2.html?myVar1=42&myVar2=66" >LINK</a>
page 2:
var qs = new Querystring();
var v1 = qs.get("myVar1");
var v2 = qs.get("myVar2");
I could not get it to work because my webpage threw an error about not recognizing QueryString, so I am currently trying like this by using window.localStorage as follows:
Page 01:
<button class="checkout" type="button" onClick="window.location.href='checkout.html'; window.localStorage.setItem("total",total)">Checkout</button>
Page 2:
var name = window.localStorage.getItem("total");
Currently, I am throwing a console.log(total) on the 2nd page but it returns "null" each time. Any idea why it's not catching the value from the first page? Please help.
If you have suggestions or a solution for either method, it would be much appreciated. I feel like I'm really close with the 2nd method, I may just be missing something on the page 1 portion, thanks in advance.
To fix your first method (passing variables between pages via a query string), you'd probably want something like:
// page one:
<a href="example2.html?myVar1=42&myVar2=66" >LINK</a>
// page 2:
var query = window.location.search;
if( typeof query !== 'undefined' ) {
var params = {},
parts
;
// take off the ? and split into groups of key=value strings
query = query.replace('?','').split('&');
// split key=value strings into a usable object
for(var i=0;i<query.length;i++){
parts = query[i].split('=');
params[ parts[0] ] = parts[1];
}
// now access your variables like so:
params.myVar1 // is now "42" (a string)
params.myVar2 // "66"
}
Related
I'm building a page for digital campaigns and I'd like to personalize the content of that page based on who referred users there.
For example, A sends B a link to this page, I generate the link to be sent by A automatically on his dashboard. When B clicks the link, I want the page title to say "Hey, A referred you here"
I know the solution to this might be simple but I'm not very awesome with web dev yet. How do I
Pass this information through the link?
Collect the information on the page and put it in as part of the content?
Looking forward to suggestions for most effective implementation
Theory
You can pass information to a page through the URL using URL parameters. This method of posting data is called GET
For example, take this URL:
example.com?key1=val1&key2=val2
You can send any number of parameters using the syntax key=value (note, value is not enclosed in quotes), and separate each one with an &. You must put a question mark between the URL and the parameters.
JavaScript
You can then retrieve the URL parameters using the following JavaScript code. Insert the following at the beginning of your page.
//To get Query Strings with JS
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
To get the value of a URL parameter, do the following:
var x = urlParams.key1; // x will be "val1"
PHP
To retrieve the URL parameters using PHP, it is much simpler. You don't need to add any code to the beginning of the page as with JavaScript, as it is an inbuilt feature of PHP. Just do the following:
$x = $_GET["key1"]; // $x will be "val1"
Practice
In your case, you could make the URL show for user Albert, his unique URL for sharing could be
example.com?sender=Albert
And on your website you could put
<script>
if (urlParams.hasOwnProperty("sender")) {
document.write("Hey, " + urlParams.sender + " reffered you here!");
}
</script>
I want to get the my exact location (only PHP page) using javascript, I'm currently using window.location to get the exact url for example: localhost/empc/myfolder/functions.php what is the code if I want to get only functions.php as a result? Is it possible? Thank you.
You can use location object to do this, To remove the "/" before the file name you can use substring method.
location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
you can try this pretty simple
var url = 'localhost/empc/myfolder/functions.php';
var url = url.split('/');
alert(url.pop());
It is possible. Use the javascript split function to separate the string into pieces and then access the last element to get the file name:
var str = "localhost/empc/myfolder/functions.php";
var arr = str.split("/");
alert(arr[arr.length-1]); //this will alert functions.php
From a page with the following URL, http://example.com/foo.html?query=1&other=2, I want to create a link to http://example.com/bar.html?query=1&other=2. How do I do that without explicitly saving and reloading all the query strings.
I need this to easily link from an iframe version of a page (embed.html?query) to the full page (index.html?query).
I would have recommended using the Location object's search method (available at document.location or window.location) to pull out the parameters, then modify the rest of the URL, but that API is apparently specific to Firefox.
I would simplify #DMortensen's answer by just splitting on the first ?, then modifying the first part (which will be the URL's path portion only), and reapplying the second part.
If you need to parse the parameters, I recommend the jQuery plugin Query Parameter Parser: one call to $.parseQuery(s) will pull out an object of all the keys & values.
It can be finicky, but you could split the URI on '?' and then loop through the 2nd element of that array to grab the key/val pairs if you need to evaluate each pair (using '&' as a delimiter). The obvious weakness in this would be if there are additional '?' or '&' used in the URI.
Something like this maybe? (pseudocode-ish)
var URI = document.URL;
var qs = URI.split('?');
var keyvalpair = qs[1].split('&');
var reconstructedURI = '&' + keyvalpair;
for(var i = 0; i< keyvalpair.length; i++){
var key = keyvalpair[i].split('=')[0];
var val = keyvalpair[i].split('=')[1];
}
Thank you for all the answers. I tried the following and it works.
function gotoFullSite() {
var search = window.location.search;
window.open("http://example.com/"+search)
}
$('#clickable').click(gotoFullSite);
and then use <a id = "clickable" href="#"></a>. When I click the link, it opens the proper website with all the query parameters in a new tab. (I need a new tab to break out of an iframe.)
Say I have variables that I acquire in one html page, such as a UserName or a url or something. And in another html page I have input boxes for these variables and I want to autocomplete them by sending the data from the first html page to the input boxes in the second one. Can anyone indicate to me how I can achieve this?
Use JavaScript to create the equivalent collection for use by other JS code:
Code:
<script type="text/javascript">
var querystring = [ ];
var qs = location.search;
if ( qs.length > 1 )
{
qs = qs.substring(1); // skip past the ?
var pairs = qs.split( /\&/g ); // get all the name=value pairst
for ( var p = 0; p < pairs.length )
{
var pair = pairs[p];
querystring[ pair[0] ] = unescape( pair[1].replace(/\+/g," ");
}
}
</script>
Then, anyplace in your page where in ASP code you might use
Code:
var foo = Request.QueryString("foo");
you instead simply do
Code:
var foo = querystring["foo"];
CAUTION: "foo" will be case sensitive, unlike in ASP. If you wish, you could replace
Code:
querystring[ pair[0] ] = unescape( pair[1].replace(/\+/g," ");
with
querystring[ pair[0].toLowerCase() ] = unescape( pair[1].replace(/\+/g," ");
and then always use lower case names ("foo" in place of "Foo" or "FOO") when finding values.
Untested, though I have used this same code before. If there's a goof, it's just a typo.
You can use JQuery for that. Assuming you are not using any server side code.
Pass the value as a param to the next page.
Like myurl?param=xyz
Then you can get the value in the next page like this,
See this answer and sourcecode
var xyz = jQuery.url.param("param_in_url");
For this you can use php session .store that variable in session and get them in any page.or if you are calling that page from the page where u have values say username call like
next page
You should use $_SESSION variable in php. OR you can use sessionStorage of javascript.
I'm really new to Javascript and I'm having some trouble understanding how to get the following to work. My goal is to have a certain Javascript action execute when a page loads and a variable added to the end of the URL would trigger which Javascript action to execute. The URL of the page that I'm looking to implement this on is http://www.morgantoolandsupply.com/catalog.php. Each of the "+expand" buttons, which are Javascript driven, drop-down a certain area of the page. Ultimately, I would like to be able to create a URL that would automatically drop-down a certain category when the page loads. Could anybody explain to me the process to do this? Thanks in advance for any help!
You have to parse the URL somewhat "manually" since the parameters in the url aren't automatically passed to javascript, like they are in server-side scripting (via $_GET in PHP, for instance)
One way is to the use the URL fragment identifier, i.e. the "#something" bit that can go at the end. This is probably the neatest way of doing it, since the fragment isn't sent to the server, so it won't be confused with any other parameters
// window.location.hash is the fragment i.e. "#foo" in "example.com/page?blah=blah#foo"
if( window.location.hash ) {
// do something with the value of window.location.hash. First, to get rid of the "#"
// at the beginning, do this;
var value = window.location.hash.replace(/^#/,'');
// then, if for example value is "1", you can call
toggle2('toggle' + value , 'displayText' + value);
}
The URL "http://www.morgantoolandsupply.com/catalog.php#1" would thus automatically expand the "toggle1" element.
Alternatively, you can use a normal GET parameter (i.e. "?foo=bar")
var parameter = window.location.search.match(/\bexpand=([^&]+)/i);
if( parameter && parameter[1]) {
// do something with parameter[1], which is the value of the "expand" parameter
// I.e. if parameter[1] is "1", you could call
toggle2('toggle' + parameter[1] , 'displayText' + parameter[1]);
}
window.location.search contains the parameters, i.e. everything from the question mark to the end or to the URL fragment. If given the URL "example.com/page.php?expand=foo", the parameter[1] would equal "foo". So the URL "http://www.morgantoolandsupply.com/catalog.php?expand=1" would expand the "toggle1" element.
I'd perhaps go for something more descriptive than just a number in the URL, like, say use the title of the dropdown instead (so "#abrasives" or "expand=abrasives" instead of "#1" or "expand=1"), but that would require a little tweaking of your existing page, so leave that for later
You've already got the function to call: toggle2(), which takes two parameters that happen to be identical for all categories except for a number at the end. So create a URL that includes that number: http://www.morgantoolandsupply.com/catalog.php#cat=4
Then find that number in location.hash using a regular expression. This one is robust enough to handle multiple url parameters, should you decide to use them in the future: /[\#&]cat=(\d+)/. But, if you expect to never add anything else to the url, you could use a very simple one like /(\d+)/.
Once you've got the number, it's a simple matter of using that number to create your two parameters and calling toggle2().
This should work:
window.onload = function() {
if (/[\#&]cat=(\d+)/.test(location.hash)) {
var cat = parseInt(RegExp.$1);
if (cat > 0 && cat < 13) {
toggle2("toggle"+cat, "displayText"+cat);
}
}
}
Not a complete answer ("Give a man a fish" and all that), but you can start with something along these lines:
// entire URL
var fullURL = window.location.href;
// search string (from "?" onwards in, e.g., "www.test.com?something=123")
var queryString = window.location.search;
if (queryString.indexOf("someParameter") != -1) {
// do something
}
More info on window.location is available from the Mozilla Developer Network.
Having said that, given that you're talking about a PHP page why don't you use some server-side PHP to achieve the same result?