How to make this quantity area text form to select form

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • newdayz
    New Member
    • Jan 2012
    • 2

    How to make this quantity area text form to select form

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

    their code is
    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>
    just wonder if quantity input text can be made to select form.. thanks
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    both the <select> and the <input> element have a value attribute.

    Comment

    • newdayz
      New Member
      • Jan 2012
      • 2

      #3
      thanks for your respond Dormilich.. i'm new on javascript things, can you give me an example? thanks

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        test each of the following HTML with the given JS code:
        Code:
        <input type="text" id="test">
        Code:
        <select id="test">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        Code:
        function showValue(evt) 
        {
            alert(this.value);
        }
        document.getElementById("test").addEventListener("change", showValue, true);

        Comment

        Working...