0

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

Edited by chrisschristou

3
Contributors
10
Replies
68
Views
3 Years
Discussion Span
Last Post by chrisschristou
Featured Replies
  • 1

    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; … Read More

  • 1

    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()); }); Read More

  • 1

    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 … Read More

  • 1

    > 1.but the field total is empty when add value to quantity Establish initial values and put them into the input fields. > 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. Get rid of the toString() method … Read More

1

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']; ?>;
    )
});

Edited by broj1

1

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());
});
1

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>

Edited by broj1

0

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); });

1

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>

Edited by broj1

Votes + Comments
thank you solved... thank you
0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.