Return different content based on multiple select inputs

user_7013938 0
Viewed 70

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!

advanced-custom-fields select php javascript
2 Answers

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.

user_68031380

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
user_70139380
Related