Berechnen Sie den Preis automatisch in der Rechnung

Ich mache ein Rechnungssystem, ich möchte die Preistextbox automatisch berechnet werden. Ich habe eine Tabelle mit zufälligen Zeilen in der Rechnung. Wie mache ich es über eine js-Funktion auf Preis-Textfeld. nach der KopfzelleBerechnen Sie den Preis automatisch in der Rechnung

<SCRIPT language="javascript"> 
var rowCount =0; 
    function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name = "chk[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount; 

     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     element2.name = "item[]"; 
     element2.required = "required"; 
     cell3.appendChild(element2); 

     var cell4 = row.insertCell(3); 
     var element3 = document.createElement("input"); 
     element3.type = "text"; 
     element3.name = "qty[]"; 
     cell4.appendChild(element3); 

     var cell5 = row.insertCell(4); 
     var element4 = document.createElement("input"); 
     element4.type = "text"; 
     element4.name = "cost[]"; 
     cell5.appendChild(element4); 

     var cell5 = row.insertCell(4); 
     var element4 = document.createElement("input"); 
     element4.type = "text"; 
     element4.name = "price[]"; 
     cell5.appendChild(element4); 



    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 
    } 

</SCRIPT>

Hier ist der Körper

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

      <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
     <form action="" method="post" enctype="multipart/form-data"> 
     invoice:<INPUT type="text" name="invoice id"/> 

      <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;"> 
     <TR> 
     <TH>Select</TH> 
     <TH>Sr. No.</TH> 
     <TH>Item</TH> 
     <TH>Cost</TH> 
     <TH>Qty</TH> 
     <TH formula="cost*qty"summary="sum">Price</TH> 
     </TR> 
       <TR> 
        <TD><INPUT type="checkbox" name="chk[]"/></TD> 
        <TD> 1 </TD> 
        <TD> <INPUT type="text" name="item[] "/> </TD> 
        <TD> <INPUT type="text" name="qty[]"/> </TD> 
        <TD> <INPUT type="text" name="cost[]" /> </TD> 
        <TD> <INPUT type="text" name="price[]" /> </TD> 
       </TR> 

      </TABLE> 
     <input type="submit" /> 
</form>

Quelle

2012-04-08 azzaxp

DEMO

Sie Kosten und Menge in den falschen Zellen hatten !!!

<TD> <INPUT type="text" id="qty1" name="qty[]"/> </TD> 
<TD> <INPUT type="text" id="cost1" name="cost[]" /> </TD> 
<TD> <INPUT type="text" id="price1" name="price[]" /> </TD>

Neuer Code:

function calc(idx) { 

    var price = parseFloat(document.getElementById("cost"+idx).value)* 
       parseFloat(document.getElementById("qty"+idx).value); 
    // alert(idx+":"+price); 
    document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2) 
} 

window.onload=function() { 
    document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)}; 
    document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)}; 
} 

var rowCount =0; 
function addRow(tableID) { 
     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name = "chk[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount; 

     var cell3 = row.insertCell(2); 
     var element3 = document.createElement("input"); 
     element3.type = "text"; 
     element3.name = "item[]"; 
     element3.required = "required"; 
     cell3.appendChild(element3); 

     var cell4 = row.insertCell(3); 
     var element4 = document.createElement("input"); 
     element4.type = "text"; 
     element4.name = "qty[]"; 
     element4.id = "qty"+rowCount; 
     element4.onkeyup=function() {calc(rowCount);} 
     cell4.appendChild(element4); 

     var cell5 = row.insertCell(4); 
     var element5 = document.createElement("input"); 
     element5.type = "text"; 
     element5.name = "cost[]"; 
     element5.id = "cost"+rowCount; 
     element5.onkeyup=function() {calc(rowCount);} 
     cell5.appendChild(element5); 

     var cell6 = row.insertCell(5); 
     var element6 = document.createElement("input"); 
     element6.type = "text"; 
     element6.name = "price[]"; 
     element6.id = "price"+rowCount 
     cell6.appendChild(element6); 



    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 
    }

