Data from one page to another with a twist.
-
So long as you don't need to support Internet Explorer, the modern way to parse the querystring is to use the
URLSearchParamsclass: URLSearchParams - Web APIs | MDN[^]const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
console.log(key, "=", value);
}It's not clear what the connection is between the querystring parameters and the form parameters, but the code you've shown requires that they're in exactly the same order. It would probably be better if you could match based on the name of the element. You'll also need to use the
valueproperty, not thetextContentproperty, to set the value for a form element.const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementsByName(key)[0];
if (element && element.classList.contains("dropdown") && (/^INPUT|SELECT$/i).test(element.tagName)) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Hi Richard, thanks for replying. When I input the data and press the submit button it correctly forwards me to this page; overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6= so the data is in the url but I can't get it from there into the dropdown to use in calculations. Basically the idea is that other data in the destination page has the value in the drop down added to it. Would it help to show you the actual pages?
-
Hi Richard, thanks for replying. When I input the data and press the submit button it correctly forwards me to this page; overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6= so the data is in the url but I can't get it from there into the dropdown to use in calculations. Basically the idea is that other data in the destination page has the value in the drop down added to it. Would it help to show you the actual pages?
If you really want to match based on the index of the parameter, then you could try:
const searchParams = new URLSearchParams(location.search);
let index = 0;for (const [key, value] of searchParams) {
let element = document.getElementsByClassName("dropdown")[index];
element.value = value;
index++;
}This assumes that the value already exists in the list. If you want to add a new option instead:
let element = document.getElementsByClassName("dropdown")[index];
let option = document.createElement("option");
option.value = value;
option.text = value;
element.add(option, null);
element.value = value;
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
If you really want to match based on the index of the parameter, then you could try:
const searchParams = new URLSearchParams(location.search);
let index = 0;for (const [key, value] of searchParams) {
let element = document.getElementsByClassName("dropdown")[index];
element.value = value;
index++;
}This assumes that the value already exists in the list. If you want to add a new option instead:
let element = document.getElementsByClassName("dropdown")[index];
let option = document.createElement("option");
option.value = value;
option.text = value;
element.add(option, null);
element.value = value;
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks Richard, this is how the inputs and the dropdown are laid out but can be changed if it makes it easier to get to the result I need. :) I have tried the code you have given me but still nothing in the dropdown. (All I get is level 1, level 2 etc)
Payrate
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
level-1
level-2
level-3
level-4
level-5
level-6 -
Thanks Richard, this is how the inputs and the dropdown are laid out but can be changed if it makes it easier to get to the result I need. :) I have tried the code you have given me but still nothing in the dropdown. (All I get is level 1, level 2 etc)
Payrate
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
level-1
level-2
level-3
level-4
level-5
level-6Based on that markup and the querystring from your previous message, this should work:
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Based on that markup and the querystring from your previous message, this should work:
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks Richard, I'm thinking it's probably me as the code below still gives me nothing. Assuming it should post to the dropdown I already have?
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
} -
Thanks Richard, I'm thinking it's probably me as the code below still gives me nothing. Assuming it should post to the dropdown I already have?
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}Ah, no, sorry. I thought you were trying to put the values into the text inputs. Given a select list:
<div class='dropdown-container row p-4'>
<select>
<option class='dropdown'>level-1</option>
<option class='dropdown'>level-2</option>
<option class='dropdown'>level-3</option>
<option class='dropdown'>level-4</option>
<option class='dropdown'>level-5</option>
<option class='dropdown'>level-6</option>
</select>
</div>and the URL:
overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6=then something like this should work:const searchParams = new URLSearchParams(location.search);
const elements = document.getElementsByClassName("dropdown");
let index = 0;for (const [key, value] of searchParams) {
let element = elements[index];
element.text = value;
index++;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Ah, no, sorry. I thought you were trying to put the values into the text inputs. Given a select list:
<div class='dropdown-container row p-4'>
<select>
<option class='dropdown'>level-1</option>
<option class='dropdown'>level-2</option>
<option class='dropdown'>level-3</option>
<option class='dropdown'>level-4</option>
<option class='dropdown'>level-5</option>
<option class='dropdown'>level-6</option>
</select>
</div>and the URL:
overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6=then something like this should work:const searchParams = new URLSearchParams(location.search);
const elements = document.getElementsByClassName("dropdown");
let index = 0;for (const [key, value] of searchParams) {
let element = elements[index];
element.text = value;
index++;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Richard, thankyou so much it, works. It shows as per the example 10,20,30 in the drop down. I assume it would be difficult to show the level and value or just the level and the value somewhere else(hidden) so that the values can get used in the calculations? I know I could do that in Excel but I'm still at the start of the learning curve here. :)
-
Richard, thankyou so much it, works. It shows as per the example 10,20,30 in the drop down. I assume it would be difficult to show the level and value or just the level and the value somewhere else(hidden) so that the values can get used in the calculations? I know I could do that in Excel but I'm still at the start of the learning curve here. :)
If you change
element.texttoelement.value, the value won't be shown, but it will be what's used when the form is submitted. Updated demo[^] <option> - HTML: Hypertext Markup Language | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
If you change
element.texttoelement.value, the value won't be shown, but it will be what's used when the form is submitted. Updated demo[^] <option> - HTML: Hypertext Markup Language | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks Richard, I think I confused you there. Sorry. So once the inputs are pulled from the 1st page to the 2nd and put into the dropdown I either need to call them somehow so as to use them in a calculation or just have them somewhere else so that when eg level 1 is selected (and showing) all the figures in my form would have £10 added to them (the maths part of that is what you have given me knowledge on before so I should get that once I get the numbers) Thanks again. :)
-
Thanks Richard, I think I confused you there. Sorry. So once the inputs are pulled from the 1st page to the 2nd and put into the dropdown I either need to call them somehow so as to use them in a calculation or just have them somewhere else so that when eg level 1 is selected (and showing) all the figures in my form would have £10 added to them (the maths part of that is what you have given me knowledge on before so I should get that once I get the numbers) Thanks again. :)
I messed up the updated demo link. If you set the
valuerather than thetext, the value won't be shown, but you can access it for your calculations. If you add an event listener for the "changed" event, you can update your calculations with the selected value: Updated updated demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
