如何使用jquery/javascript實時地乘以和求和表單值

你好Stackoverflow Coders編碼。我在線下載了該代碼，現在希望爲每個產品添加數量。我想要的是能夠將每個產品的價格乘以每次用戶選擇產品的數量時，它將乘以價格並顯示每個結果，然後總和所有計算，如果取決於數量選擇的產品項目。感謝如何使用jquery/javascript實時地乘以和求和表單值

來源：http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/

<html> 
    <head> 
     <title>Sum Html Textbox Values using jQuery/JavaScript</title> 
     <style> 
      body { 
       font-family: sans-serif; 
      } 
      #summation { 
       font-size: 18px; 
       font-weight: bold; 
       color:#174C68; 
      } 
.txt { 
       background-color: #FEFFB0; 
       font-weight: bold; 
       text-align: right; 
      } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> 

<th>no</th> 
<th>product</th> 
<th>price</th> 
<th>quantity</th> 

<tr> 
     <td width="40px">1</td> 
     <td>Butter</td> 
     <td><input class="txt" type="text" name="txt" value="500" /></td> 
<td><select name="qty" class="txt" /> 
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select></td> 
    </tr> 

    <tr> 


     <td>2</td> 
     <td>Cheese</td> 
     <td><input class="txt" type="text" name="txt" value="250"/></td> 
<td><select name="qty" class="txt" /> 
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Eggs</td> 
     <td><input class="txt" type="text" name="txt" value="400"/></td> 
<td><select name="qty" class="txt" /> 
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select></td> 
    </tr> 

    <tr id="summation"> 
     <td>&nbsp;</td> 
     <td align="right">Sum :</td> 
     <td align="center"><span id="sum">0</span></td> 

    </tr> 
</table> 

<script> 
    $(document).ready(function(){ 

     //iterate through each textboxes and add keyup 
     //handler to trigger sum event 
     $(".txt").each(function() { 

      $(this).keyup(function(){ 
       calculateSum(); 
      }); 
     }); 

    }); 

    function calculateSum() { 

     var sum = 0; 
     //iterate through each textboxes and add the values 
     $(".txt").each(function() { 

      //add only if the value is number 
      if(!isNaN(this.value) && this.value.length!=0) { 
       sum += parseFloat(this.value); 
      } 

     }); 
     //.toFixed() method will roundoff the final sum to 2 decimal places 
     $("#sum").html(sum.toFixed(2)); 
    } 
</script> 
</body> 
</html>

來源

2016-06-22 nackolysis

這需要在你的HTML和一些細微的變化JS像下面

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> 
    <th>no</th> 
    <th>product</th> 
    <th>price</th> 
    <th>quantity</th> 
    <tr> 
     <td width="40px">1</td> 
     <td>Butter</td> 
     <td><input class="txt" type="text" name="txt" value="500" /></td> 
     <td> 
     <select name="qty" class="qty-txt" /> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Cheese</td> 
     <td><input class="txt" type="text" name="txt" value="250"/></td> 
     <td> 
     <select name="qty" class="qty-txt" /> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Eggs</td> 
     <td><input class="txt" type="text" name="txt" value="400"/></td> 
     <td> 
     <select name="qty" class="qty-txt" /> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
     </td> 
    </tr> 
    <tr id="summation"> 
     <td>&nbsp;</td> 
     <td align="right">Sum :</td> 
     <td align="center"><span id="sum">0</span></td> 
    </tr> 
</table>

JS代碼：

$(document).ready(function() { 

    $(".txt").keyup(function() { 
     calculateSum(); 
    }); 

    $('.qty-txt').on('change', function() { 
     calculateSum(); 
    }); 

}); 

function calculateSum() { 

    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".txt").each(function() { 

     //add only if the value is number 
     if (!isNaN(this.value) && this.value.length != 0) { 
      //check cooresponding quantity 
      var qty = $(this).parents('tr').find('.qty-txt').val(); 
      sum += (parseFloat(this.value) * parseInt(qty, 10)); 
     } 

    }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
    $("#sum").html(sum.toFixed(2)); 
}

鏈接到fiddle。

來源

2016-06-22 00:47:26

請您知道如何通過ajax調用提交表單結果，包括總金額。我可以處理php部分，謝謝 – nackolysis

它看起來更像是這樣的：

使用<select> ID查找相關的價格。

$("select").on("change",function(){ 

    var sum = 0; 

    //iterate through each select and multiply the values 
    $("select").each(function(){ 
     thisID = $(this).attr("id").replace("-qty","-price"); 

     sum = sum + (parseInt($(this).val()) * parseInt($("#"+thisID).val())); 
    }); 

    //.toFixed() method will roundoff the final sum to 2 decimal places 
    $("#sum").html(sum.toFixed(2)); 
});

隨着對HTML作爲幾點變化：

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> 

<th>no</th> 
<th>product</th> 
<th>price</th> 
<th>quantity</th> 

<tr> 
    <td width="40px">1</td> 
    <td>Butter</td> 
    <td><input type="text" id="butter-price" class="txt" value="500"></td> 
    <td><select id="butter-qty" class="txt"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select></td> 
</tr> 

<tr> 
    <td>2</td> 
    <td>Cheese</td> 
    <td><input type="text" id="cheese-price" class="txt" value="250"></td> 
    <td><select id="cheese-qty" class="txt"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Eggs</td> 
     <td><input type="text" id="eggs-price" class="txt" value="400"></td> 
     <td><select id="eggs-qty" class="txt"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      </select></td> 
    </tr> 

    <tr id="summation"> 
     <td>&nbsp;</td> 
     <td align="right">Sum :</td> 
     <td align="center"><span id="sum">0</span></td> 
    </tr> 
</table>

見小提琴：https://jsfiddle.net/Bes7weB/544vun0r/

來源

2016-06-22 00:46:52

如何使用jquery/javascript實時地乘以和求和表單值

回答

相關問題