CODEWITHSUNDEEP
javascript
Gallex
Gallex

Reputation: 321

Calculate the volume

I would like to create similar calculator like here. It calculates the volume of a mulch. Visitor inserts three numbers: width, length and height (thickness) and it tells how much it has to buy.

html:

<form method="post" accept-charset="UTF-8">
<div class="form_area">

    <div class="form_fields">
        <div class="form_field   ">
            <label class="form_field_label">Width (m)</label>
            <input type="text" value="" name="laius" id="laius" rel="calc" class="form_field_textfield form_field_size_medium">
        </div>

        <div class="form_field   ">
            <label class="form_field_label">Length (m)</label>
            <input type="text" value="" name="pikkus" id="pikkus" rel="calc" class="form_field_textfield form_field_size_medium">
        </div>

        <div class="form_field   ">
            <label class="form_field_label">Thickness (cm)</label>
            <input type="text" value="" name="paksus" id="paksus" rel="calc" class="form_field_textfield form_field_size_medium">
        </div>

        <div class="form_field   ">
            <label class="form_field_label">Total (m<sup>3</sup>)</label>
            <input type="text" value="" readonly name="kokku" id="kokku" class="form_field_textfield form_field_size_small">
        </div>
    </div>

    <div class="form_submit">
        <input type="submit" value="Arvuta" id="calc_submit" name="commit">
    </div>
</div>
</form>

javascript:

    ! function($) {
    $(function() {
        $("[rel='calc']").arvutus();
    });

    $.fn.arvutus = function() {
        var inputs = $(this);
        var kokku = $("#kokku:first");

        inputs.bind("change keyup", function() {

            var obj = $(this);

            if (obj.val() !== "") {

                parseFloat(obj.val()).toFixed(2);
            };
            arvuta();
        });

        $("#calc_submit").bind("click", function(e) {
            e.preventDefault();
            arvuta();
        });

        function arvuta() {
            var width = inputs.filter("#laius").val();
            width = width.toString();
            width = width.replace(",", ".");
            var lenght = inputs.filter("#pikkus").val();
            lenght = lenght.toString();
            lenght = lenght.replace(",", ".");
            var thickness = inputs.filter("#paksus").val();
            thickness = thickness.toString();
            thickness = thickness.replace(",", ".");
            thickness = thickness / 100;
            var sum = width * lenght * thickness
            sum = sum.toFixed(2);
            kokku.val(sum + " m3 multši.");
        };
    };
  }(window.jQuery);

I inserted html and javascript into jsfiddle, but mine doesn't work. Probably i miss something very obvious. some more javascript?

update: a little while ago, somebody provided a working code, but moderator removed it so quickly i couldn't copy it... :(

Upvotes: 0

Views: 173

Answers (1)

Whothehellisthat
Whothehellisthat

Reputation: 2152

The code parseFloat(obj.val()).toFixed(2) returns a value, but you're not doing anything with it. Should it be stored somewhere so you can use it in calculating the volume?

Upvotes: 1

Related Questions