Pass javascript url parameter to html - javascript

I've got a bit of javascript (shown below in a simplified format) which is the "ad tag" from the ad server that brings up an ad unit on the html page.
<script type="text/javascript" src="http://adserverdomain.net;pcode=1234;city=nameofcity;suburb=nameofsuburb"></script>
The javascript has more variable but I've just shown one.
Below this I have a <div> in which I'd like to pull the variable "pcode" from the above javascript and display it's value using
$('div').html("");
So the <div> needs to be populated with the value "1234".
Any idea how I can do this? Thanks
EDIT: I've updated the url (added .net and some other variables after pcode to avoid confusion). Also, I don't have access to the initial script, so I can't add an id to it. The script is generated by the ad server and it always has the variable pcode (with a different value). just need to be able to display that in another div on the same html page.

Try
<script type="text/javascript" src="http://adserverdomain;pcode=1234;city=sajdhsk;suburb=asdsadas"></script>
<div id="pcode"></div>
<div id="city"></div>
<div id="suburb"></div>
then
var pcodesrc = $('script[src^="http://adserverdomain;"]').attr('src');
$('#pcode').html(pcodesrc.match(/pcode=(.+?)(?=(;|$))/)[1])
$('#city').html(pcodesrc.match(/city=(.+?)(?=(;|$))/)[1])
$('#suburb').html(pcodesrc.match(/suburb=(.+?)(?=(;|$))/)[1])
Demo: Fiddle
or
$('#pcode').html(pcodesrc.match(/pcode=([^;]+)/)[1])
$('#city').html(pcodesrc.match(/city=([^;]+)/)[1])
$('#suburb').html(pcodesrc.match(/suburb=([^;]+)/)[1])
Demo: Fiddle

Try this with url.Actually the below code get data from url querystring.Edit it and give your url.
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var me = getUrlVars()["pcode"];

Try this buddy
function getvalues()
{
var values = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { values[key] = value;});
return values;
}
whenever you want to use it
var value = getvalues()["pcode"];
Use this value to put in your html element

Related

HTML5 Local Storage item not being saved correclty

I'm trying to save a value from a url query string that needs to be inserted into forms an any page the user navigates to, but so far I can't get the code to work past the initial landing page that contains the original query string.
Using this method to grab the query string value for X, and save it in localStorage for key Xcode:
<script>
var field = 'x';
var url = window.location.href;
if(url.indexOf('?' + field + '=') != -1) {
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var user_code = getUrlVars()["x"];
if (localStorage) {
localStorage.setItem("xcode",user_code);
}
</script>
Then use this to insert it into the "value" attribute of any inputs withe class .xcode-field:
<script>
window.onload = function() {
var thecode = localStorage.getItem("xcode");
if (thecode != "undefined" && thecode != "null") {
$(".xcode-field").attr("value",thecode);
} else {
$(".xcode-field").attr("value","default");
}
}
</script>
If the item is not in LocalStorage, the default value should be inserted (or it should just do nothing, but not sure how to set that.)
My problem now is that this works on the page the user lands ( example.com/?x=1234 ) but when they navigate to any other pages, the value in the form is populated by "undefined". So neither is the query string value being properly stored nor does the else statement above work to insert "default". Any idea what I'm doing wrong here? Thank you!
Fiddle (but does not seem to work on there): http://jsfiddle.net/08suhbuk/
UPDATE: Finally figured it out! The LocalStorage was being reset on consecutive pages because the initial query string parsing and setItem would be repeated on every page and override the original value. I solved it by adding the following code to check for the presence of a query string around the first script:
var field = 'x';
var url = window.location.href;
if(url.indexOf('?' + field + '=') != -1) {
Final working code edited in.

How can I pass values from one html page to another html page using javascript

In first page im getting value in textbox i need to pass it to another page which is divided into 2 frames.
I need to display that value in first frame's html page.
Please provide me a simple example.
I tried with
window.document.getElementById("inputbox1").value
but im unable to get the value.
Please provide me a simple example.
I would go with localStorage, as #MicrosoftGoogle propose, but is not well supported yet, you can use pure javascript to achieve this. You will have something like this on your form page:
<form action="param-received.html" method="GET">
<input type="text" id="foo" name="foo">
<input type="submit" value="Send" name="submit" id="submit">
</form>
Once you click on Send button,you will be redirect to /param-received.html?foo=hola&submit=Send.
location.search attribute contains the chain of parameters.
? concatenates the URL and the string of parameters.
& separates multiple parameters.
= assigns a value to the variable.
Here is the complete code to process data sent on param-received.html:
<script language="JavaScript">
function processForm()
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
l = unescape(temp[1]);
alert(l); //Dialog with the text you put on the textbox
}
processForm();
</script>
Write the value in a cookie and read the cookie from the other page.
For writing and reading cookies check here
You could use the GET part of the request or cookies
if url parameters are an option you could use this
function getParameter(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n=parseInt(url.replace(param+"=",""));
alert(n+1);
}
getParameter("page");
ref
http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html
another might be cookies
was beaten to the cookie part :p
edit indeed not a good cookie reference
this one is better http://www.w3schools.com/js/js_cookies.asp
function getValue(varname)
{
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 1)
{
return "";
}
else{
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (i=0;i<vars.length;i++)
{
var parts = vars[i].split("=");
if (parts[0] == varname)
{
value = parts[1];
break;
}
}
value = unescape(value);
// Convert "+"s to " "s
value.replace(/\+/g," ");
return value;
}
}
var VariableGot = getValue(YourPassingVariableName);
Just copy the function into your html file and pass your variable name to the function which is send through GET Method.Now You will get the value of the variable from url.

