By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,607 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,607 IT Pros & Developers. It's quick & easy.

How to make this quantity area text form to select form

P: 2
Hi.. i found wonderful code at http://bytes.com/topic/javascript/an...ta-last-insert

their code is
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head><title>dinamik sheet</title>
  5. <script> 
  6. var i=iteration;
  7. function addrow(){
  8.     var tbl = document.getElementById('sheet');
  9.     var iteration = tbl.rows.length;
  10. document.getElementById('count_rows').value = iteration;
  11.     var row=tbl.insertRow(iteration);
  12.  
  13.     var cellLeft = row.insertCell(0);
  14.     var textNode = document.createTextNode(iteration);
  15.     cellLeft.appendChild(textNode);
  16.  
  17.     var cellRight = row.insertCell(1);
  18.     var el = document.createElement('input');
  19.     el.type = 'text';
  20.     el.name = 'txtRow'+iteration;
  21.     el.id = 'txtRow'+iteration;
  22.     el.size = 15;
  23.     el.value = '0';
  24.     el.onblur = sum;
  25.     cellRight.appendChild(el);
  26.  
  27.     var cellRight = row.insertCell(2);
  28.     var elaz = document.createElement('input');
  29.     elaz.type = 'text';
  30.     elaz.name = 'txtRowaz'+iteration;
  31.     elaz.id = 'txtRowaz'+iteration;
  32.     elaz.size = 20;
  33.     elaz.value = '0';
  34.     elaz.onblur = sum;
  35.     cellRight.appendChild(elaz);
  36.  
  37.  
  38.  
  39.     var cellRight1 = row.insertCell(3);
  40.     var ela = document.createElement('input');
  41.     ela.type = 'text';
  42.     ela.name = 'txtRowe'+iteration;
  43.     ela.id = 'txtRowe'+iteration;
  44.     ela.size = 20;
  45.     ela.value = '0';
  46.     ela.onblur = sum;
  47.     cellRight1.appendChild(ela);
  48.  
  49.     var cellRightsel = row.insertCell(4);
  50.     var sel = document.createElement('select');
  51.     sel.name = 'selRow' + iteration;
  52.     sel.id = 'selRow' + iteration;
  53.     sel.onchange = sum;
  54.     sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS');
  55.     sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte');
  56.     sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI');
  57.     sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS');
  58.     sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI');
  59.     sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE');
  60.     cellRightsel.appendChild(sel);
  61.     sum();
  62. }
  63. function removeRowFromTable()
  64. {
  65.   var tbl = document.getElementById('sheet');
  66.   var lastRow = tbl.rows.length;
  67.   if (lastRow > 2) tbl.deleteRow(lastRow - 1);
  68. }
  69.  
  70. function sum(){
  71.     var s1 = 0;
  72.     var s2 = 0;
  73.     var tbl=document.getElementById('sheet');
  74.     var iteration=tbl.rows.length-1;
  75.     for(var i=1; i<=iteration; i++){//loop through table rows
  76.         var el1 = document.getElementById('txtRow'+i);//Row's Income field
  77.         var el2 = document.getElementById('selRow'+i);//Row's percentage menu
  78.         var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
  79.         var elaz=document.getElementById('txtRowaz'+i);
  80.  
  81.         if(!el1 || !el2 || !ela||!elaz) continue;
  82.         var txt = el1.value;
  83.         if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries
  84.  
  85. var tax = Number(txt) * Number(130);
  86.  
  87. if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){
  88.     var  tax = Number(txt) * Number(150);
  89.  
  90.  
  91. }
  92. if(el2[el2.selectedIndex].value=="MotherBoard MSI"){
  93.     var  tax = Number(txt) * Number(100);    
  94.  
  95. }
  96. if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){
  97.     var  tax = Number(txt) * Number(85);    
  98.  
  99. }
  100. if(el2[el2.selectedIndex].value=="GraphigCard ATI"){
  101.     var  tax = Number(txt) * Number(95);    
  102.  
  103. }
  104. if (el2[el2.selectedIndex].value=="GraphigCard ATI")
  105. {
  106.  
  107.         var tax = Number(txt) * Number(88);
  108. }
  109.  
  110.         ela.value = tax.toFixed(2);
  111.         elaz.value=tax.toFixed(2)/Number(txt);
  112.         if(isNaN(elaz.value)){
  113.         elaz.value=0;
  114.         }
  115.         s1 += Number(txt);
  116.         s2 += tax;
  117.  
  118. }
  119.     var t1 = document.getElementById('total');
  120.     var t2 = document.getElementById('taxtotal');
  121.     if(t1){ t1.value = s1.toFixed(2); }
  122.     if(t2){ t2.value = s2.toFixed(2); }
  123. }
  124.  
  125. onload = function(){
  126.     addrow();
  127. }
  128. </script>
  129. </head>
  130. <body>
  131. <form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
  132. <table align="center" width="75%">
  133. <tr>
  134. <td align="center">Balance sheet</td></tr>
  135. <tr>
  136. <td align="center">
  137.     <table id="sheet" border="1">
  138.     <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>
  139.  
  140.     </table>
  141. </td>
  142. </tr>
  143. <tr>
  144. <td align="center">
  145. <input type="hidden" name="count_rows" id="count_rows" />
  146. <input type="button" value="Add" onclick="addrow()" />
  147. <input type="button" value="Remove" onclick="removeRowFromTable()" />
  148. <input type="button" value="SUM" onClick="sum()"/>
  149. <input type="submit" value="Submit" /><br />
  150. </td>
  151. </tr>
  152. <tr>
  153. <td align="left">
  154. <input id="total" name="total" type="text"/>total amount of products<br />
  155. <input id="taxtotal" name="taxtotal" type="text"/>total price of products
  156. </td>
  157. </tr>
  158. </table>
  159. </form>
  160.  
  161. </body>
  162. </html> 
just wonder if quantity input text can be made to select form.. thanks
Jan 20 '12 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
both the <select> and the <input> element have a value attribute.
Jan 20 '12 #2

P: 2
thanks for your respond Dormilich.. i'm new on javascript things, can you give me an example? thanks
Jan 20 '12 #3

Dormilich
Expert Mod 5K+
P: 8,639
test each of the following HTML with the given JS code:
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="test">
Expand|Select|Wrap|Line Numbers
  1. <select id="test">
  2.   <option value="1">One</option>
  3.   <option value="2">Two</option>
  4.   <option value="3">Three</option>
  5. </select>
Expand|Select|Wrap|Line Numbers
  1. function showValue(evt) 
  2. {
  3.     alert(this.value);
  4. }
  5. document.getElementById("test").addEventListener("change", showValue, true);
Jan 20 '12 #4

Post your reply

Sign in to post your reply or Sign up for a free account.