Return different content based on multiple select inputs
2
So basically I am trying to show different prices based on multiple select inputs. The prices are stored in WordPress using Advance custom fields but thats just a detail really, unless it can be done with AFC.
<select>
<option>12 months</option>
<option>24 months</option>
<option>36 months</option>
</select>
<select>
<option>1000 deposit</option>
<option>2000 deposit</option>
<option>3000 deposit</option>
</select>
* if 12 months and 2000 deposit are selected Show a dynamic price and so on *
What would be the best way to do this? I have seen many examples of a single select inputs but not various inputs. Thanks!
javascript php select advanced-custom-fields
asked Nov 14 '18 at 7:43
LeighLeigh
134
add a comment |
2
So basically I am trying to show different prices based on multiple select inputs. The prices are stored in WordPress using Advance custom fields but thats just a detail really, unless it can be done with AFC.
<select>
<option>12 months</option>
<option>24 months</option>
<option>36 months</option>
</select>
<select>
<option>1000 deposit</option>
<option>2000 deposit</option>
<option>3000 deposit</option>
</select>
* if 12 months and 2000 deposit are selected Show a dynamic price and so on *
What would be the best way to do this? I have seen many examples of a single select inputs but not various inputs. Thanks!
javascript php select advanced-custom-fields
asked Nov 14 '18 at 7:43
LeighLeigh
134
add a comment |
2
2
2
So basically I am trying to show different prices based on multiple select inputs. The prices are stored in WordPress using Advance custom fields but thats just a detail really, unless it can be done with AFC.
<select>
<option>12 months</option>
<option>24 months</option>
<option>36 months</option>
</select>
<select>
<option>1000 deposit</option>
<option>2000 deposit</option>
<option>3000 deposit</option>
</select>
* if 12 months and 2000 deposit are selected Show a dynamic price and so on *
What would be the best way to do this? I have seen many examples of a single select inputs but not various inputs. Thanks!
javascript php select advanced-custom-fields
asked Nov 14 '18 at 7:43
LeighLeigh
134
So basically I am trying to show different prices based on multiple select inputs. The prices are stored in WordPress using Advance custom fields but thats just a detail really, unless it can be done with AFC.
<select>
<option>12 months</option>
<option>24 months</option>
<option>36 months</option>
</select>
<select>
<option>1000 deposit</option>
<option>2000 deposit</option>
<option>3000 deposit</option>
</select>
* if 12 months and 2000 deposit are selected Show a dynamic price and so on *
What would be the best way to do this? I have seen many examples of a single select inputs but not various inputs. Thanks!
javascript php select advanced-custom-fields
javascript php select advanced-custom-fields
asked Nov 14 '18 at 7:43
LeighLeigh
134
asked Nov 14 '18 at 7:43
LeighLeigh
134
asked Nov 14 '18 at 7:43
LeighLeigh
134
asked Nov 14 '18 at 7:43
LeighLeigh
134
asked Nov 14 '18 at 7:43
LeighLeigh
134
134
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
You can achieve this using JavaScript by adding event listeners to each select element and then calling a function to calculate output based on user selection. In the example below I simply display the result in an input element. The code would look something like this.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">Probably not the most elegant way of doing it, but it gets the job done.
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
add a comment |
0
Links below.... this is the only way i could show images because I am new, I hope this is ok?
https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf
answered Nov 14 '18 at 22:14
LeighLeigh
134
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295234%2freturn-different-content-based-on-multiple-select-inputs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can achieve this using JavaScript by adding event listeners to each select element and then calling a function to calculate output based on user selection. In the example below I simply display the result in an input element. The code would look something like this.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">Probably not the most elegant way of doing it, but it gets the job done.
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
add a comment |
0
You can achieve this using JavaScript by adding event listeners to each select element and then calling a function to calculate output based on user selection. In the example below I simply display the result in an input element. The code would look something like this.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">Probably not the most elegant way of doing it, but it gets the job done.
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
add a comment |
0
0
0
You can achieve this using JavaScript by adding event listeners to each select element and then calling a function to calculate output based on user selection. In the example below I simply display the result in an input element. The code would look something like this.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">Probably not the most elegant way of doing it, but it gets the job done.
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
You can achieve this using JavaScript by adding event listeners to each select element and then calling a function to calculate output based on user selection. In the example below I simply display the result in an input element. The code would look something like this.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">Probably not the most elegant way of doing it, but it gets the job done.
let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
calculate( select1.value, document.getElementById("select2").value );
});
let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
calculate( document.getElementById("select1").value, select2.value );
});
//calculate result and display it in an input box
function calculate( val1, val2 ){
//possibility 1
if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
//assign some value to something you want
document.getElementById("result").value = "$150.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
document.getElementById("result").value = "$50.25";
} else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
document.getElementById("result").value = "$10.25";
}
//.......and so on with the rest of possibilities
}<select id="select1">
<option value="12">12 months</option>
<option value="24">24 months</option>
<option value="36">36 months</option>
</select>
<select id="select2">
<option value="1000">1000 deposit</option>
<option value="2000">2000 deposit</option>
<option value="3000">3000 deposit</option>
</select>
<input type="text" id="result">answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
edited Nov 16 '18 at 8:12
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
answered Nov 14 '18 at 9:46
BambiOurLordBambiOurLord
310310
310310
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
add a comment |
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
Thanks a lot for that. Similar to what I need. What I actually need is for when two conditions are true. For example if they choose 12 months & then 2000 deposit then it displays a value of my choosing... say I want it to display £230.75... how would I do that for say 10 different pre-determined prices?
– Leigh
Nov 14 '18 at 20:17
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
If I understood you correctly then you could achieve this by setting a lot of if conditions or switches to assign a specific value based on user selection. So for example if ( val1 === 2000 && val2 === 12 ) { //set the value here }
– BambiOurLord
Nov 14 '18 at 21:01
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
That sounds great but trying to replicate your solution on my site ai am getting this console error and the input doesn't populate, thanks again selects.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null at selects.js:3 (anonymous) @ selects.js:3
– Leigh
Nov 14 '18 at 21:41
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
It seems that the select you're trying to add event listener to either does exist at the time you try to add it or perhaps you misstyped something. It's difficult to diagnose the exact problem without knowing how you're trying to do things. Are you adding JavaScript through a WordPress plugin or theme or some other way ?
– BambiOurLord
Nov 14 '18 at 22:02
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
I have created a new js file in my js folder, referenced it my head and put the selects in my homepage template, i will attach some images in a reply... thanks again
– Leigh
Nov 14 '18 at 22:11
add a comment |
0
Links below.... this is the only way i could show images because I am new, I hope this is ok?
https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf
answered Nov 14 '18 at 22:14
LeighLeigh
134
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
|
show 2 more comments
0
Links below.... this is the only way i could show images because I am new, I hope this is ok?
https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf
answered Nov 14 '18 at 22:14
LeighLeigh
134
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
|
show 2 more comments
0
0
0
Links below.... this is the only way i could show images because I am new, I hope this is ok?
https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf
answered Nov 14 '18 at 22:14
LeighLeigh
134
Links below.... this is the only way i could show images because I am new, I hope this is ok?
https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf
answered Nov 14 '18 at 22:14
LeighLeigh
134
answered Nov 14 '18 at 22:14
LeighLeigh
134
answered Nov 14 '18 at 22:14
LeighLeigh
134
answered Nov 14 '18 at 22:14
LeighLeigh
134
134
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
|
show 2 more comments
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
It seems that your script might be running before markup is created. You could try wrapping the code that references markup to fire only after scripts have and page have completely loaded. The two variables containing select as well as addEventListener code should be put inside document.window.onload = function() { //code goes here }. This should ensure that your html code is available to be grabbed by JavaScript.
– BambiOurLord
Nov 14 '18 at 22:32
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
You are a legend, that worked a treat!
– Leigh
Nov 14 '18 at 22:43
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
@BambiOurLord Just one more thing. I am struggling using switch and if else statemtents to work with 2 selects... If i have 4 set prices....say £110, £120, £130, £150.... if i choose option 1 from the first select and option 3 from the second i want to display £130 and so on... I have custom fields set with the values i need in the backend of wordpress i just need the logic as i can't work it out. I will just set up as many variations as i need. thank you :)
– Leigh
Nov 14 '18 at 23:07
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
A bit late to reply because of sleep. To make that happen inside that calculation function you would have to check both values that you're passing to it and based on that give a result. So it might look something like this if ( val1 === 12 && val2 === 2000 ) { //set the price here for output } and then add as many options as you need. Values coming from select may be strings so you might have to coerce them to be integers using val1.toInt before comparing or inside if statement have numbers wrapped in double quotes. Please don't forget to mark my answer as correct if I were of help, good luck!
– BambiOurLord
Nov 15 '18 at 6:20
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
My bad I meant parseInt( val1 ); if you want to change its data type during comparison.
– BambiOurLord
Nov 15 '18 at 13:18
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295234%2freturn-different-content-based-on-multiple-select-inputs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
