Develop Reference

Show <div> when a specific URL Parameter is met

I have a form in Google Sheets, which passes URL parameters to a page, which then should show content based on the URL parameters.
So if a person checks "item 1" and "item 2" in the Google Sheet, the parameter gets passed on as follows:
https://my-url.com/?item1=value1&item2=value2
Now there's several div containers, which are set to display:none with css. When the URL parameter is met, the hidden div container should show up. So the html is:
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>
I've found some code online, which does pretty much that, but it can only display one div at a time: https://jennamolby.com/how-to-display-dynamic-content-on-a-page-using-url-parameters/
My problem is, that for every passed parameter, a field has to show.
Can anyone help me with this? I'm really not an expert in js by any means.

Good Luck
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var item1 = getParameterByName('item1');
var item2 = getParameterByName('item2');
if (item1 == "value1")
{
document.getElementById("value1").style.display = "block";
}
if (item2 == "value2")
{
document.getElementById("value2").style.display = "block";
}
.hidden
{
display: none;
}
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>

You could do something like this:
$.each(getUrlVars(), function(i, x) {
$('#' + x).show();
})
function getUrlVars() {
var vars = {},
hash;
var hashes = url.slice(url.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;
}
getUrlVars is taken from this answer, and modified a bit.
Demo
var url = "https://my-url.com/?item1=value1&item2=value2"; //replace with window.location.href
$.each(getUrlVars(), function(i, x) {
$('#' + x).show();
})
function getUrlVars() {
var vars = {},
hash;
var hashes = url.slice(url.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;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>

try this
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
return false;
};
let item1 = getUrlParameter('item1');
let item2 = getUrlParameter('item2');
if(item1 =='value1' &&item2 =='value2')
{
document.getElementById('showhide').style.display = 'block';
}
<div id="showhide" style="display: none">
hi hi
</div>

How i can get content link from URL and then get content of a single div of my geted link?

I have the jquery code bellow. I want to get the content link from URL and then I want to load the content of a div from that URL. I have got the content link as link variable and I have the div named #myDiv with the variable div. I want to load contents only from the div named #myDiv. but it loading the full webpage please help me.
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return decodeURIComponent(sParameterName[1]);
}
}
}
var link = GetURLParameter('link');
var div = '#myDiv';
$(document).ready(function () {
$('#content').load(link, div);
});

obtain query parameter and display details based on parameter

so with my code: I have an ajax call to get some data from a json file. then with javascript I have a function to display that data.
what im trying to do is have 1 page (game.html) which displays a game based on which game you select. but im having trouble trying to write up the code to handle the query parameter so wondering if any of you could assist.
heres the function:
const displayNewOutput = (newReleased, hasCheckbox) => {
let Newoutput = "";
newReleased.forEach(game => {
if (game.Type === "New Release" && game.ID <= 3) {
let ratingDiv = $("<div class='rating'></div>");
for (var i = 0; i < game.Rating; i++) {
ratingDiv.append('<span class="fa fa-star checked"></span>');
}
for (var i = game.Rating; i < 5; i++) {
ratingDiv.append('<span class="fa fa-star"></span>');
}
Newoutput += `
<li>
<li>
<a class="newGame" href=${game.link}?id=${game.ID}>
<img class="frontGames" src="${game.image}">
<p>
<b>Name:</b>${game.Name}<br>
<b>Release Date:</b>${game.ReleaseDate}</br>
<b>Genres:</b>${game.Genres}</br>
<b>Retail Price:</b>${game.RetailPrice}</br>
<b>Rating:</b> ${ratingDiv.html()}</br>
</p>
</a>
</li>`;
}
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
var tech = GetURLParameter('id');
console.log(tech);
})
return Newoutput;
});
this line in particular is where the query parameter is:
<li><a class="newGame" href=${game.link}?id=${game.ID}><img class="frontGames" src="${game.image}">
I've looked at other threads in regards to query parameters but dont understand one bit at all.