Hier ist insgesamt - man kann tatsächlich berechnet mit diesem ersetzen, wenn Sie Ausschneiden und Einfügen von calc in denen ich calc (i)

function totalIt() { 
    var qtys = document.getElementsByName("qty[]"); 
    var total=0; 
    for (var i=1;i<=qtys.length;i++) { 
    calc(i); 
    var price = parseFloat(document.getElementById("price"+i).value); 
    total += isNaN(price)?0:price; 
    } 
    document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);       
}

Quelle

2012-04-08 10:42:54 mplungjan

Danke, aber es ist nicht für die zweite Reihe hinzugefügt zu arbeiten! chkd in ure Demo :) – azzaxp

Ja, fehlt die ID auf die Kosten. Hatte keine Zeit zu beenden. Add it yourself für jetzt – mplungjan

Ok FIXED es - eine Menge von Fixing zu tun - umbenannt Elemente – mplungjan

-1

Sie können die Berechnungen innerhalb einer Funktion implementieren, die aufgerufen wird, wenn das Onchange-Ereignis in einigen Eingabefeldern ausgelöst wird (der letzte einer Zeile oder der erste der nächsten Zeile berechnet den vorherigen Zeilenpreis).

Quelle

2012-04-08 10:43:03 danielrozo

Das ist ein Kommentar – mplungjan

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

     <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
    <form action="" method="post" enctype="multipart/form-data"> 
    invoice:<INPUT type="text" name="invoice id"/> 

     <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;"> 
    <TR> 
    <TH>Select</TH> 
    <TH>Sr. No.</TH> 
    <TH>Item</TH> 
    <TH>Cost</TH> 
    <TH>Qty</TH> 
    <TH formula="cost*qty"summary="sum">Price</TH> 
    </TR> 

     </TABLE> 
    <input type="submit" />

Und Skript:

<SCRIPT language="javascript"> 
var rowCount =0; 
function calculatePrice(qtyElement, costElement, priceElement) { 
     priceElement.value = qtyElement.value * costElement.value; 
} 

function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "checkbox"; 
    element1.name = "chk[]"; 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML = rowCount; 

    var cell3 = row.insertCell(2); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    element2.name = "item[]"; 
    element2.required = "required"; 
    cell3.appendChild(element2); 

    var cell4 = row.insertCell(3); 
    var element3 = document.createElement("input"); 
    element3.type = "text"; 
    element3.name = "qty[]"; 
    element3.onchange = function(){ 
     calculatePrice(this, this.parentElement.parentElement.childNodes[4].childNodes[0], this.parentElement.parentElement.childNodes[5].childNodes[0]); 
    }; 
    cell4.appendChild(element3); 

    var cell5 = row.insertCell(4); 
    var element4 = document.createElement("input"); 
    element4.type = "text"; 
    element4.name = "cost[]"; 
    element4.onchange = function(){ 
      calculatePrice(this.parentElement.parentElement.childNodes[3].childNodes[0], this, this.parentElement.parentElement.childNodes[5].childNodes[0]); 
    }; 
    cell5.appendChild(element4); 

    var cell6 = row.insertCell(5); 
    var element5 = document.createElement("input"); 
    element5.type = "text"; 
    element5.name = "price[]"; 
    cell6.appendChild(element5); 



} 

