代码之家 › 专栏 › 技术社区 › Adrian

使用PHP/MySQL值的jQuery数学

math mysql jquery

Adrian · 技术社区 · 8 年前

我试图从一个数字中减去一个百分比,并使用jQuery将其显示在输入中,但表单使用PHP/MySQL引入值。

我在select字段上使用了一个额外的属性,因为该值是一个唯一的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。

2 回复 | 直到 8 年前

mgiadach 8 年前

问题是您没有正确获取折扣属性。如果在执行以下行后检查折扣变量的值:

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>

Roy Bogado 8 年前

问题是你正在做 sum() 在每个点击在输入上。
你必须这样做 总和() 每次 选择更改 .

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