How to add function in jquery

[chrisschristou]

hello friends.
like the question title i want add function to my jquery script when a user choose a option of select html form field to calculate a totoal price. here is my script and the html form field
THE 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>

THE SCRIPT

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

Wasn't this part of a previous post? Anyway what's wrong with it?

[chrisschristou]

YES part of previus post it work fine.
when you user edit quantity the total update so a live calculator and now i just add a select field in my form and i want when user select a option the total must update update. here i my whole form and the select is not in script i want add it in script and calculate when a user select a option.

<form action="<?php echo $editFormAction; ?>" method="POST" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">
        Price:<input name="price" type="text" id="pricefield" value="<?php echo $row_itemdetaille['prix']; ?>" readonly>
        quantity:<input name="quantity" type="number" min="1" max="20" value="1" onKeyPress="calculateTotal()" id="quantityfield"><br>
        Shipping:<select name="Shipping" id="shipping">
        <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><br>
        total<input name="total" type="text" id="totalfield" value="<?php echo $initialTotal;?>" readonly>
         <input name="usercookie" type="hidden" value="<?php echo $hash; ?>">
         <input name="SKU" type="hidden" value="<?php echo $row_itemdetaille['sku'] ?>">
         <input name="addtocart" type="submit" id="submittocart" value="ADD TO CART">
         <input type="hidden" name="MM_insert" value="formulaireajout">
        </form>

I'm still unsure what you're getting at but I'm assuming that you want to calculate the total:

price * quantity + shipping

So - not much to change...

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

[chrisschristou]

exaclty it is what i want do.
but din't work and i tried to edit the code you give still din't work,
you can see on line 2 i tried to edit it but it din't work

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

The field is called 'shipping': <select name="Shipping" id="shipping"> isn't it? So I can't understand why...

$("#quantityfield,#shippingfield")

Have a look in the console of your browser to see where the errors are.

[chrisschristou]

i use firebug on firefox but no error is show on console :(

The following works for me:

<form action="" method="POST" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">
        <!--Replace value below with php value-->
        Price:<input name="price" type="text" id="pricefield" value="100" readonly>
        quantity:<input name="quantity" type="number" min="1" max="20" value="1" id="quantityfield"><br>
        Shipping:<select name="Shipping" id="shipping">
            <option value="0.00" selected>0.00</option>
           <option value="9.85">9.85</option>
           <option value="19.80">19.80</option>
         </select><br>
        total<input name="total" type="text" id="totalfield" value="0" readonly>
         <input name="usercookie" type="hidden" value="<?php echo $hash; ?>">
         <input name="SKU" type="hidden" value="<?php echo $row_itemdetaille['sku'] ?>">
         <input name="addtocart" type="submit" id="submittocart" value="ADD TO CART">
         <input type="hidden" name="MM_insert" value="formulaireajout">
        </form>

    <script type="text/javascript">

    function calculateTotal()
    {
        var value = parseFloat($('#pricefield').val());
        var quantity = parseFloat($("#quantityfield").val());
        var shipping = parseFloat($("#shipping").val());
        var total = (value * quantity + shipping);
        $("#totalfield").val(parseFloat(total).toFixed(2));
    }

    $("#quantityfield, #shipping").change(function() {
        calculateTotal();
    });

    calculateTotal();
    </script>

The last line of js runs the calculate after pageload.

[chrisschristou]

thank you it work maybe in this ways it will be easy next time if i want add check box field or other field