Changing values of multiple input fields based on dropdown option (js or PHP switch)

Question

I have a dropdown, I need to update three input fields values based on dropdown selection.

Dropdown is like this:

 <form action="#" method="post">

  <select id="call_out_fee">
 <option selected disabled>select...</option>
 <option value="fourhundred">400.00</option>
 <option value="threefifty">350.00</option>
 <option value="threehundred">300.00</option>
 <option value="twohundred">200.00</option>
 <option value="zero">0.00</option> 
 </select>

<p>Tech charge: <input name="tech_charge" value="" readonly="readonly" onfocus="this.blur()" /></p>
<p>Call out: <input name="call_out" value="" readonly="readonly" onfocus="this.blur()" /></p>
<p>Agent fee: <input name="agent_fee" value="" readonly="readonly" onfocus="this.blur()" /></p>

I can update one of these fields with the following:

<script>
function updateTechCharge (el, priceLog, priceList) {
priceLog.value = 'R' + priceList[el.getElementsByTagName('option')     [el.selectedIndex].value.toLowerCase()];
}

var techCharges = {
'fourhundred' : 400,
'threefifty' : 350,
'threehundred' : 300,
'twohundred' : 400,
'zero' : 0
};

var select = document.getElementById('call_out_fee'),
hidden = document.getElementsByName('tech_charge')[0];

select.addEventListener('change', function(){
updateTechCharge(select, hidden, techCharges);
});
</script>

I tried doing it with PHP switch with no luck.

Since my knowledge of js is very limited and I need to update all three of these fields with different values I am asking for your help.

Values based on dropdown should look like this:

option "fourhundred" > 
tech_charge: 400, call_out: 400, agent_fee: 50

option "threefifty" > 
tech_charge: 350, call_out: 350, agent_fee: 60

option "threehundred" > 
tech_charge: 300, call_out: 300, agent_fee: 70

option "twohundred" >
tech_charge: 400, call_out: 200, agent_fee: 80

option "zero" > tech_charge: 400, call_out: 0, agent_fee: 90

Thank you in advance.

Answer 1

I would do it this way, and would add the class "charge-type" to each input:

function updateTechCharge (el, priceList) {
  var elems = document.getElementsByClassName('charge-type')

  var price = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];

  for (var i = 0; i < elems.length; i++) {
      var item = elems[i];
      item.value = 'R' + price[i];
  }
}

var techCharges = {
  'fourhundred' : [400, 400, 50],
  'threefifty' : [350, 350, 60],
  'threehundred' : [300, 300, 70],
  'twohundred' : [400, 200, 80],
  'zero' : [400, 0, 90]
};

var select = document.getElementById('call_out_fee'),
hidden = document.getElementsByName('tech_charge')[0];

select.addEventListener('change', function(){
  updateTechCharge(select, techCharges);
});

See this jsfiddle

Answer 2

perhaps this little snippet helps you

html:

...
<select id="mySelect">
  <option value="">nothing selected</option>
  <option value="case1">case 1 text</option>
  <option value="case2">case 2 text</option>
</select>
...

js (with JQuery and > ES5)

...
let selectNode = $('#select');
selectNode.on('change', (event) => {

  // stop event bubbling and default handling
  event.preventDefault();
  event.stopPropagination();

  // get the selected value, if '' set undefined
  let selectedValue = selectNode.val() || undefined;

  // switch by the value with default case
  switch(selectedValue) {
    case 'case1':
      console.log('do something for case 1');
      break;
    case 'case2':
      console.log('do something else');
      break;
    default:
      console.warn('no selection');
  }
}};
...

Answer 3

Here is an example of how to do it using a case(switch) statement like you asked in your post:

 <script>
    //Not necessary
    //var techCharges = {
    //'fourhundred' : 400,
    //'threefifty' : 350,
    //'threehundred' : 300,
    //'twohundred' : 400,
    //'zero' : 0
    //};

//Not necessary
//var select = document.getElementById('call_out_fee'),
//hidden = document.getElementsByName('tech_charge')[0];

select.addEventListener('change', function(){
     //Use case statement on the drop down's value property
     switch(this.value){
         case "fourhundred":
         UpdateTechCharges(400, 400, 50);
         break;
         case "threefifty":
         UpdateTechCharges(350, 350, 60);
         break;
         case "threehundred":
         UpdateTechCharges(300, 300, 70);
         break;
         case "twohundred":
         UpdateTechCharges(400, 200, 80);
         break;
         case "zero":
         UpdateTechCharges(400, 0, 90);
         break;
     }
});

//function to set the input elements
function UpdateTechCharges(techCharge, callout, agentFee){
    document.getElementsByName('tech_charge')[0].value = 'R' + techCharge;
    document.getElementsByName('call_out')[0].value = 'R' + callout;
    document.getElementsByName('agent_fee')[0].value = 'R' + agentFee;

}
</script>