Select URL parameters with jquery and add them to script - javascript

I have a url link:
http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4
The parameters are dynamic so it will not be static numbers.
In my example are 4, but maybe less or more.
I have a jquery code that pre selects a dropdown:
jQuery(document).ready(function( $ ) {
$("#var_one").val("result1");
});
Now I want to, depending on the url parameters above to populate jquery code like:
jQuery(document).ready(function( $ ) {
$("#var_one").val("result1");
$("#var_two").val("result2");
$("#var_three").val("result3");
.
.
.
});

Use regex to form a array of key value pair based on the url and use forEach to loop through the array and add the value to the id using .text()
Hope this helps!
var a = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4"
var query = a.split('?')[1] //extract query param
var queries = query.split(/&/g) //extract key value pairs from query param
queries.forEach(function(el){ //loop through the key value pair
var newElm = '<div id="' + el.split('=')[0] + '">'+el.split('=')[1]+'</div>' //create new elm
$('body').append(newElm) //append into DOM Body
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here's a function to retrieve URL-parameters:
function GetURLParameter(sParam) {
if (sParam != undefined && sParam.length > 0) {
var sPageHref = window.location.href;
var sPageURL = window.location.search.substring(1);
var sURLVariables = (sPageURL.length != '') ? sPageURL.split('&') : sPageHref.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
} else {
var sPageURL = document.location.pathname.split('&');
var sParameterName = sPageURL[0];
return sParameterName;
}
}
If you specify a parameter, like GetURLParameter('something') it will fetch that. If you just use GetURLParameter() it will fetch the link used, ie /index.php or whatever.

Update: to answer your question correctly as i understood you need to convert url parameters to JSON then use for loop and use keys, values to fill inputs values. so inputs are and values dynamic.
$(document).ready(function() {
String.prototype.allParams = function() {
return JSON.parse('{"' + decodeURI(this.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";
//var url = location.href
var params = url.allParams();
for (var k in params) {
if ($("#" + k).length) $("#" + k).val(params[k]);
//if input id not exist append to body or any container
//you can remove next line
else $("body").append("<input value='" + params[k] + "'/>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this prototype url.param("param"); to get parameter value.
String.prototype.param = function(str) {
e = this.indexOf("?" + str + "=") > -1 ? "?" + str + "=" : "&" + str + "=";
return this.indexOf(e) == -1 ? undefined : this.split(e)[1].split("&")[0];
}
var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";
console.log(url.param("var_one")); //result1
console.log(location.href.param("param")); //undefined

Related

Remove the query string before appending the url parameters

I want to remove the query string from my URL before I add my URL parameters. Say my site is https://www.abcd.com/test I am appending some parameters to my URL like /def?key=value through javascript. But the page is built as https://www.abcd.com/test?/def?key=value. I want it to be https://www.abcd.com/test/def?key=value Below is my code. Any input is greatly appreciated.
redirectURL: function() {
var currentURL = window.location.href;
var kvp = document.location.search.substr(1).split('&');
if (kvp == '') {
if (currentURL.indexOf("def") == -1){
document.location.search = '/def'+ '?' + 'key' + '=' + 'value';
}else{
document.location.search = '?' + 'key' + '=' + 'value';
}
}
else {
var i = kvp.length; var x; while (i--) {
x = kvp[i].split('=');
if (x[0] == key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0) { kvp[kvp.length] = [key, value].join('='); }
document.location.search = kvp.join('&');
}
}
You are appending your URL parameters to the location.search property which is the querystring:
document.location.search = '/def'+ '?' + 'key' + '=' + 'value';
I believe what you want to do is append your URL parameters to the location.href property, but first you will need to separate the existing search string (querystring) from it:
var urlBase = window.location.href.split('?')[0];
window.location.href = urlBase + '/def'+ '?' + 'key' + '=' + 'value';

Replace parameter in URL - two parameters

I have a simple script for replace prameter:
function replaceQueryParam(param, newval, search) {
//condition over accumulation & in url if I use null
if(newval == null){
ampersand = "";
} else{
ampersand = "&";
}
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '');
return (query.length > 2 ? query + ampersand : "?") + (newval ? param + "=" + newval : '');
}
And I use it:
var str = window.location.search
str = replaceQueryParam('myParam', 'myValue', str)
window.location = window.location.pathname + str
It run perfect, but I want use the function edit to parameters with only one redirect. If I have it in onClick event, I cant use:
var str = window.location.search
str = replaceQueryParam('myParam', 'myValue', str)
window.location = window.location.pathname + str
var str = window.location.search
str = replaceQueryParam('SecondParam', 'null', str)
window.location = window.location.pathname + str
The second parameter I want null (I want delete second parameter from url) - if it by simple.
Thanks and sorry for my English
PS: It can by in jquery
All of my event:
$("#typ span").click(function() {
var url = window.location.href;
//if it exist
if (url.indexOf('typ') > -1){
var str = window.location.search
str = replaceQueryParam('typ', $(this).attr('id'), str)
window.location = window.location.pathname + str
//if its doesnt exist - add new
} else {
if (url.indexOf('?') > -1){
url += '&typ='+$(this).attr('id');
}else{
url += '?typ='+$(this).attr('id');
}
window.location.href = url;
}
});
if click on span I want do this (add or replace "typ") and null other parameter (if it exist) - with only one redirect.
Take a look at the existing URL interface.
Example:
const url = new URL('http://test.com/products?category=bears&page=3');
url.searchParams.set('category', 'puppies');
console.log(url.href); // Result: http://test.com/products?category=puppies&page=3

Get the image filename by first characters using javascript

I have a folder with images that have long filenames, but they all have unique product ID numbers at the beginning
e.g. 1023-Very-Long-Image-Name.jpg.
What I'm trying to do is to get full image filename into my javascript, by just using this unique ID number.
e.g. I need to find an image with ID 1023, which is this one - 1023-Very-Long-Image-Name.jpg
All unique IDs stored in JSON database. So below is an example of my code:
$('.choose-range-cta').click(function () {
var rowID = $(this).attr("id");
var stylesTable = JSON.parse(stylesDB);
var styleHTML = "";
for (var i = 0; i < stylesTable.length; i++) {
if (stylesTable[i].collectionID == rowID) {
var blockTitle = stylesTable[i].styleName;
var blockPrice = stylesTable[i].fromPrice;
var blockSize = stylesTable[i].size;
var blockImageID = stylesTable[i].frontImageID;
styleHTML += "<div class=\"col-lg-4 style-block\"><span class=\"style-name\">" + blockTitle + "</span><span class=\"from-price\">from £" + blockPrice + "</span><span class=\"cta\">Select</span><div class=\"img-box\"><img src=\"" + ImagePath + blockImageID +"\"></div><span class=\"copy\">" + blockSize + "</span></div>";
}
}
$('#style-list').html(styleHTML);
});
Assuming your list is an array, use filter:
var imageArray = [
'1021-Don-Long-Image-Name.jpg',
'1022-Very-Long-Image-Name.jpg',
'1023-Dan-Long-Image-Name.jpg',
'1024-BobLong-Image-Name.jpg'
];
function getName(data, id) {
return data.filter(function (el) {
return el.substring(0, 4) === id;
})[0];
}
var name = getName(imageArray, '1023'); // 1023-Dan-Long-Image-Name.jpg
DEMO

Javascript won't filter eBay API results by price/listing type

After following eBay's API guidelines for displaying fixed price items that fall within a specified price range, results are still showing auction based items of varying prices outside the range. I followed their tutorial word for word, so I'm not sure what I'm doing wrong.
Code:
<div id="api"></div>
<script>
function _cb_findItemsByKeywords(root)
{
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i)
{
var item = items[i];
var title = item.title;
var pic = item.galleryURL;
var viewitem = item.viewItemURL;
if (null != title && null != viewitem)
{
html.push(
'<tr id="api_microposts"><td>'
+ '<img src="' + pic + '" border="0" width="190">' + '<a href="' + viewitem + '" target="_blank">' + title +
'</a></td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("api").innerHTML = html.join("");
// Create a JavaScript array of the item filters you want to use in your request
var filterarray = [
{"name":"MaxPrice",
"value":"500",
"paramName":"Currency",
"paramValue":"USD"},
{"name":"MinPrice",
"value":"200",
"paramName":"Currency",
"paramValue":"USD"},
{"name":"FreeShippingOnly",
"value":"true",
"paramName":"",
"paramValue":""},
{"name":"ListingType",
"value":["FixedPrice"],
"paramName":"",
"paramValue":""},
];
// Define global variable for the URL filter
var urlfilter = "";
// Generates an indexed URL snippet from the array of item filters
function buildURLArray() {
// Iterate through each filter in the array
for(var i=0; i<filterarray.length; i++) {
//Index each item filter in filterarray
var itemfilter = filterarray[i];
// Iterate through each parameter in each item filter
for(var index in itemfilter) {
// Check to see if the parameter has a value (some don't)
if (itemfilter[index] !== "") {
if (itemfilter[index] instanceof Array) {
for(var r=0; r<itemfilter[index].length; r++) {
var value = itemfilter[index][r];
urlfilter += "&itemFilter\(" + i + "\)." + index + "\(" + r + "\)=" + value ;
}
}
else {
urlfilter += "&itemFilter\(" + i + "\)." + index + "=" + itemfilter[index];
}
}
}
}
} // End buildURLArray() function
// Execute the function to build the URL filter
buildURLArray(filterarray);
url += urlfilter;
}
</script>
<!--
Use the value of your appid for the appid parameter below.
-->
<script src=http://svcs.ebay.com/services/search/FindingService/v1?SECURITY-APPNAME=*App ID*&OPERATION-NAME=findItemsByKeywords&SERVICE-VERSION=1.0.0&RESPONSE-DATA-FORMAT=JSON&callback=_cb_findItemsByKeywords&REST-PAYLOAD&keywords=iphone%205%2016gb%20unlocked&paginationInput.entriesPerPage=3>
</script>
The specifications come from this page. I would tackle this problem in two steps:
Check to see if you get the same results even if you comment out this line:
url += urlfilter;
If that happens then your problem is the way you make the request and the parameters you set are not yet relevant. If it does change then the request is going through well enough and you need to fiddle what you pass in.
In that case the parameters need some fiddling. If you are getting any results then one issue could be with the ListingType filter. The specifications say that ListingType takes a string OR can take multiple values. It might be that you want to use:
{"name":"ListingType",
"value": "FixedPrice",
"paramName":"",
"paramValue":""}

Add / Change parameter of URL and redirect to the new URL

If the &view-all parameter does NOT exist in the URL I need to add it to the end of the URL along with a value. If it DOES exist then I need to be able to just change the value without creating a new URL because it might, or might not, have other parameters before it.
I found this function but I can't get it to work: https://stackoverflow.com/a/10997390/837705
Here is the code I have using the function above (which I can't get to work): http://jsfiddle.net/Draven/tTPYL/4/
I know how to append the parameter and value already:
<div onclick="javascript: window.location.assign(window.location.href+='&view-all=Yes');">Blah Blah</div>
More Info:
If the URL is http://www.domain.com/index.php?action=my_action then the default "&view-all" value would be "Yes" so the URL they would be directed to when they click the button is http://www.domain.com/index.php?action=my_action&view-all=Yes.
If the URL is http://www.domain.com/index.php?action=my_action&view-all=Yes then when they click the button it would change to http://www.domain.com/index.php?action=my_action&view-all=No​​​
EDIT: Please give me examples. I don't know alot of JS, and I just can't think of a way to do it in PHP.
function setGetParameter(paramName, paramValue)
{
var url = window.location.href;
var hash = location.hash;
url = url.replace(hash, '');
if (url.indexOf(paramName + "=") >= 0)
{
var prefix = url.substring(0, url.indexOf(paramName + "="));
var suffix = url.substring(url.indexOf(paramName + "="));
suffix = suffix.substring(suffix.indexOf("=") + 1);
suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
url = prefix + paramName + "=" + paramValue + suffix;
}
else
{
if (url.indexOf("?") < 0)
url += "?" + paramName + "=" + paramValue;
else
url += "&" + paramName + "=" + paramValue;
}
window.location.href = url + hash;
}
Call the function above in your onclick event.
Why parse the query string yourself when you can let the browser do it for you?
function changeQS(key, value) {
let urlParams = new URLSearchParams(location.search.substr(1));
urlParams.set(key, value);
location.search = urlParams.toString();
}
All the preivous solution doesn't take in account posibility of the substring in parameter. For example http://xyz?ca=1&a=2 wouldn't select parameter a but ca. Here is function which goes through parameters and checks them.
function setGetParameter(paramName, paramValue)
{
var url = window.location.href;
var hash = location.hash;
url = url.replace(hash, '');
if (url.indexOf("?") >= 0)
{
var params = url.substring(url.indexOf("?") + 1).split("&");
var paramFound = false;
params.forEach(function(param, index) {
var p = param.split("=");
if (p[0] == paramName) {
params[index] = paramName + "=" + paramValue;
paramFound = true;
}
});
if (!paramFound) params.push(paramName + "=" + paramValue);
url = url.substring(0, url.indexOf("?")+1) + params.join("&");
}
else
url += "?" + paramName + "=" + paramValue;
window.location.href = url + hash;
}
I had a similar situation where I wanted to replace a URL query parameter. However, I only had one param, and I could simply replace it:
window.location.search = '?filter=' + my_filter_value
The location.search property allows you to get or set the query portion of a URL.
To do it in PHP: You have a couple of parameters to view your page, lets say action and view-all. You will (probably) access these already with $action = $_GET['action'] or whatever, maybe setting a default value.
Then you decide depending on that if you want to swich a variable like $viewAll = $viewAll == 'Yes' ? 'No' : 'Yes'.
And in the end you just build the url with these values again like
$clickUrl = $_SERVER['PHP_SELF'] . '?action=' . $action . '&view-all=' . $viewAll;
And thats it.
So you depend on the page status and not the users url (because maybe you decide later that $viewAll is Yes as default or whatever).
Some simple ideas to get you going:
In PHP you can do it like this:
if (!array_key_exists(explode('=', explode('&', $_GET))) {
/* add the view-all bit here */
}
In javascript:
if(!location.search.match(/view\-all=/)) {
location.href = location.href + '&view-all=Yes';
}
though i take the url from an input, it's easy adjustable to the real url.
var value = 0;
$('#check').click(function()
{
var originalURL = $('#test').val();
var exists = originalURL.indexOf('&view-all');
if(exists === -1)
{
$('#test').val(originalURL + '&view-all=value' + value++);
}
else
{
$('#test').val(originalURL.substr(0, exists + 15) + value++);
}
});
http://jsfiddle.net/8YPh9/31/
Here's a way of accomplishing this. It takes the param name and param value, and an optional 'clear'. If you supply clear=true, it will remove all other params and just leave the newly added one - in other cases, it will either replace the original with the new, or add it if it's not present in the querystring.
This is modified from the original top answer as that one broke if it replaced anything but the last value. This will work for any value, and preserve the existing order.
function setGetParameter(paramName, paramValue, clear)
{
clear = typeof clear !== 'undefined' ? clear : false;
var url = window.location.href;
var queryString = location.search.substring(1);
var newQueryString = "";
if (clear)
{
newQueryString = paramName + "=" + paramValue;
}
else if (url.indexOf(paramName + "=") >= 0)
{
var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
var keyValues = queryString.split('&');
for(var i in keyValues) {
var key = keyValues[i].split('=');
if (key.length > 1) {
if(newQueryString.length > 0) {newQueryString += "&";}
if(decode(key[0]) == paramName)
{
newQueryString += key[0] + "=" + encodeURIComponent(paramValue);;
}
else
{
newQueryString += key[0] + "=" + key[1];
}
}
}
}
else
{
if (url.indexOf("?") < 0)
newQueryString = "?" + paramName + "=" + paramValue;
else
newQueryString = queryString + "&" + paramName + "=" + paramValue;
}
window.location.href = window.location.href.split('?')[0] + "?" + newQueryString;
}
i would suggest a little change to #Lajos's answer... in my particular situation i could potentially have a hash as part of the url, which will cause problems for parsing the parameter that we're inserting with this method after the redirect.
function setGetParameter(paramName, paramValue) {
var url = window.location.href.replace(window.location.hash, '');
if (url.indexOf(paramName + "=") >= 0) {
var prefix = url.substring(0, url.indexOf(paramName));
var suffix = url.substring(url.indexOf(paramName));
suffix = suffix.substring(suffix.indexOf("=") + 1);
suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
url = prefix + paramName + "=" + paramValue + suffix;
}else {
if (url.indexOf("?") < 0)
url += "?" + paramName + "=" + paramValue;
else
url += "&" + paramName + "=" + paramValue;
}
url += window.location.hash;
window.location.href = url;
}
This is my sample code for rebuild url query string with JS
//function get current parameters
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
};
//build a new parameters
var param1 = $.urlParam('param1');
var param2 = $.urlParam('param2');
//check and create an array to save parameters
var params = {};
if (param1 != null) {
params['param1'] = param1;
}
if (order != null) {
params['param2'] = param2;
}
//build a new url with new parameters using jQuery param
window.location.href = window.location.origin + window.location.pathname + '?' + $.param(params);
I used JQUERY param: http://api.jquery.com/jquery.param/ to create a new url with new parameters.
I need help to adjust my script below or to find a script that could be used on my wordpress site to grab the url suffix parameters from a forward url, then to be added at the button click url for tracking the proper forward ads id.
REASON: parameters are used for advertisement tracking to find out from which ad the user has been forward, even if the user hops from optin page to the sales page by using button click.
Here the goal to reach:
1. An FB ad points to an optin page with tracking code: https://ownsite.com/optin-page/?tid=fbad1
2. At the optin-page there is a button with a setup URL to forward to the sales page, but if clicked then only the URL is forward, but the parameter "?tid=fbad1" is missing.
3. The auto-forward script below (which is working properly) can be used to change for button click forward, but has a limitation as it grab only "tid" parameters instead also utm parameters.
Therefore a script code shall be implemented to establish click buttons (also to style them or use images instead) and while clicking the button to forward to a different sales page with grabbing the suffix parameter form the current optin-page to forward then to sales-page https://ownsite.com/sales-page/?tid=fbad1 also including UTM parameters
Currently, I could have solved this by using an auto-redirect script, but
A.) I do not want to use an autoredirect at this page. Better is an event click button used to let the user himself click to forward with the URL parameter included.
B.) The tracking ID parameter in this script is limited to "?tid=..." instead I do also want to track the UTM code on button click also
i.e. Grab from current page the paramater of URL https://www.optin-page.com/?tid=facebookad1?utm_campaign=blogpost then on button click grab parameters and add to button set URL https://www.sales-page.com/?tid=facebookad1?utm_campaign=blogpost
Please now find here the Code below in use for auto-redirect and grabbing the URL parameters. This code shall be changed now to be able to create a button with a click-event to be redirect then to the forward URL with parameter grabbing of current URL if the button is clicked (as stated above).
<p><!-- Modify this according to your requirement - core script from https://gist.github.com/Joel-James/62d98e8cb3a1b6b05102 and suffix grabbing </p>
<h3 style="text-align: center;"><span style="color: #ffffff; background-color: #039e00;">►Auto-redirecting after <span id="countdown">35</span> seconds◄</span></h3>
<p><!-- JavaScript part --><br /><script type="text/javascript">
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
// Total seconds to wait
var seconds = 45;
function countdown() {
seconds = seconds - 1;
if (seconds < 0) {
// Chnage your redirection link here
var tid = findGetParameter('tid');
window.location = "https://www.2share.info/ql-cb2/" + '?tid='+tid;
} else {
// Update remaining seconds
document.getElementById("countdown").innerHTML = seconds;
// Count down using javascript
window.setTimeout("countdown()", 1000);
}
}
// Run countdown function
countdown();
</script></p>
var updateQueryStringParameter = function (key, value) {
var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
urlQueryString = document.location.search,
newParam = key + '=' + value,
params = '?' + newParam;
// If the "search" string exists, then build params from it
if (urlQueryString) {
var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');
if( typeof value == 'undefined' || value == null || value == '' ) {
params = urlQueryString.replace(removeRegex, "$1");
params = params.replace( /[&;]$/, "" );
} else if (urlQueryString.match(updateRegex) !== null) {
params = urlQueryString.replace(updateRegex, "$1" + newParam);
} else {
params = urlQueryString + '&' + newParam;
}
}
// no parameter was set so we don't need the question mark
params = params == '?' ? '' : params;
window.history.replaceState({}, "", baseUrl + params);
};
I think something like this would work, upgrading the #Marc code:
//view-all parameter does NOT exist
$params = $_GET;
if(!isset($_GET['view-all'])){
//Adding view-all parameter
$params['view-all'] = 'Yes';
}
else{
//view-all parameter does exist!
$params['view-all'] = ($params['view-all'] == 'Yes' ? 'No' : 'Yes');
}
$new_url = $_SERVER['PHP_SELF'].'?'.http_build_query($params);

Categories

Resources