Jquery input field calculation

Question

I am trying to perform simple calculation using Jquery on input fields but cannot make it work.

<label for="a"><input type="number" id="a" value="1" size="2" maxlength="1"></label>
<label for="b"><input type="number" id="b" value="1" size="2" maxlength="1"></label>

<div class="button">
<a name="qtybutton" onClick="calculation()">update</a>
</div>

<script>
function calculation() {
    variable = new XMLHttpRequest();

    var total = 0;
    var sqty = $('#a').val();
    var itemprice = $('#b').val();
    var total = sqty * itemprice;

    $('#total').val(total);
    alert("OK");
}
</script>

I get alert "OK" so at least I know that jquery function is working, but no calculation is performed. I would be thankful for any suggestions.

Where is your <input id='total' type='text' /> element? You need an input to set the value of. — programking
– programking, Commented Dec 14, 2014 at 20:59

programking · Accepted Answer · 2014-12-14 21:04:13Z

1

The .val() function usually is associated with inputs, whereas the .html() function puts text inside of an element. Try this:

function calculation() {
    variable = new XMLHttpRequest();

    var total = 0;
    var sqty = $('#a').val();
    var itemprice = $('#b').val();
    var total = sqty * itemprice;

    $('#total').html(total);
    alert("OK");
}

answered Dec 14, 2014 at 21:04

programking

1,3762 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Verhaeren · Accepted Answer · 2014-12-14 21:00:50Z

1

It will work when you have an element named total:

<label for="a"><input type="number" id="a" value="1" size="2" maxlength="1"></label>
<label for="b"><input type="number" id="b" value="1" size="2" maxlength="1"></label>
<label for="total"><input type="number" id="total"  size="2"></label>

<div class="button">
<a name="qtybutton" onClick="calculation()">update</a>
</div>

Check it: http://jsfiddle.net/chc2v5qe/

answered Dec 14, 2014 at 21:00

Verhaeren

1,6539 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery input field calculation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related