Jquery-Zwischensummenfunktion, die mit js gst-Funktion in Konflikt steht

Question

O.k beginnt heute, 1 Schritt vorwärts und 2 Schritte zurück zu sein. Ich habe eine Jquery-Funktion, die den Preis x Qty = Zwischensumme in der Form und dann jede Zwischensumme in eine Summe berechnet, die alles gut und Dandy ist. Ich habe dann eine einfache js-Funktion, die diesen Gesamtwert genommen hat und die gst und dann eine weitere Zwischensummenzahl hinzugefügt hat, die für sich selbst erstellt wurde und dann an diesem Punkt funktioniert, als ich versuchte, sie über die Gesamtfunktionen von gst und finial zu bewegen arbeiten und ich kann auch keine Fehlercodes daraus bekommen. An dieser Stelle kann ich nur annehmen, dass das js-Skript nicht mit dem Jquery-Skript sprechen kann oder etwas wirklich falsch ist.

// Jquery script 
<script type="text/javascript"> 
    jQuery(function($) { 
    $(".qty, .tradeprice").change(function() { 
     var total = 0; 
     $(".qty").each(function() { 
      var $qty = $(this), 
       $row = $qty.closest('tr'), 
       $tradePrice = $row.find('.tradeprice'), 
       $subtotal = $row.find('.subtotal'); 
      subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val()); 
      total += subtotal; 
      $subtotal.val(subtotal); 
     }); 
     $('.total').val(total); 
    }).change(); 
    }); 
</script> 


// JS script 
<script type="text/javascript"> 
    function updatePrice() { 
      // Get the ex-GST price from its form element 
    var exPrice = document.getElementById("ex-gst").value; 
    var gstPrice = document.getElementById("gst").value; 

    // Get the GST price 
    gstPrice = exPrice * 0.1; 
    var TPrice = parseInt(gstPrice) + parseInt(exPrice); 

    // Set the GST price in its form element 
    document.getElementById("gst").value = gstPrice; 
    document.getElementById("inc-gst").value = TPrice; 

    } 
</script> 

// bottom of HTML 
<form> 
    <table> 
     <tr> 
      <th><input type='text' name='po101' id='po101'/></th> 
      <td><input name='po102' type='text' id="po102"/></td> 
      <td><input name='po103' type='text' id="po103" /></td> 
      <td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td> 
      <th><input name='po105' type="text" class='qty' id="po105" value="0" /></th> 
      <td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td> 
     </tr> 
     <tr> 
      <th height='24' colspan="7">Total:<input type='text' id='Total' name='Total' class='total' readonly="true" onChange="updatePrice()"/></th> 
     </tr> 
     <tr> 
      <th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th> 
     </tr> 
     <tr> 
      <th height='24' colspan="7"> 
      <input type='text' id="gst" name='gst' onChange="updatePrice()" /> 
      <input type='text' id="inc-gst" name='inc-gst' onChange="updatePrice(this.form)"/> 
      </th> 
     </tr> 
    </table> 
</form> 

Answer 1

Ich habe jetzt von Code bearbeitet und verändert diese Zeile

var exPrice = document.getElementById("ex-gst").value; 

zu

var exPrice = document.getElementById("Total").value; 

ich auch den Code aktualisiert haben durch onChange() von HTML zu entfernen und hinzugefügt, um den Trigger für Ihre updatePrice() - Funktion für das Änderungsereignis.

Und das ist das Ergebnis (Ich habe auch die jQuery-Version als Kommentare hinzugefügt, beide werden funktionieren).

jQuery(function($) { 
 
     $(".qty, .tradeprice").change(function() { 
 
     var total = 0; 
 
     $(".qty").each(function() { 
 
      var $qty = $(this), 
 
      $row = $qty.closest('tr'), 
 
      $tradePrice = $row.find('.tradeprice'), 
 
      $subtotal = $row.find('.subtotal'); 
 
      subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val()); 
 
      total += subtotal; 
 
      $subtotal.val(subtotal); 
 
     }); 
 
     $('.total').val(total); 
 
     updatePrice(); 
 
     }).change(); 
 
    }); 
 

 
    function updatePrice() { 
 
     // Get the ex-GST price from its form element 
 
     var exPrice = document.getElementById("Total").value; 
 
     //var exPrice = $('#Total').val() //this is jQuery 
 
     var gstPrice = document.getElementById("gst").value; 
 
     //var exPrice = $('#gst').val() //this is jQuery 
 

 
     // Get the GST price 
 
     gstPrice = exPrice * 0.1; 
 
     var TPrice = parseInt(gstPrice) + parseInt(exPrice); 
 

 
     // Set the GST price in its form element 
 
     document.getElementById("gst").value = gstPrice; 
 
     //$('#gst').val(gstPrice) //this is jQuery 
 
     document.getElementById("inc-gst").value = TPrice; 
 
     //$('#inc-gst').val(TPrice) //this is jQuery 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <table> 
 
    <tr> 
 
     <th> 
 
     <input type='text' name='po101' id='po101' /> 
 
     </th> 
 
     <td> 
 
     <input name='po102' type='text' id="po102" /> 
 
     </td> 
 
     <td> 
 
     <input name='po103' type='text' id="po103" /> 
 
     </td> 
 
     <td>$ 
 
     <input name='po104' type="text" class='tradeprice' id="po104" value="0" /> 
 
     </td> 
 
     <th> 
 
     <input name='po105' type="text" class='qty' id="po105" value="0" /> 
 
     </th> 
 
     <td> 
 
     <input name='po106' type='text' class='subtotal' id="po106" readonly="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7">Total: 
 
     <input type='text' id='Total' name='Total' class='total' readonly="true" /> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7"> 
 
     <div id='submit'> 
 
      <input type='submit' /> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7"> 
 
     <input type='text' id="gst" name='gst' /> 
 
     <input type='text' id="inc-gst" name='inc-gst' /> 
 
     </th> 
 
    </tr> 
 
    </table> 
 
</form>