How to update drop down box using data from last insert

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • azegurb
    New Member
    • Sep 2009
    • 32
    #1

    How to update drop down box using data from last insert

    I have table in Javascript and it has addrow, deleterow, submit, and functions.
    when i click it automatically adds new row and it has select option to choose some of them
    for ex. in added two rows one of them is Motherboard Asus and other is Motherboard Gigabyte.

    I would like to have a drop down combo box. When i chose one item from drop down menu and in the next row of input that option let not exist in drop down menu.

    Here is my code.
    Thanks beforehands
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script> 
var i=iteration;
function addrow(){
	var tbl = document.getElementById('sheet');
	var iteration = tbl.rows.length;
document.getElementById('count_rows').value = iteration;
	var row=tbl.insertRow(iteration);
 
	var cellLeft = row.insertCell(0);
	var textNode = document.createTextNode(iteration);
	cellLeft.appendChild(textNode);
 
	var cellRight = row.insertCell(1);
	var el = document.createElement('input');
	el.type = 'text';
	el.name = 'txtRow'+iteration;
	el.id = 'txtRow'+iteration;
	el.size = 15;
	el.value = '0';
	el.onblur = sum;
	cellRight.appendChild(el);
 
	var cellRight = row.insertCell(2);
	var elaz = document.createElement('input');
	elaz.type = 'text';
	elaz.name = 'txtRowaz'+iteration;
	elaz.id = 'txtRowaz'+iteration;
	elaz.size = 20;
	elaz.value = '0';
	elaz.onblur = sum;
	cellRight.appendChild(elaz);
 
 
 
	var cellRight1 = row.insertCell(3);
	var ela = document.createElement('input');
	ela.type = 'text';
	ela.name = 'txtRowe'+iteration;
	ela.id = 'txtRowe'+iteration;
	ela.size = 20;
	ela.value = '0';
	ela.onblur = sum;
	cellRight1.appendChild(ela);
 
	var cellRightsel = row.insertCell(4);
	var sel = document.createElement('select');
	sel.name = 'selRow' + iteration;
	sel.id = 'selRow' + iteration;
	sel.onchange = sum;
	sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS');
	sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte');
	sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI');
	sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS');
	sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI');
	sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE');
	cellRightsel.appendChild(sel);
	sum();
}
function removeRowFromTable()
{
  var tbl = document.getElementById('sheet');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
 
function sum(){
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){//loop through table rows
		var el1 = document.getElementById('txtRow'+i);//Row's Income field
		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
		var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
		var elaz=document.getElementById('txtRowaz'+i);
 
		if(!el1 || !el2 || !ela||!elaz) continue;
		var txt = el1.value;
		if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries
 
var tax = Number(txt) * Number(130);
 
if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){
	var  tax = Number(txt) * Number(150);
 
 
}
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){
	var  tax = Number(txt) * Number(100);	
	
}
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){
	var  tax = Number(txt) * Number(85);	
 
}
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){
	var  tax = Number(txt) * Number(95);	
 
}
if (el2[el2.selectedIndex].value=="GraphigCard ATI")
{
 
		var tax = Number(txt) * Number(88);
}
 
		ela.value = tax.toFixed(2);
		elaz.value=tax.toFixed(2)/Number(txt);
		if(isNaN(elaz.value)){
		elaz.value=0;
		}
		s1 += Number(txt);
		s2 += tax;
	
}
	var t1 = document.getElementById('total');
	var t2 = document.getElementById('taxtotal');
	if(t1){ t1.value = s1.toFixed(2); }
	if(t2){ t2.value = s2.toFixed(2); }
}
 
