0

I have a form using html and css In that I have a dropdown. in dropdown I have options like breakfast,lunch and dinner... What I want in that When I click the breakfast the next input field as name cost In that input field I will get the cost of breakfast like that when I click lunch and dinner I will get the cost

Below code is the html code:

<div class="form-grid">
                          
 <input class="inputs" type="text" name="celname" id="celname" placeholder="Person Name*">
<input class="inputs" type="text" name="celnumber" id="celnumber" placeholder="Phone number*" >
<select class="selects " id="foodtype" name="foodtype" onchange="getcostvalue();">                                    <option value=""> --Food Donation-- </option>
 <option value="Breakfast">Breakfast</option>
<option value="Lunch-Veg">Lunch-Veg</option>
<option value="Lunch-Non_Veg">Lunch-Non_Veg</option>
<option value="Dinner-Veg">Dinner-Veg</option>
<option value="Dinner-Non_Veg">Dinner-Non_Veg</option>
                                </select> 
                            
                                
<input class="inputs" type="text" name="cost" id="cost" placeholder="Cost*">
<input class="inputs" type="text" name="celltotal" id="celltotal" placeholder="Total Rupees*"> 
<input type="hidden" class="inputs" type="text" name="cellstatus" id="cellstatus" value="C" placeholder="Total Rupees*"
       </div>         
                           
  <button type="submit" class="btn btn-primary btn-style mt-3" id="submitbtn" >Submit</button>

This is what Iam tried code in javascript onchange function

<script type="text/javascript">
  function getcostvalue(){
    var foodtype = $.trim($('#foodtype').val());
    if (foodtype=='Breakfast') {
      document.getElementById("cost").value = "50";

    }else if(foodtype=='Lunch-Veg'){
      document.getElementById("cost").value = "100";
    }else if(foodtype=='Lunch-Non_Veg'){
      document.getElementById("cost").value = "150";
    }
  }
</script>

In select I wrote onchange function..

please help for write that function code using javascript...

example: if I select breakfast the cost will be displayed as 50 in cost inputfield. If I select lunch-veg the cost is 100 if I select lunch-non_veg cost is 150

Like that dinner cost is same as lunch cost

sudha ch
  • 5
  • 1
  • 5
  • Can you also post your javascript function? getcostvalue(); – Incredible Apr 25 '21 at 06:28
  • yes actually Iam develop this in php codeigniter – sudha ch Apr 25 '21 at 06:31
  • https://stackoverflow.com/questions/11869953/javascript-selected-index-onchange-doesnt-work-at-all and https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript?rq=1 may give some hint – Incredible Apr 25 '21 at 06:33

2 Answers2

0

function getcostvalue(){
  const data=[
    {"key":"Breakfast", "value":50},
    {"key":"Lunch-Veg", "value":100},
    {"key":"Lunch-Non_Veg", "value":150},
    {"key":"Dinner-Veg", "value":200},
    {"key":"Dinner-Non_Veg", "value":250},
  ];
  let select = document.getElementById('foodtype')
  let [selectedObj] = data.filter((e) => e.key === select.value);
  if(selectedObj){
    document.getElementById('cost').value = selectedObj.value;
  }
  else{
    document.getElementById('cost').value = null;
  }
}
<div class="form-grid">
                          
 <input class="inputs" type="text" name="celname" id="celname" placeholder="Person Name*">
<input class="inputs" type="text" name="celnumber" id="celnumber" placeholder="Phone number*" >
<select class="selects " id="foodtype" name="foodtype" onchange="getcostvalue();">                                    <option value=""> --Food Donation-- </option>
 <option value="Breakfast">Breakfast</option>
<option value="Lunch-Veg">Lunch-Veg</option>
<option value="Lunch-Non_Veg">Lunch-Non_Veg</option>
<option value="Dinner-Veg">Dinner-Veg</option>
<option value="Dinner-Non_Veg">Dinner-Non_Veg</option>
                                </select> 
                            
                                
<input class="inputs" type="text" name="cost" id="cost" placeholder="Cost*">
<input class="inputs" type="text" name="celltotal" id="celltotal" placeholder="Total Rupees*"> 
<input type="hidden" class="inputs" type="text" name="cellstatus" id="cellstatus" value="C" placeholder="Total Rupees*"
       </div>         
                           
  <button type="submit" class="btn btn-primary btn-style mt-3" id="submitbtn" >Submit</button>
Darshit Dhameliya
  • 136
  • 4
0

By using data attribute from HTML5 you can add extra data to elements in a syntactically-valid manner that is also easily accessible from jQuery.

 
  $('#foodtype').change(function(){
       var selected = $(this).find('option:selected');
       var price = selected.data('price'); 
       $('#cost').val(price);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
                          
 <input class="inputs" type="text" name="celname" id="celname" placeholder="Person Name*">
<input class="inputs" type="text" name="celnumber" id="celnumber" placeholder="Phone number*" >
 <select class="selects " id="foodtype" name="foodtype">                          <option value=""> --Food Donation-- </option>
   <option value="Breakfast" data-price="50">Breakfast</option>
   <option value="Lunch-Veg" data-price="100">Lunch-Veg</option>
   <option value="Lunch-Non_Veg" data-price="150">Lunch-Non_Veg</option>
   <option value="Dinner-Veg" data-price="100">Dinner-Veg</option>
   <option value="Dinner-Non_Veg" data-price="200">Dinner-Non_Veg</option>
 </select> 
                            
                                
<input class="inputs" type="text" name="cost" id="cost" placeholder="Cost*">
<input class="inputs" type="text" name="celltotal" id="celltotal" placeholder="Total Rupees*"> 
<input type="hidden" class="inputs" type="text" name="cellstatus" id="cellstatus" value="C" placeholder="Total Rupees*"
       </div>         
                           
  <button type="submit" class="btn btn-primary btn-style mt-3" id="submitbtn" >Submit</button>
Ayaz
  • 2,111
  • 4
  • 13
  • 16