I need to get values from a url after (#) with jquery

I have this url:
http://test.words.aspx#word_id=1034374#lang_code=en
I need to get the values of word_id and Language code and assign them to variables.
var word_id = 1034374;
var lang_kod = en;

Here is the code you need:
var link = window.location;
var data = link.split("#");
var word_id = data[1].split("=")[1];
var lang_code = data[2].split("=")[1];
With window.location you get the url that you currently are (an alternative is document.location.
Then you split it by the hash symbol (link.split("#")) and the result is stored as an array of strings (data) which now contains http://test.words.aspx at index 0, word_id=1034374 at index 1 and lang_code=en at index 2;
What you have to do now is split the string at index 1 by the equals symbol (data[1].split("=")). This also is an array of string which has the word_id at index 0 and 1034374 at index 1 which is what you need (data[1].split("=")[1]).
Following the same logic you also get the lang_code variable.
Test it here:
var link = "http://test.words.aspx#word_id=1034374#lang_code=en"
var data = link.split("#");
var word_id = data[1].split("=")[1];
var lang_code = data[2].split("=")[1];
console.log("Word ID = " + word_id);
console.log("Lang Code = " + lang_code);
Hope this was helpful :)

You should really only have one URL fragment. But in your case you could do the following to achieve this.
var url = "http://test.words.aspx#word_id=1034374#lang_code=en"; // or use window.location;
var url_splitted = url.split('#');
alert((url_splitted[1]).split('=')[1]); // showing you the values
alert((url_splitted[2]).split('=')[1]); // showing you the values
var work_id = (url_splitted[1]).split('=')[1];
var lang_code = (url_splitted[2]).split('=')[1];
Working JSFiddle: https://jsfiddle.net/o0nwyvfz/
Note:
If you are about to use multiple URL fragments, I'd suggest you to use URL parameters e.g.: http://test.words.aspx?word_id=1034374&lang_code=en
Which you could retrieve by:
A solution provided by: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
And this is how you can use this function assuming the URL is,
http://test.words.aspx?word_id=1034374&lang_code=en
var tech = getUrlParameter('word_id');
var blog = getUrlParameter('lang_code');

Remove match word using jQuery

I want to split and join two type of url. For example
Url 1 :
http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC
Url 2 :
http://localhost/site/index.php?route=product/category&path=20&limit=8
<input type="hidden" class="sort" value="http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC" />
<input type="hidden" class="limit" value="http://localhost/site/index.php?route=product/category&path=20&limit=8" />
I'd like to join the query strings but remove duplicates.
I'm looking for this result at last
http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC&limit=8

var getUrlParameter = function getUrlParameter(sParam, url) {
var sPageURL = decodeURIComponent(url),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
Now read individual parametrs by
var order = getUrlParameter('order', 'http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC');
var limit = getUrlParameter('limit', 'http://localhost/site/index.php?route=product/category&path=20&limit=8');
and make a new url by using the parameters.

You could go with getting the query parameters in an array and de-duplicating them.
var url1 = "http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC";
var url2 = "http://localhost/site/index.php?route=product/category&path=20&limit=8";
var url = (url1.split`?`[1]+"&"+url2.split`?`[1]);
var result = url1.split`?`[0]+"?"+Array.from(new Set(url.split`&`)).join`&`;
console.log(result)
Note that you're left with order=ASC and order=DESC, of which only the last is processed. But looks like that's what you want...
For older browsers:
var url1 = "http://localhost/site/index.php?route=product/category&path=20&sort=p.price&order=ASC&order=DESC";
var url2 = "http://localhost/site/index.php?route=product/category&path=20&limit=8";
var url = (url1.split('?')[1]+"&"+url2.split('?')[1]);
var result = url1.split('?')[0]+"?"+url.split('&').filter(function(x,i){
return url.split('&').indexOf(x) == i;
}).join('&');
console.log(result)