onload = function(){
	addrow();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr>
<td align="center">
	<table id="sheet" border="1">
	<tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>
 
	</table>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="count_rows" id="count_rows" />
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRowFromTable()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>total amount of products<br />
<input id="taxtotal" name="taxtotal" type="text"/>total price of products
</td>
</tr>
</table>
</form>
 
</body>
</html>
    Last edited by Niheel; Mar 13 '10, 07:31 PM. Reason: Updated question using members other post so it makes sense
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      I'm not sure if I've quite understood what you want. Do you want that when a certain option is selected, in the next row, that option doesn't appear in the select box? If so, check the values of each row to decide which ones shouldn't appear. It may help to use an array to store these values.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          That confirms what I understood.

          Use the select boxes' value of each row to see which ones have already been selected in your insert function, e.g.
          Code:
          opts[i] = selObj[i].value;
          where opts would be an array containing all selected options.

            Comment

            • azegurb
              New Member
              • Sep 2009
              • 32
              #4
              you can do as you said or another method you want
              thank you

                Comment

                • rbuczynski
                  New Member
                  • Mar 2010
                  • 10
                  #5
                  Using an array to keep track of the selected items is a good idea.

                  However, I see a problem ahead.

                  If a user adds the first line-item, and selects "Motherboar d ASUS," then under your revised code the second line-item added would not have Motherboard ASUS as an option. So, the user selects GraphigCard ATI as their second line-item. What's the problem?

                  Problem 1: The first line-item still contains a complete list of products, including "GraphigCar d ATI" which should not be available in that list if it has been selected as the second line-item. It needs to be updated on change.

                  Problem 2: If we add a third line-item, then the generated list of products should contain all products less "Motherboar d ASUS" and "GraphigCar d ATI." That's fine; however, if the user decides to change the product in the first line-item then the lists for every other line-item will be incorrect.

                  Solution: Using an array to track which items have been selected is a start. In addition to that you would need to re-iterate through each list of each line-item to update their options so that on change, at any point in time and from any line-item, all options are synchronized.

                  Personally I think this is an inconvenient approach in terms of interface. It would make just as much sense to have a single list up near your "Add" button which serves as the master list of available products. This makes your job easier in that you only have to account for a single SELECT element as opposed to an infinite number of them.

                  Let me know if you need any help coding such work.

                    Comment

                    • azegurb
                      New Member
                      • Sep 2009
                      • 32
                      #6
                      i need coding this section
                      but i dont know how

                        Comment

                        • rbuczynski
                          New Member
                          • Mar 2010
                          • 10
                          #7
                          I'll be glad to help.

                          I looked through your code and found another design issue. Your delete function removes only the most recently inserted line-item. A good design should enable the user to delete any line-item in the table simply by selecting it and then clicking the delete button. We'll need to code that feature.

                          So here's what we need to do:

                          1. Use a master product list
                          The user chooses a product and then clicks "Add." A line-item is added to the table and the "Name" column will contain a text node holding the name of the product. No longer will a drop-down menu appear there.

                          2. Modify the delete function
                          We want the user to be able to remove any line-item in the table. In order to do this, we need to either add a "delete" column to our table with a checkbox (a traditional approach) for each line-item, or make the line-items highlight-able through CSS (a modern approach); or, we can mix the styles. Because I'm not the creator of this script, I'll help you to code using the traditional approach and leave the visual appeal up to you.

                          3. Consider adding table rows/cells differently
                          The insertCell and insertRow methods have been known to have serious compatibility issues. Especially in the Safari browser, where they cause the browser to crash. I won't change your code for you, but I suggest that you use the createElement method to add rows and cells to your table, since it is cross-browser compatible. When you examine my code you will see how I've implemented the createElement method.

                          Here is the modified code. Any changes I've made have been enclosed with commented lines "//--------------------":

                          Code:
                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script> 
function addrow(){
    var tbl = document.getElementById('sheet');
    var iteration = tbl.rows.length;
document.getElementById('count_rows').value = iteration;
	//---------------------
	var productList=document.getElementById('productList');
	var thisProduct=productList.options[productList.selectedIndex].value;
	var thisProductName=productList.options[productList.selectedIndex].text;
	if(!thisProduct)
		return false;
	if(checkProducts(thisProductName)) {
		alert('You have already added the product "'+thisProductName+'"');
		return false;
	}
	//---------------------
    var row=tbl.insertRow(iteration);
	//---------------------
	row.id='row'+iteration;

	var cellDelete=document.createElement('td');
	var cBox=document.createElement('input');
	cBox.type='checkbox';
	cBox.id='rowDelete'+iteration.toString();
	cellDelete.appendChild(cBox);
	row.appendChild(cellDelete);
	//---------------------
 
    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow'+iteration;
    el.id = 'txtRow'+iteration;
    el.size = 15;
    el.value = '0';
    el.onblur = sum;
    cellRight.appendChild(el);
 
    var cellRight = row.insertCell(2);
    var elaz = document.createElement('input');
    elaz.type = 'text';
    elaz.name = 'txtRowaz'+iteration;
    elaz.id = 'txtRowaz'+iteration;
    elaz.size = 20;
    elaz.value = '0';
    elaz.onblur = sum;
    cellRight.appendChild(elaz);
 
 
 
    var cellRight1 = row.insertCell(3);
    var ela = document.createElement('input');
    ela.type = 'text';
    ela.name = 'txtRowe'+iteration;
    ela.id = 'txtRowe'+iteration;
    ela.size = 20;
    ela.value = '0';
    ela.onblur = sum; 
    cellRight1.appendChild(ela);
 
    var cellRightsel = row.insertCell(4);
	//---------------------
	cellRightsel.id='selRow'+iteration.toString();
	var productName=document.createTextNode(thisProductName);
	cellRightsel.appendChild(productName);
	//---------------------
    sum();
}
//---------------------
function checkProducts(n) {
	var tbl=document.getElementById('sheet');
	for(var i=0;i<tbl.rows.length;i++) {
		if(tbl.rows[i].cells[4].innerHTML==n)
			return true;
	}
	return false;
}
//---------------------
function removeRowFromTable()
{
  var tbl = document.getElementById('sheet');
	//---------------------


	var stack=new Array();
  	for(var i=1;i<tbl.rows.length;i++) {
		var row=tbl.rows[i];
		var cBox=row.cells[0].firstChild;
		if(cBox) {
			if(cBox.checked)
				stack.push(row.id);
		}
	}
	for(var i=0;i<stack.length;i++) {
		var row=document.getElementById(stack[i]);
		row.parentNode.removeChild(row);
	}
	sum();
	//---------------------
}
 
function sum(){
    var s1 = 0;
    var s2 = 0;
    var tbl=document.getElementById('sheet');
    var iteration=tbl.rows.length-1;
	//---------------------
    for(var x=1; x<=iteration; x++){//loop through table rows
		var row=tbl.rows[x];
		var i=row.id.substr(row.id.length-1);
	//---------------------
        var el1 = document.getElementById('txtRow'+i);//Row's Income field
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
        var elaz=document.getElementById('txtRowaz'+i);
 
        if(!el1 || !el2 || !ela||!elaz) continue;
        var txt = el1.value;
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries
 
var tax = Number(txt) * Number(130);
 
if(el2.nodeValue=="MotherBoard Gigabyte"){
    var  tax = Number(txt) * Number(150);
 
 
}
if(el2.nodeValue=="MotherBoard MSI"){
    var  tax = Number(txt) * Number(100);    
 
}
if(el2.nodeValue=="Graphiqcard ASUS"){
    var  tax = Number(txt) * Number(85);    
 
}
if(el2.nodeValue=="GraphigCard ATI"){
    var  tax = Number(txt) * Number(95);    
 
}
if (el2.nodeValue=="GraphigCard ATI")
{
 
        var tax = Number(txt) * Number(88);
}
 
        ela.value = tax.toFixed(2);
        elaz.value=tax.toFixed(2)/Number(txt);
        if(isNaN(elaz.value)){
        elaz.value=0;
        }
        s1 += Number(txt);
        s2 += tax;
 
}
    var t1 = document.getElementById('total');
    var t2 = document.getElementById('taxtotal');
    if(t1){ t1.value = s1.toFixed(2); }
    if(t2){ t2.value = s2.toFixed(2); }
}
 
</script>
</head>
<body>
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr>
<td align="center">
    <table id="sheet" border="1">
    <tr><td>delete</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>
 
    </table>
</td>
</tr>
<tr>
<td align="center">
<select id="productList">
	<option value="" selected="selected">Select a Product:</option>
	<option value="1">MotherBoard ASUS</option>
	<option value="2">MotherBoard Gigabyte</option>
	<option value="3">MotherBoard MSI</option>
	<option value="4">Graphiqcard ASUS</option>
	<option value="5">GraphigCard ATI</option>
	<option value="6">GraphigCard GefORCE</option>
</select>
<input type="hidden" name="count_rows" id="count_rows" />
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRowFromTable()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>total amount of products<br />
<input id="taxtotal" name="taxtotal" type="text"/>total price of products
</td>
</tr>
</table>
</form>
 
</body>
</html>
                          Study my additions. I've done my best not to disrupt your code, but rather to add to it in a way that emulates your own understanding of the language.

                          If I can be of further help, please let me know!

                            Comment

                            • rbuczynski
                              New Member
                              • Mar 2010
                              • 10
                              #8
                              Special items to note:

                              checkProducts function
                              This function was added as an alternative to the suggestions of others. Rather than keeping track of added products in an array--which could create obstacles when working with the delete function--I've created this function to scan the table for product names. In this way there is only one source of data to check.

                              sum function
                              This function was somewhat confusing to me, but I've done my best to work with it. You'll see that I've modified your method for gathering line-item data. Since we no longer use individual drop-down menus in the line-items, we can't check the OPTION values. You'll see that in your conditionals I've changed them to test the nodeValue properties of the "Name" columns.

                              Sorry I couldn't document so thoroughly. I'm adding information as I have the time.

                                Comment

                                • azegurb
                                  New Member
                                  • Sep 2009
                                  • 32
                                  #9
                                  Thank you for help
                                  but one thing i ask again if i dont disturb you (if possible)
                                  you created drop down box with select options
                                  i want it to be once one option selected and added (for ex: Mothboard asus) in coming rows in the drop down box motherboard asus option let not exist among select options or it disabled. because once it selected next time to choose that option will be impossible.
                                  again thanks for attention
                                  i will wait your responces

                                    Comment

                                    • acoder
                                      Recognized Expert MVP
                                      • Nov 2006
                                      • 16032
                                      #10
                                      @rbuczynski, nice work. I gave a rather simple approach to make things easier and less work to improve the code, but with those changes, there are a number of improvements. I'll leave you to complete the thread. Thanks!

                                        Comment

                                        • azegurb
                                          New Member
                                          • Sep 2009
                                          • 32
                                          #11
                                          Thanks very much
                                          never think such
                                          I have appreciated your work
                                          but i worked on it. but i got nothink (may be i know very little about javascript)
                                          Thanks thanks very much

                                            Comment

                                            • azegurb
                                              New Member
                                              • Sep 2009
                                              • 32
                                              #12
                                              Thanks rbuczynski and acoder
                                              you helped me more

                                                Comment

                                                • rbuczynski
                                                  New Member
                                                  • Mar 2010
                                                  • 10
                                                  #13
                                                  You're most welcome! I sure hope you can fix that problem with having no ability to think ;-)

                                                  I'm glad it worked out.

                                                  To answer your final question about removing items from the master product list, I programmed a simple alert dialog to take care of that. When you try to add another line-item of the same product, a dialog appears to prevent you from doing so:
                                                  Code:
                                                  if(checkProducts(thisProductName)) {
  alert('You have already added the product "'+thisProductName+'"');
  return false;
}
                                                  That was a simple solution. If you want the items to be removed from the list, then you'll have to do more work. To do what you're proposing, you'll have to cache the removed items and preserve their positions in the list. Here's how:

                                                  1. Remove the dialog code (shown above)
                                                  We will no longer need it with these changes.

                                                  2. Remove the checkProducts function
                                                  We will no longer need it with these changes.

                                                  3. Create a new function called handleProducts
                                                  This new function will remove products from the master list when you add the selected product to the table. It will also put it back into the master list when you remove its respective line-item from the table.

                                                  Here is the code:
                                                  Code:
                                                  //---------------------
function handleProducts(action,args) {
	var productList=document.getElementById('productList');
	if(action=='add') {
		productCache.push(args);
		productList.options[args.index].style.display='none';
		productList.selectedIndex=0;
	}
	else if(action=='remove') {
		for(var i=0;i<productCache.length;i++) {
			if(productCache[i].text==args.text) {
				args=productCache[i];
				productCache.splice(i,1);
				productList.options[args.index].style.display='';
				return true;
			}
		}
		return false;
	}
	else
		return false;
}
//---------------------
                                                  Thanks to CSS, we're able to remove items from the list simply by hiding them through the "display" property. This preserves product order in the list without us having to manage it through messy code.

                                                  4. Add the global variable "productCac he"
                                                  At the top of your code, outside of any functions, add this code:
                                                  Code:
                                                  var productCache=new Array();
                                                  This is where we'll cache information about the products.

                                                  5. Add handleProducts calls to your addrow and removeRowFromTa ble functions

                                                  At the bottom of your addrow function, add this code:
                                                  Code:
                                                  handleProducts('add',{    index:productList.selectedIndex,
    text:thisProductName});
                                                  And in your removeRowFromTa ble function, in the for loop through the "stack" array, after the "row" variable is declared, add this:
                                                  Code:
                                                  handleProducts('remove',{text:row.cells[(row.cells.length-1)].innerHTML});
                                                  This will call handleProducts and successfully manage your master list items.

                                                  *PHEW!*

                                                  And that's it. As you can see, there was much more work involved, which is actually why I posted a simple solution the first time. But I can't blame you for asking. If any of these instructions have confused you, just copy the entire, revised source code from here:
                                                  Code:
                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script>
var productCache=new Array();
function addrow(){
    var tbl = document.getElementById('sheet');
    var iteration = tbl.rows.length;
document.getElementById('count_rows').value = iteration;
    //---------------------
    var productList=document.getElementById('productList');
    var thisProduct=productList.options[productList.selectedIndex].value;
    var thisProductName=productList.options[productList.selectedIndex].text;
    if(!thisProduct)
        return false;
    //---------------------
    var row=tbl.insertRow(iteration);
    //---------------------
    row.id='row'+iteration;
 
    var cellDelete=document.createElement('td');
    var cBox=document.createElement('input');
    cBox.type='checkbox';
    cBox.id='rowDelete'+iteration.toString();
    cellDelete.appendChild(cBox);
    row.appendChild(cellDelete);
    //---------------------
 
    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow'+iteration;
    el.id = 'txtRow'+iteration;
    el.size = 15;
    el.value = '0';
    el.onblur = sum;
    cellRight.appendChild(el);
 
    var cellRight = row.insertCell(2);
    var elaz = document.createElement('input');
    elaz.type = 'text';
    elaz.name = 'txtRowaz'+iteration;
    elaz.id = 'txtRowaz'+iteration;
    elaz.size = 20;
    elaz.value = '0';
    elaz.onblur = sum;
    cellRight.appendChild(elaz);
 
 
 
    var cellRight1 = row.insertCell(3);
    var ela = document.createElement('input');
    ela.type = 'text';
    ela.name = 'txtRowe'+iteration;
    ela.id = 'txtRowe'+iteration;
    ela.size = 20;
    ela.value = '0';
    ela.onblur = sum; 
    cellRight1.appendChild(ela);
 
    var cellRightsel = row.insertCell(4);
    //---------------------
    cellRightsel.id='selRow'+iteration.toString();
    var productName=document.createTextNode(thisProductName);
    cellRightsel.appendChild(productName);

	handleProducts('add',{	index:productList.selectedIndex,
				text:thisProductName});
    //---------------------
    sum();
}
//---------------------
function handleProducts(action,args) {
	var productList=document.getElementById('productList');
	if(action=='add') {
		productCache.push(args);
		productList.options[args.index].style.display='none';
		productList.selectedIndex=0;
	}
	else if(action=='remove') {
		for(var i=0;i<productCache.length;i++) {
			if(productCache[i].text==args.text) {
				args=productCache[i];
				productCache.splice(i,1);
				productList.options[args.index].style.display='';
				return true;
			}
		}
		return false;
	}
	else
		return false;
}
//---------------------
function removeRowFromTable()
{
  var tbl = document.getElementById('sheet');
    //---------------------
    var stack=new Array();
      for(var i=1;i<tbl.rows.length;i++) {
        var row=tbl.rows[i];
        var cBox=row.cells[0].firstChild;
        if(cBox) {
            if(cBox.checked)
                stack.push(row.id);
        }
    }
    for(var i=0;i<stack.length;i++) {
        var row=document.getElementById(stack[i]);
	handleProducts('remove',{text:row.cells[(row.cells.length-1)].innerHTML});
        row.parentNode.removeChild(row);
    }
    sum();
    //---------------------
}
 
function sum(){
    var s1 = 0;
    var s2 = 0;
    var tbl=document.getElementById('sheet');
    var iteration=tbl.rows.length-1;
    //---------------------
    for(var x=1; x<=iteration; x++){//loop through table rows
        var row=tbl.rows[x];
        var i=row.id.substr(row.id.length-1);
    //---------------------
        var el1 = document.getElementById('txtRow'+i);//Row's Income field
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
        var elaz=document.getElementById('txtRowaz'+i);
 
        if(!el1 || !el2 || !ela||!elaz) continue;
        var txt = el1.value;
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries
 
var tax = Number(txt) * Number(130);
 
if(el2.nodeValue=="MotherBoard Gigabyte"){
    var  tax = Number(txt) * Number(150);
 
 
}
if(el2.nodeValue=="MotherBoard MSI"){
    var  tax = Number(txt) * Number(100);    
 
}
if(el2.nodeValue=="Graphiqcard ASUS"){
    var  tax = Number(txt) * Number(85);    
 
}
if(el2.nodeValue=="GraphigCard ATI"){
    var  tax = Number(txt) * Number(95);    
 
}
if (el2.nodeValue=="GraphigCard ATI")
{
 
        var tax = Number(txt) * Number(88);
}
 
        ela.value = tax.toFixed(2);
        elaz.value=tax.toFixed(2)/Number(txt);
        if(isNaN(elaz.value)){
        elaz.value=0;
        }
        s1 += Number(txt);
        s2 += tax;
 
}
    var t1 = document.getElementById('total');
    var t2 = document.getElementById('taxtotal');
    if(t1){ t1.value = s1.toFixed(2); }
    if(t2){ t2.value = s2.toFixed(2); }
}
 
</script>
</head>
<body>
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr>
<td align="center">
    <table id="sheet" border="1">
    <tr><td>delete</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>
 
    </table>
</td>
</tr>
<tr>
<td align="center">
<select id="productList">
    <option value="" selected="selected">Select a Product:</option>
    <option value="1">MotherBoard ASUS</option>
    <option value="2">MotherBoard Gigabyte</option>
    <option value="3">MotherBoard MSI</option>
    <option value="4">Graphiqcard ASUS</option>
    <option value="5">GraphigCard ATI</option>
    <option value="6">GraphigCard GefORCE</option>
</select>
<input type="hidden" name="count_rows" id="count_rows" />
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRowFromTable()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>total amount of products<br />
<input id="taxtotal" name="taxtotal" type="text"/>total price of products
</td>
</tr>
</table>
</form>
 
</body>
</html>
                                                  Again, study this code and learn from it! Please note that the solutions that I've provided are extremely limited to your request. What I mean is, if you start to modify the structure of your table then almost everything will fail to work. This is due in part to references to specific table cells which are expected to contain key data for use in your script.

                                                  For further learning, consider studying "classes in JavaScript". Google it for more information. Overall, you're doing great and I wish the best of luck to you azegurb!

                                                    Comment

                                                    Previous template Next
                                                    Working...