php (jquery/javascript) calculator that reload in real time

[chrisschristou]

hello friends
i want to creat a calculator in my form for calculate total price in real time for exemple" total field = price field + quantity field"
my form is a html form and price value is php value

<form action="" method="post" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">

        <input name="price" type="text" id="pricefield" value="<?php echo $row_itemdetaille['price']; ?>" readonly>
        <input name="quantity" type="number" min="1" max="20" value="1" id="quantityfield">
        <input name="total" type="text" id="totalfield" value="total" readonly>
        </form>

i can make calculator in php but i must submit what i want is change total directly when quantity change.
i need help friends

[broj1]

Use javascript and on change event on the quantitiy input field that would triger a function. Something like (not tested):

<input name="quantity" type="number" min="1" max="20" value="1" id="quantityfield" onchange="updateQuantity();">
...
<script type="text/javascript">
function updateQuantity() {
    var quantity = document.getElementById("quantityfield").value;
    var price = <?php echo $row_itemdetaille['price']; ?>;
    document.getElementById("totalfield").value = quantity * price;
}
</script>

or jquery version (again not tested since it is getting quite late here)

$("#quantityfield").change(function() {
    $("#totalfield").val(
        $("#quantityfield").val() * <?php echo $row_itemdetaille['price']; ?>;
    )
});

[broj1]

OK, this is tested jquery, nicely broken down so it can be easily understood :-)

$("#quantityfield").change(function() {
    var value = parseFloat(<?php echo $row_itemdetaille['price']; ?>);
    var quantity = parseInt($("#quantityfield").val());
    var total = value * quantity;
    $("#totalfield").val(total.toString());
});

[chrisschristou]

one more question how to use jquery????
i must download and what next??

[broj1]

You can either download it to your local (or any other) server or just include it from one of the CDNs (content delivery networks) which in my opinion is better method, since:
- it is always there for you, hosted on reliable server
- it is tuned for good performance (caching, availability...)

You can download jquery from here: http://jquery.com/download/. Choose the newest version if you do not have any legacy code. Download it to a directory that is readable by your web server and reference it in your scripts.

If you include it form the CDN just put the scriot tags in the head of html pointing to the jquery URL, like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

See https://developers.google.com/speed/libraries/devguide.

Then put the code snippet from the above to the end of the html body - just before the closing </body> tag.

...
<script type="text/javascript">
    $("#quantityfield").change(function() {
        var value = parseFloat(<?php echo $row_itemdetaille['price']; ?>);
        var quantity = parseInt($("#quantityfield").val());
        var total = value * quantity;
        $("#totalfield").val(total.toString());
    });
</script>
</body>
</html>

[chrisschristou]

hello MERY CHRISTMAS
thank you it was very easy to install jquery and the code i give work directly without problem thank you.
1.but the field total is empty when i start the page, it get value just when add value to quantity.
2. the float don't work for per exemple 2.50 it give 2.5 but for 2.75 is work fine like usualy float.
i tried thsi but still same $("#totalfield").val(total.toString()).toFixed(2); });

[diafol]

If you do toString, I can't see that toFixed should work on a string.

[broj1]

1.but the field total is empty when add value to quantity

Establish initial values and put them into the input fields.

1. the float don't work for per exemple 2.50 it give 2.5 but for 2.75 is work fine like usualy float.

Get rid of the toString() method since toFixed() already returns a string. Use number_format() in PHP part for the same purpose.

<?php 
// number of decimals
$NoOfDecimals = 2;
// initial values for quantity and total
$initialQuantity = 1;
$initialTotal = number_format($initialQuantity * $row_itemdetaille['price'], $NoOfDecimals);
?>
<form action="" method="post" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">
<input name="price" type="text" id="pricefield" value="<?php echo $row_itemdetaille['price']; ?>" readonly>
<input name="quantity" type="number" min="1" max="20" value="<?php echo $initialQuantity;?>" id="quantityfield">
<input name="total" type="text" id="totalfield" value="<?php echo $initialTotal;?>" readonly>
</form>

<script type="text/javascript">
$("#quantityfield").change(function() {
var value = parseFloat(<?php echo $row_itemdetaille['price']; ?>);
var quantity = parseInt($("#quantityfield").val());
var total = value * quantity;
$("#totalfield").val(total.toFixed(<?php echo $NoOfDecimals;?>));
});
</script>
</body>

[chrisschristou]

thank you!!

[broj1]

You are welcome. If that solves the problem, please mark it as solved. Happy coding in 2014.

[chrisschristou]

just one last question: how to add option field to calculator
tried this to add code on line 2 and 6 but didn't work

<script type="text/javascript">
 $("#selectfield").change(function() {//i tried to add this  function for option field
$("#quantityfield").change(function() {
var value = parseFloat(<?php echo $row_itemdetaille['prix']; ?>);
var quantity = parseInt($("#quantityfield").val());
var $shipping = parseFloat($("lelect[option='selected']"));// i tried to add this
var total = value * quantity + shipping;
$("#totalfield").val(total.toFixed(<?php echo $NoOfDecimals;?>));
}
 });
</script>

and this is the option field.

<option value="0" selected="selected">Shipping</option>
           <option value="0">0.00</option>
           <option value="9.80">9.85</option>
           <option value="19.60">19.80</option>
         </select>

and i want know how to add radio button group to jquerry calculator.
and check box.