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

Expand|Select|Wrap|Line Numbers

 <!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>

Mar 10 '10 #1

Subscribe Post Reply

✓ answered by azegurb

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

2776

acoder

16,027

Expert Mod 8TB

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.

Mar 13 '10 #2

acoder

16,027

Expert Mod 8TB

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.

Expand|Select|Wrap|Line Numbers

opts[i] = selObj[i].value;

where opts would be an array containing all selected options.

Mar 13 '10 #3

azegurb

you can do as you said or another method you want
thank you

Mar 13 '10 #4

rbuczynski

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 "Motherboard 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 "GraphigCard 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 "Motherboard ASUS" and "GraphigCard 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.

Mar 13 '10 #5

azegurb

i need coding this section
but i dont know how

Mar 14 '10 #6

rbuczynski

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 "//--------------------":

Expand|Select|Wrap|Line Numbers

 
<!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!

Mar 14 '10 #7

rbuczynski

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.

Mar 14 '10 #8

azegurb

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

Mar 15 '10 #9

acoder

16,027

Expert Mod 8TB

@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!

Mar 15 '10 #10

azegurb

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

Mar 15 '10 #11

azegurb

Thanks rbuczynski and acoder
you helped me more

Mar 15 '10 #12

rbuczynski

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:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 //---------------------

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 "productCache"
At the top of your code, outside of any functions, add this code:

Expand|Select|Wrap|Line Numbers

var productCache=new Array();

This is where we'll cache information about the products.

5. Add handleProducts calls to your addrow and removeRowFromTable functions

At the bottom of your addrow function, add this code:

Expand|Select|Wrap|Line Numbers

 handleProducts('add',{    index:productList.selectedIndex,

    text:thisProductName});

And in your removeRowFromTable function, in the for loop through the "stack" array, after the "row" variable is declared, add this:

Expand|Select|Wrap|Line Numbers

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:

Expand|Select|Wrap|Line Numbers

 
<!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!

Mar 15 '10 #13

How to update drop down box using data from last insert

✓ answered by azegurb

Similar topics