Dynamically append Javascript variable to URL

Question

Im attempting to produce a dynamic url containing multiple javascript variables but i only want to include them if they contain information.

These variables are essentially filters which will be used to Select from a MYSQL databse so they take form of "column=value".

The url i am trying to produce will need to be in the format of page.php?column1=value1&column2=value2.... etc.

i am struggling to work out how to include only the variables that contain info and then how to insert the required "&" between each variable.

The current code is below and currently contains just the two variabls but the aim is to have as many as 5.

var jsedibility = "";
function chosenEdibility(choice){
jsedibility = choice;
}

var jsfrequency = "";
function chosenFrequency(choice2){
jsfrequency = choice2;
}

function setFilters(){
window.location='search.php?' + jsedibility+"&"+jsfrequency;
}

i am then using "onClick=setFilters()" assigned to a button to load the relevant page.

How can i set this up so that the URL is produced dynamically, only containing the variables that have data in them and also to add the required "&" between each variable.

Massively appreciate any help :)

You can filter values first and than join with &

Code Maniac
– Code Maniac

2019-06-22 18:59:16 +00:00
Commented Jun 22, 2019 at 18:59 — Code Maniac
– Code Maniac, Commented Jun 22, 2019 at 18:59

M Y · Accepted Answer · 2019-06-22 20:30:42Z

2

I would make an array of the variables then use join().

var filters = [];

Use an if statement to check that they are not empty strings.

if (jsedibility != ""){ filters.push(jsedibility) }
var filtersString = filters.join('&');

Then in your setFilters(),

window.location.assign('./' + filtersString)

edited Jun 22, 2019 at 20:30

answered Jun 22, 2019 at 19:05

M Y

363 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AndyKing Over a year ago

Hi @M Y, this looks like the sort of thing im trying to aim for. Im a little confused with the last step though. Im not familiar with javascrip syntax to be honest. why is the setFilters() function not window.loaction='search.php?' + filtersString ? or am i not understanding something? i seem to be getting an empty string with the following code too:

var filters = []; 				if (jsedibility != ""){ filters.push(jsedibility) } 				filtersString = filters.join('&');  				function setFilters(){ 				window.location='search.php?' + filtersString; 				}

M Y Over a year ago

Honestly, I'm not too familiar with window.location. I just checked it out on w3schools - window.location. If you scroll all the way down, there's a demo there for how window.location.assign is used to load a new document.

M Y Over a year ago

Perhaps you forgot to declare the filtersString variable.

AndyKing Over a year ago

got it! I was where i was running the ifs, ive moved them within the setFilters() function and its now working as expected. Thanks for your help!

AndyKing Over a year ago

final working code is:

var filters = []; 				var filtersString = ""; 				 				var jsedibility = ""; 				function chosenEdibility(choice){ 				jsedibility = choice; 				 				}  				var jsfrequency = ""; 				function chosenFrequency(choice2){ 				jsfrequency = choice2; 				} 								 				  				function setFilters(){ 				if (jsedibility != ""){ filters.push(jsedibility) } 				if (jsfrequency != ""){ filters.push(jsfrequency) } 					 				filtersString = filters.join('&'); 				window.location='search.php?' + filtersString; 				}

muka.gergely · Accepted Answer · 2019-06-22 19:34:04Z

This works with any number of variables.

// mockup data object
const obj = {
  jsedibility: '',
  jsfrequency: '',
  jsvar1: '',
  jsvar2: '',
  jsvar3: ''
}

// setting object values
function setObjVal(obj) {
  obj.jsedibility = 'choice1'
  obj.jsfrequency = 'choice2'
}

// creating the filter string
function setFilters(obj) {
  return Object.values(obj).filter(val => val !== '').join('&')
}

document.getElementById('setFilters').addEventListener('click', function(e) {
  setObjVal(obj)
  console.log(setFilters(obj))
})

<button id="setFilters">Filters</button>

Or another with an array:

// mockup data
const choice = 'ch1'
const choice2 = 'ch2'


const array = []

var jsedibility = "";

function chosenEdibility(choice) {
  jsedibility = choice;

}

var jsfrequency = "";

function chosenFrequency(choice2) {
  jsfrequency = choice2;
}

// showing that it can be filtered out
var noValue = "";

function chosenNoValue(choice3) {
  noValue = choice3;
}

chosenEdibility(choice)
chosenNoValue('') // empty value
chosenFrequency(choice2)

document.getElementById('setFilters').addEventListener('click', function(e) {
  array.push(jsedibility)
  array.push(noValue)
  array.push(jsfrequency)
  // string filtered for not empty values
  const filterString = array.filter(el => el !== '').join('&')
  console.log(filterString)
})

<button id="setFilters">Filters</button>

Collectives™ on Stack Overflow

Dynamically append Javascript variable to URL

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related