使用PHP/MySQL值的jQuery數學計算

我想從數字中減去一個百分比，並在使用jQuery的輸入中顯示，但表單使用PHP/MySQL拉入值。使用PHP/MySQL值的jQuery數學計算

我使用的是選擇欄額外的屬性，因爲該值將被回發到數據庫的不同表的唯一ID，這是我有：

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invtotal").on("click", function() { 
     sum(); 
    }); 
}); 

function sum() { 
      var amount = document.getElementById('invamount').value; 
      var discount = jQuery("#invdiscount option").attr("data-discount"); 
      var maths1 = (discount * amount/100); 
      document.getElementById('invtotal').value = maths1; 
     } 
</script>

有沒有在控制檯錯誤加載窗體時，但每次我選擇一個不同的打折時間，總輸入的值只是停留在0

來源

2017-12-27 Adrian

你不能讓PHP在選項標記中加入額外的屬性嗎？（如數據折扣=「」），並閱讀與jQuery的價值？ – Lexib0y

好主意，讓我試試吧。 – Adrian

僅供參考，您可以隨時製作額外的屬性，從HTML5它是官方支持的命名約定，即自定義屬性應該以數據開始他們的名字 – Lexib0y

問題是您沒有正確獲得折扣屬性。如果檢查折扣變量的值下面一行執行後：

var discount = jQuery("#invdiscount option").attr("data-discount");

總是返回「0」，因爲jQuery("#invdiscount option")從選擇框，而不是選擇一個選擇所有選項。

要想從所選選項的折扣屬性，你可以使用jQuery("#invdiscount option:selected").attr("data-discount")（注：選擇後選項）。

另外，如果你想選擇該選項後，更新的輸入，你應該聽聽在的變化事件選擇元素。

工作的代碼應該是這樣的：

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
}); 

function sum() { 
      var amount = document.getElementById('invamount').value; 
      var discount = jQuery("#invdiscount option:selected").attr("data-discount"); 
      var maths1 = (discount * amount/100); 
      document.getElementById('invtotal').value = maths1; 
     } 
</script>

最後，你可以使用jQuery方法來獲取和並分配，而不是使用普通的JavaScript值。代碼將如下所示：

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
}); 

function sum() { 
    var amount = $("#invamount").val(); 
    var discount = jQuery("#invdiscount option:selected").attr("data-discount"); 
    var maths1 = (discount * amount/100); 
    jQuery("#invtotal").val(maths1); 
} 
</script>

來源

2017-12-27 16:23:27 mgiadach

謝謝，我補充說：選擇了VAR折扣，改變了監聽器上。（「改變」，我也添加.toFixed（2）在結尾處顯示值以強制輸入2位小數，作品魅力，謝謝。 – Adrian

另一個改進可能是將選擇器擴展爲'$（'＃invdiscount，＃invamount'）'，因爲只要金額或折扣發生更改，這將觸發計算。 – cars10m

的問題是，你在每個點擊輸入做sum()。
而且每次選擇更改時，您必須執行sum()。

jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
});

來源

2017-12-27 16:15:25 Roy

使用PHP/MySQL值的jQuery數學計算

回答

相關問題