calculate dropdown value with variable

Question

I can't find the solution anywhere on the internet. I have a certain code with a variable "price" and a drop-down which is being included.

the drop-down has the values 1-40. When the value changes the total price should change immediately. as in the same row, as in final total price.

enter code here



 function calc(){
  one = document.getElementById("price1").childNodes.item(1).childNodes.item(1).value;
  two = parseFloat(document.getElementById("price1").childNodes.item(5).textContent.replace("€",""))
  document.getElementById("price1").childNodes.item(9).textContent =  one * two;
}
<tr id="price1">
        <td><?php include('optie.php');?></td>
        <td><strong>3-gangen traiteurmenu</strong><br>
            (incl. brood en boter)<br>******<br>
            Creme van gerookte paling<br>******<br>
            Gestoofde hertensukade met aardappelgratin, rodekool en een stoofpeertje.<br>******<br>
            Kerstbal van witte en pure chocolade en een vanillesaus.<br><hr>
            </td>
        <td><?php $prijs1= "16.50";?> &euro;<?php  echo $prijs1; ?></td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&euro;</td>
        <td id="Total"></td> 
    </tr>

I added this code above, this correctly calculate the first dropdownmenu. But now, I must be able to do this times 13, with all the dropdownmenu's

I now know it has to be done with java, because that is a dynamic language.

thanks in advance!

Jasper

beneath option.php

porties <select>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
        <option value="32">32</option>
        <option value="33">33</option>
        <option value="34">34</option>
        <option value="35">35</option>
        <option value="36">36</option>
        <option value="37">37</option>
        <option value="38">38</option>
        <option value="39">39</option>
        <option value="40">40</option>                                            
    </select>

you should definitely use javascript, as both php and html are static — Majid Laissi
– Majid Laissi, Commented Aug 31, 2012 at 14:12
Use javascript. Even if you decide to use php you still have to use javascript to do that. — Leri
– Leri, Commented Aug 31, 2012 at 14:14

Thomas Clayson · Accepted Answer · 2012-08-31 14:16:12Z

2

PHP is server side code.

This means that once you see your website rendered in your browser it has already been delivered from the server and is now "client side". PHP cannot run client side.

If you right click and view source you will see that all your PHP code has been replaced by HTML and plain text.

So what you need is a client side programming language, like Javascript. Most people don't use plain javascript any more. This is beacause different browsers interpret javascript differently. The most popular cross-browser javascript library is called jquery.

Download jquery, include it in your website by putting this code in the head:

<script type="text/javascript" src="/path/to/jquery.js"></script>

Now you can write some cross-browser compatible javascript.

So to do what you want, you need to detect "change" events on the select drop down. You can do this by using the change() function in jQuery.

Here is a jsfiddle to get you on your way: http://jsfiddle.net/GmC3K/

Good luck ask back here if you have any questions about jquery! ;)

answered Aug 31, 2012 at 14:16

Thomas Clayson

30k26 gold badges153 silver badges226 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

J Bom Over a year ago

I have to read into this. Because I have never worked with jquery before. But with this is possible to multiply $prijs1 and dropdown option. And able to do it 13 different times. thanks in advance!

Thomas Clayson Over a year ago

$prijs1 is php code. You'll need to convert that into javascript. You can do this: <script type="text/javascript">var prijs1 = '<?php echo $prijs1; ?>';</script> in order to convert it to javscript. Then you can use the variable prijs1 in javascript to do the calculation.

J Bom Over a year ago

I added some code to calculate, and I have been able to calculate 1 dropdrown menu, but not able to calculate all the dropdowns.

Leonel Machava · Accepted Answer · 2012-08-31 14:15:27Z

1

You should use Javascript to accomplish that.

The way would be to attach a change event to the dropdown control. So, whenever it would be changed, the element showing the price would be updated.

answered Aug 31, 2012 at 14:15

Leonel Machava

1,51611 silver badges19 bronze badges

Comments