function deleteRow(tableID) { 
    try { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 

    for(var i=0; i<rowCount; i++) { 
     var row = table.rows[i]; 
     var chkbox = row.cells[0].childNodes[0]; 
     if(null != chkbox && true == chkbox.checked) { 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 


    } 
    }catch(e) { 
     alert(e); 
    } 
} 
addRow('dataTable'); 
</SCRIPT>

Quelle

2012-04-08 10:51:07 yannisgu

Danke, Das funktioniert für mich, Kannst du mir einfach noch eine Hilfe geben, wie zeige ich die Summe aller Preise dort unten an ..? Coz. Ich muss das gleiche in PHP speichern. – azzaxp

Danke, dass ich sogar gefunden habe. Ich habe PHP benutzt. – azzaxp

einfach die Berechnung binden, beispielsweise ein Schlüsselereignis. Sie sollten die erste Rechnungszeile auch über JS anlegen.

function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "checkbox"; 
    element1.name = "chk[]"; 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML = rowCount; 

    var cell3 = row.insertCell(2); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    element2.name = "item[]"; 
    element2.required = "required"; 
    cell3.appendChild(element2); 

    var cell4 = row.insertCell(3); 
    var element3 = document.createElement("input"); 
    element3.type = "text"; 
    element3.name = "qty[]"; 
    cell4.appendChild(element3); 

    var cell5 = row.insertCell(4); 
    var element4 = document.createElement("input"); 
    element4.type = "text"; 
    element4.name = "cost[]"; 
    cell5.appendChild(element4); 

    var cell5 = row.insertCell(5); 
    var element5 = document.createElement("input"); 
    element5.type = "text"; 
    element5.name = "price[]"; 
    cell5.appendChild(element5); 

    var calcPrice = function() { 
     try { 
      element5.value = element3.value * element4.value; 
     } catch(e) { 

     } 
    } 

    element3.onkeyup = calcPrice; 
    element4.onkeyup = calcPrice; 
}

Quelle

2012-04-08 10:56:37 diewie

Es funktioniert nicht ...! für mich .. danke irgendwie ..! :) – azzaxp

Seltsam ... Achten Sie darauf, die Elemente richtig zu benennen. Sie haben in Ihrem Code beispielsweise den Variablennamen element4 zweimal verwendet. – diewie

Thanks Got the Solution .. :) – azzaxp

-1

<script type="text/javascript"> 

    $(function(){ 


     //add new row 
     $('.add').click(function(){ 




        var tr = '<tr>'+ 
          '<td><input type="text" name="product_name[]" class="form-control product_name"></td>'+ 
          '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+ 
          '<td><input type="text" name="price[]" class="form-control price"></td>'+ 
          '<td><input type="text" name="amount[]" class="form-control amount"></td>'+ 
          '<td><input type="button" class="btn btn-danger remove" value="Remove"></td>'+ 
         '</tr>'; 
      $('.details').append(tr); 
     }); 
     // end 



     // total amount 
     $('.details').delegate('.quantity,.price','keyup',function(){ 
      var tr = $(this).parent().parent(); 
      var price = tr.find('.price').val(); 
      var qty = tr.find('.quantity').val(); 
      var amount = price * qty; 
      tr.find('.amount').val(amount); 
      total(); 
     }); 

     // end 


     // delete row 
     $('.details').delegate('.remove','click',function(){ 
       var con = confirm("Do you want to remove it ?"); 
       if(con) 
       { 
        $(this).parent().parent().remove(); 
        total(); 
       } 

     }); 
     // end 



     //get pay 
     $('.pay').change(function(){ 
      var subtotal = $('.subtotal').val()-0; 
      var get  = $(this).val()-0; 
      $('.return').val(get - subtotal); 
     }); 
     // end 
    }); 
</script> 



      <script type="text/javascript"> 

      // for updating the tax while writing the price . 

       function changeTax(){ 

        var price = document.getElementById("price").value; 
        var q = document.getElementById("quantity").value; 

        var np = Number(price); 

       var tax = (0.15 * np)*q; 



        <!-- how to diferenciate concatinate anad plus sign--> 
        document.getElementById("amount").value = q * np; 

        var amount = document.getElementById("amount").value; 
        document.getElementById("tax").value = tax; 
        document.getElementById("subtotal").value = Number(tax) + Number(amount); 
       } 
      </script> 
        <script> 
    $(function() { 

    }); 
    </script>

Quelle

2016-08-26 11:54:30

berechnet Steuern und Zwischensumme basierend auf Preis von Benutzer bu kann es nicht berechnen, wenn ich Zeilen hinzufügen –

formatieren Sie bitte Ihren Code (Einzug von 4 Leerzeichen) – slfan

Berechnen Sie den Preis automatisch in der Rechnung

Antwort

Verwandte Themen