Question

我试图从一个数字中减去一个百分比并使用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。

Answer 1

问题是您在输入的每次点击上都在sum()。每次选择时您必须sum()更改。

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

Answer 2

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

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

它将始终返回＆＃34; 0＆＃34;，因为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>

使用PHP / MySQL值的jQuery数学

2 个答案: