CODEWITHSUNDEEP
jquery
AnK
AnK

Reputation: 113

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>

Upvotes: 1

Views: 67

Answers (2)

Ritwika Das
Ritwika Das

Reputation: 199

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>

Upvotes: 0

Kung Fu Panda
Kung Fu Panda

Reputation: 648

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>

Upvotes: 3

Related Questions