javascript - how to create pc calculator script in php -
i have 2 tables 1 category , 1 products. want pc calculator.
i have fields generated dynamically based on database. how can write script make this.
<table align=center width=100% border=1 cellspacing=1 cellpadding=3> <tr> <th>category name</th> <th>product name</th> <th>price</th> </tr> <tr class="odd"> <td>speaker</td> <td> <select name="1" size="1" id="1"> <option value="1200.00">intex</option> <option value="2100.00">creative</option> <option value="1400.00">intex 2.1</option> <option value="2000.00">intex 2.1 woofer</option> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>laptop</td> <td> <select name="3" size="1" id="3"> <option value="31000.00">sony</option> <option value="31500.00">hp</option> <option value="31000.00">acer</option> <option value="36000.00">ibm</option> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>mouse</td> <td> <select name="4" size="1" id="4"> <option value="120.00"> teccom</option> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>cpu</td> <td> <select name="6" size="1" id="6"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>projector</td> <td> <select name="7" size="1" id="7"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>anti virus</td> <td> <select name="23" size="1" id="23"> <option value="450.00">mcafee</option> <option value="1200.00">avg</option> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>processor</td> <td> <select name="59" size="1" id="59"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>testing</td> <td> <select name="60" size="1" id="60"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>sadfasdfasdfadsfad</td> <td> <select name="61" size="1" id="61"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr class="odd"> <td>dfgd</td> <td> <select name="62" size="1" id="62"> </select> </td> <td><div id="t1" class="price">0</div></td> </tr> <tr> <td></td> <td>total</td> <td><div id="total"></div></td> </tr> </table> here jquery
jquery(document).ready(function() { $("#sellp").change(function () { var str = 0.00; $("#sellp :selected").each(function () { var test = $(this).val(); //alert(test); var tr = parseint(str) + parseint(test); //alert(tr); $("#t1").text(test); }); }); var sum = 0; $("form :element").change(function() { $('.price').each(function() { sum += parsefloat($(this).text()); }); $('#total').html(sum) }); });
firstly show code.
assuming items in page when loads, need add event handlers
here plain js - jquery may more elegant. need start , add validation. make life easier if name fields in way easy to
<html> <head> <script> function calc(theform) { var total = 0; (var i=1;;i++) { var item = theform.elements["item_"+i]; if (item) { var price = item.options[item.selectedindex].value; if (price && !isnan(price)) { price = parsefloat(price); total+=price; var priceid = item.id.replace('item','price'); document.getelementbyid(priceid).innerhtml=price.tofixed(2); } } else break; } if (total) document.getelementbyid('total').innerhtml="$"+total.tofixed(2); } window.onload=function() { var theform = document.forms[0]; // first form on page (var i=0,n=theform.elements.length;i<n;i++) { if (theform.elements[i].type.indexof("select") !=-1) { theform.elements[i].onchange=function() { calc(this.form); } } } theform.onsubmit=function() { calc(this); return validate(this) } calc(theform) } </script> </head> <body> <form> <table align=center width=100% border=1 cellspacing=1 cellpadding=3 > <tr> <th>category name</th> <th>product name</th> <th>price</th> </tr> <tr class="odd"> <td>speaker </td> <td><select name="item_1" size="1" id="item_1"> <option value="1200.00"> intex</option> <option value="2100.00"> creative</option> <option value="1400.00"> intex 2.1</option> <option value="2000.00"> intex 2.1 woofer</option> </select> </td> <td><div id="price_1" class="price">0</div></td> </tr> <tr class="odd"> <td>laptop </td> <td><select name="item_2" size="1" id="item_2"> <option value="31000.00"> sony</option> <option value="31500.00"> hp</option> <option value="31000.00"> acer</option> <option value="36000.00"> ibm</option> </select> </td> <td><div id="price_2" class="price">0</div></td> </tr> <tr class="odd"> <td>mouse </td> <td><select name="item_3" size="1" id="item_3"> <option value="120.00"> teccom</option> </select> </td> <td><div id="price_3" class="price">0</div></td> </tr> </table> </form> total: <span id="total"></span>
Comments
Post a Comment