calculate form fields using jquery

Question

i want a jquery source to calculate my form

<form>
      <input type="radio" name="type" value="1000"> $1000
      <input type="radio" name="type" value="2000"> $2000
      <input type="radio" name="type" value="3000"> $3000
      <input type="radio" name="type" value="4000"> $4000
      <input type="radio" name="type" value="5000"> $5000

    <select name="number">
      <option name="number" value="1">1</option>
      <option name="number" value="1">2</option>
      <option name="number" value="1">3</option>
      <option name="number" value="1">4</option>
      <option name="number" value="1">5</option>
    </select>

</form>

must type*number and show total in text input

Have you tried anything -- please show code that does not work. — Hogan, Jun 03 '11 at 17:54

score 3 · Accepted Answer · answered Jun 03 '11 at 18:08

You can bind a change() to both the :radio and <select/> elements to calculate the total.

$("select[name='number'], :radio[name='type']").change(function(){
    var $r = $(":radio[name='type']:checked");
    var $d = $("select[name='number']");
    if($r.length ==1){
        var t = parseInt($r.val(), 10);
        var n = parseInt($d.val(), 10);
        $("#result").val(t*n);
    }
});

Example on jsfiddle

score 2 · Answer 2 · answered Aug 25 '15 at 16:38

Here's what I got

http://jsfiddle.net/04gqaLog/2/

$(document).ready(function() {
    $("input[type='radio']").on("click", function() {
        var price = +$(this).attr("value");
        var quantity = +$("option:selected").text();
        $("#total").text(price * quantity);
    });
});

Fun Tip: You can use + to automatically convert a string to a number. It's much shorter than parseInt or Number.

score 1 · Answer 3 · answered Jun 03 '11 at 18:19

Demo: http://jsfiddle.net/wdm954/enKV6/

$('select[name=number]').change(compute);
$('input[name=type]').change(compute);

function compute() {
    if ( $('input[name=type]:checked').val() != undefined ) {
        var a = $('input[name=type]:checked').val();
        var b = $('select[name=number]').val();
        var total = a * b;
        $('#total').val(total);
    }
}

calculate form fields using jquery

3 Answers3