J Bom · Accepted Answer · 2012-09-10 13:59:14Z

    function calc(){
  a = document.getElementById("price1").childNodes.item(1).childNodes.item(1).value;
  aa = parseFloat(document.getElementById("price1").childNodes.item(5).textContent.replace("€",""))
  z = document.getElementById("price1").childNodes.item(9).textContent =  Math.round(a * aa *100)/100;

  b = document.getElementById("price2").childNodes.item(1).childNodes.item(1).value;
  bb = parseFloat(document.getElementById("price2").childNodes.item(5).textContent.replace("€",""))
  zz = document.getElementById("price2").childNodes.item(9).textContent =  Math.round(b * bb *100)/100;

  c = document.getElementById("price3").childNodes.item(1).childNodes.item(1).value;
  cc = parseFloat(document.getElementById("price3").childNodes.item(5).textContent.replace("€",""))
  zzz = document.getElementById("price3").childNodes.item(9).textContent =  Math.round(c * cc *100)/100;

  d = document.getElementById("price4").childNodes.item(1).childNodes.item(1).value;
  dd = parseFloat(document.getElementById("price4").childNodes.item(5).textContent.replace("€",""))
  zzzz = document.getElementById("price4").childNodes.item(9).textContent =  Math.round(d * dd *100)/100;

  e = document.getElementById("price5").childNodes.item(1).childNodes.item(1).value;
  ee = parseFloat(document.getElementById("price5").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzzz=document.getElementById("price5").childNodes.item(9).textContent =  Math.round(e * ee * 100)/100;

  f = document.getElementById("price6").childNodes.item(1).childNodes.item(1).value;
  ff = parseFloat(document.getElementById("price6").childNodes.item(5).textContent.replace("€",""))
  zzzzz = document.getElementById("price6").childNodes.item(9).textContent =  Math.round(f * ff *100)/100;

  g = document.getElementById("price6").childNodes.item(1).childNodes.item(1).value;
  gg = parseFloat(document.getElementById("price6").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzzzz=document.getElementById("price6").childNodes.item(9).textContent =  Math.round(g * gg *100)/100;


  h = document.getElementById("price7").childNodes.item(1).childNodes.item(1).value;
  hh = parseFloat(document.getElementById("price7").childNodes.item(5).textContent.replace("€",""))
  zzzzzz = document.getElementById("price7").childNodes.item(9).textContent =  Math.round(h * hh *100)/100;

  i = document.getElementById("price8").childNodes.item(1).childNodes.item(1).value;
  ii = parseFloat(document.getElementById("price8").childNodes.item(5).textContent.replace("€",""))
  zzzzzzz = document.getElementById("price8").childNodes.item(9).textContent =  Math.round(i * ii *100)/100;

  j = document.getElementById("price9").childNodes.item(1).childNodes.item(1).value;
  jj = parseFloat(document.getElementById("price9").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzz = document.getElementById("price9").childNodes.item(9).textContent =  Math.round(j * jj *100)/100;

  k = document.getElementById("price10").childNodes.item(1).childNodes.item(1).value;
  kk = parseFloat(document.getElementById("price10").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzz = document.getElementById("price10").childNodes.item(9).textContent =  Math.round(k * kk *100)/100;

  l = document.getElementById("price11").childNodes.item(1).childNodes.item(1).value;
  ll = parseFloat(document.getElementById("price11").childNodes.item(5).textContent.replace("€",""))
  zzzzzzzzzz = document.getElementById("price11").childNodes.item(9).textContent =  Math.round(l * ll *100)/100;

  document.getElementById("total").childNodes.item(9).textContent =  Math.round((z + zz + zzz + zzzz + zzzzz + zzzzzz + zzzzzzz + zzzzzzzz + zzzzzzzzz + zzzzzzzzzz + zzzzzzzzzzz + zzzzzzzzzzzz )*100)/100;

}

maybe not the prettiest code, but it works :)

Collectives™ on Stack Overflow

calculate dropdown value with variable

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related