Ana Kash Ana Kash - 6 months ago 35
jQuery Question

jQuery input fields calculation

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>

Answer Source

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>