How to select record from list displayed on first page and show it at another page

This is third time and i want to make it clear for my problem. So in the first page i display my whole record that i saved in database, and when i want to view the selected details at second page, i need to click the selected data and view, but nothing happen and i have no idea how to link the VIEW to second page that can show all the data, i had capture down the pictures so that hope you all can help me, big thanks.
This is First page
This is the second page that i want to show the detail in the text field
The coding is like this (first page::to show the whole records and link to second page)
function showRecords(){
results.innerHTML='';
db.transaction(function(tx)
{
tx.executeSql(selectAll,[],function(tx,result)
{
dataset = result.rows;
for(var i=0,item=null;i<dataset.length;i++)
{
item = dataset.item(i);
results.innerHTML+=
'<li>' + item['fname'] + ' view'+'delete'+'</li>';
}
});
});
}
function loadRecord(i){
var item=dataset.item(i);
fname.value = item['fname'];
id.value = item['id'];
window.location.href="userup2.html?loadRecord("+i+")";
return false;
}
Please give me some idea and example, im using web sql to store data, i already ask this question for few times and im newbie for the html and javascript, please help me and this is important.
Yes you can achieve it using query strings. As I am not aware of web-sql, I will show you how to add query string to url in first page and how to retrieve it in second page.
JS CODE:
function loadRecord(i){
var item=dataset.item(i);
fname.value = item['fname'];
id.value = item['id'];
window.location.href="userup2.html?id="+i;
return false;
}
In the above function we are adding i (id of one record) as query string.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
This code will help you to get the query string from url.
Example:
var id = getUrlVars()["id"];
The above line will help you to get id that you passed in first page and you may use it to retireve the details from database.
Hope this helps you :)

Populate attribute value based on variable in URL string

Let's say I'm on a page on my website: http://www.example.com/SearchResults.asp?Search=stackoverflow. Is it possible to use a JavaScript or jQuery code to get the variable "search" from the URL string and populate it into the value of the search box?
Basically I'll have my regular identified search box:
<input type="text" title="Search" id="search_box" />
And a user will search for something, but I will want a JavaScript or jQuery code that will get the value from the "search" variable in the URL string when the customer is on the Search.asp page and add it as the "value" to the input#search.
So the user will be on this page: http://www.example.com/SearchResults.asp?Search=stackoverflow and the search box will look like:
<input type="text" title="Search" id="search_box" value="stackoverflow" />
Thanks
You could try this function:
function getSearchVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){
return unescape(pair[1]);
}else{
return false;
}
}
}
If this function is present in the sample you mentioned above, all you would call getSearchVariable("Search") to have "stackoverflow" returned.
So in your page, you would have a script element that looks like:
<script type="text/javascript">
function getSearchVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){
return unescape(pair[1]).split("+").join(" ");
}else{
return "";
}
}
}
$(document).ready(function(){
$("#search_box").val(getSearchVariable("Search"));
});
</script>
Hope that helps!
You can use the JQuery URI plugin (shamelessly written by yours truly) to extract any piece of the URL: Specifically, $.uri(window.location.href).at("query").search yields "stackoverflow" for the said URL.
The overall flow would be to register a callback (fired on page-load) to analyze the URL and set the value of that form element, that is:
<script>
$(document).ready(function () {
$('#Search').val($.uri(window.location.href).at("query").search);
})
</script>
JavaScript
document.getElementById('Search').value = [(window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1]];
jsFiddle.
The wrapping it with [] means that if the value was not found, it will return an empty string instead of undefined (which would be set to the input's value and shown as the undefined string).
jQuery
$('#Search').val(function() {
return (window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1];
});
jsFiddle.
The (/* get GET param */ || []) is so the code will not error if the GET param was not found.

Can a javascript attribute value be determined by a manual url parameter?

I am trying to display data from an external .jsp file, which is set up something like this:
<tag>
<innertag1 id="1">
<innertag1 id="2">
</tag>
<tag>
<innertag2 id="3">
<innertag2 id="4">
</tag>
To display only information from only one particular "innertag" tag, I'm currently using:
NodeList labs = XMLInfo.getElementsByTagName("innertag1");
I'd like to be able to isolate any particular tag with ease. Theoretically, I could create many individual pages and simply change the values to "innertag2," "innertag3," etc., but this is obviously a bit impractical.
Is there a way to determine the value via a URL parameter? For instance, if I wanted to only display data from "innertag2," is there a way that the url http://www.server.com/data.jsp?id=innertag2 would adjust the tagname properly?
Thank you, any help would be much appreciated.
You can parse document.location.href and extract parameters from there. This is from an old HTML file where I used this technique (not sure if it's compatible on all browsers, however).
var args = {};
function parseArgs()
{
var aa = document.location.href;
if (aa.indexOf("?") != -1)
{
aa = aa.split("?")[1].split("&");
for (var i=0; i<aa.length; i++)
{
var s = aa[i];
var j = s.indexOf("=");
if (j != -1)
{
var name = s.substr(0, j);
var value = s.substr(j + 1);
args[name] = value;
}
}
}
}
Not sure if this is what you're looking for, but you can access parameters from the url using location.search.
6502's answer is almost good enough, it's not url decoding parameters. The function below is a bit more polished (descriptive variable names, no global variables)
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
Then you could do
var params = getUrlParams();
XMLInfo.getElementsByTagName(params['id']); // or params.id

Categories

Resources