jQuery maths using PHP/MySQL values

Question

I am trying to subtract a percentage from a number and have it display in an input using jQuery, but the form is pulling in values using PHP/MySQL.

I'm using an extra attribute on the select field because the value is a unique ID to be posted back to a different table on the database, this is what I have:

<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>

There are no errors in the console when loading the form but each time I select a different discount, the value of the total input just stays at 0.

can you not let PHP put an extra attribute in the options tag? (eg. data-discount="") and than read that value with jQuery? — Lexib0y
– Lexib0y, Commented Dec 27, 2017 at 15:02
FYI, you can always make extra attributes, from html5 it is officialy supported with the naming convention that custom attributes should start their name with data- — Lexib0y
– Lexib0y, Commented Dec 27, 2017 at 15:08
Have edited the original question which now uses the newly created data-discount attribute because nothing seems to be happening. — Adrian
– Adrian, Commented Dec 27, 2017 at 15:15
I have amended the original script again as I have simplified the jquery, when I set the output (last line) to the var amount, 250.00 appears in the input which would be correct, when I set it to var discount then 0 appears when No discount is selected but when another is selected, it stays at 0, therefore if I set it to var maths1 as it is in the example, the maths wont work. — Adrian
– Adrian, Commented Dec 27, 2017 at 16:11

mgiadach · Accepted Answer · 2017-12-27 16:23:27Z

The problem is you are not getting the discount attribute properly. If you inspect the value of discount variable after the execution of the following line:

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

It will always return "0", because jQuery("#invdiscount option") is selecting all the options from the select box, not the selected one.

To get the discount attribute from the selected option, you can use jQuery("#invdiscount option:selected").attr("data-discount") (Note the :selected after option).

Also, if you want to get the input updated after selecting the option, you should listen for the change event in the select element.

The working code would look like this:

<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>

Finally, you could use jQuery methods to get and and assign values instead of using plain javascript. The code would look like this:

<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>

Thank you, I added :selected to var discount, changed the listener to on.("change" and I also added .toFixed(2) at the end of the value to display in the input to force 2 decimal places, works a charm, thank you.
Another improvement might be to extend the selector to $('#invdiscount,#invamount'), as this will trigger the calculation whenever the amount or the discount changes.

Roy Bogado · Accepted Answer · 2017-12-27 16:15:25Z

1

the problem is that you are doing sum() on each click on the input.
And you have to do sum() each time the select change.

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

answered Dec 27, 2017 at 16:15

Roy Bogado

4,4721 gold badge18 silver badges36 bronze badges

Collectives™ on Stack Overflow

jQuery maths using PHP/MySQL values

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related