jQuery input fields calculation

Question

I'm new to jQuery and trying to make a simple calculator for car rental cost. It should take a number the person input and multiply it by value of a car they picked, on click. Below is what I have:

 <form>
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input name="type" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="type" value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="type" value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="type" value="800" type="radio"> BMW 535i</label>
                <label><input name="type" value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

And here is my jquery that I can't get to work

<script>
$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('select[name=type]').val();
        var b = $('input[name=kilo]').val();
        var total = a * b;
        $('#total').text(total);
    }                
);
});
</script>

Kung Fu Panda · Accepted Answer · 2017-05-12 07:05:49Z

3

Try below mentioned change:
Change this code var a = $('select[name=type]').val(); to var a = $('input[name=type]:checked').val();.

$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('input[name=type]:checked').val();
       
        var b = $('input[name=kilo]').val();
        
        var total = a * b;
         $('#total').text(total);
    }                
);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input name="type" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="type" value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="type" value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="type" value="800" type="radio"> BMW 535i</label>
                <label><input name="type" value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

answered May 12, 2017 at 7:05

Kung Fu Panda

64610 silver badges22 bronze badges

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

2 Comments

AnK Over a year ago

Ah...Can't believe I didn't think of it! Thank you very much, it works now!

Kung Fu Panda Over a year ago

:) welcome. If now your issue is solve please close this thread.

Ritwika Das · Accepted Answer · 2017-05-12 07:16:24Z

Please refer the fiddle Fiddle

$(document).ready(function(){
    $('.calc-button').on('click', function() {
        var a = $('input[name=radioName]:checked').val();
        var b = $('input[name=kilo]').val();
        var total = a * b;
        $('#total').text(total);
    }                
);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
        <div class="row">
            <div class="col-sm-4">
                <label>CAR</label>
            </div>
            <div class="col-sm-8">
                <label><input  name="radioName" value="800" type="radio"> Mercedez Benz</label>
                <label><input name="radioName"  value="800" type="radio"> Lexus LS 300h</label>
                <label><input name="radioName"  value="800" type="radio"> Audi A4 Avant</label>
                <label><input name="radioName" value="800" type="radio"> BMW 535i</label>
                <label><input name="radioName"  value="1000" type="radio"> Premium</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <label>KM</label>
            </div>
            <div class="col-sm-8">
                <label><input type="text" class="kilo" name="kilo">km</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Total</div>
            <div class="col-sm-8">
                $<p id="total"></p>
            </div>
        </div>
        <a class="calc-button" href="#">Count</a>
    </form>

Collectives™ on Stack Overflow

jQuery input fields calculation

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related