Javascript calculation function

Question

I was preparing a function in jquery to calculate the value of a variable based on selection of a radio button in a form.

Here is the fiddle

http://jsfiddle.net/GMrPS/

i was trying to do to calculate the value of javascript variable "calc_value" to show a value based on the selection of "rdOptin" radio button. But i am confused how to finish this.

I set the calculations but unable to implement it in jquery.

<form id="form1" name="form1" method="post" action="form1.php">
    <b> Option 1:</b>
    <input type="radio" name="rdOptin" value="norm" checked="checked" />Normal
    <input type="radio" name="rdOptin" value="exp" />Expert
    <br />
    <b>Calculated Value:</b>
    <div class="valueDisp">
        <div id="calc_value">
        </div>
    </div>

JS:

var var1 = 50;
var var2 = var1 * 5 / 100;
var var3 = 20;

if (rdOptin == norm)
    var calc_value = var1 + var2;

else if (rdOptin == exp)
    var calc_value = var1 + var2 + var3;

Help needed friends.

Thanks a lot in advance.

JavaScript != jQuery. So is this what you're trying to do: jsfiddle.net/GMrPS/1 — nnnnnn
– nnnnnn, Commented Jul 23, 2013 at 12:31
nnnnnn jquery !== javascript, bcs basically jquery is javascript — ccd580ac6753941c6f84fe2e19f229
– ccd580ac6753941c6f84fe2e19f229, Commented Jul 23, 2013 at 12:35
@ccd580ac6753941c6f84fe2e19f229 - Well, jQuery is JavaScript in the sense that Romeo & Juliet is the alphabet. Or...well, maybe that's overstating it a little, but you know what I mean. — nnnnnn
– nnnnnn, Commented Jul 23, 2013 at 12:48

Amit · Accepted Answer · 2013-07-23 12:37:58Z

2

Try this

$(function(){
    $("input:radio[name=rdOptin]").click(function() {

    var var1 = 50;
    var var2 = var1 * 5 / 100;
    var var3 = 20;
    var calcvalue=0;

    if ($(this).val() == "norm")
        calcvalue= var1 + var2;

    else if ($(this).val() == "exp")
      calcvalue = var1 + var2 + var3;
        alert(calcvalue);

    });    
});

Demo

answered Jul 23, 2013 at 12:37

Amit

15.4k8 gold badges49 silver badges69 bronze badges

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

Comments

Anton · Accepted Answer · 2013-07-23 12:49:56Z

1

You could use it like this to present the value

$(document).ready(function(){
    var var1 = 50;
    var var2 = var1 * 5 / 100;
    var var3 = 20;

    $('[value="norm"]').on('click',function(){
    var calc_value = var1 + var2;
        $('#calc_value').text(calc_value);
    });
    $('[value="exp"]').on('click',function(){

    var calc_value = var1 + var2 + var3;
           $('#calc_value').text(calc_value);
    });
});

Working demo here

edited Jul 23, 2013 at 12:49

answered Jul 23, 2013 at 12:36

Anton

32.6k5 gold badges47 silver badges54 bronze badges

2 Comments

ashis Over a year ago

but how can it be added to a .js page? i mean $(function) etc? can you please update in the fiddle? It will be a great help..

ashis Over a year ago

yeah exactly the same. Thanks :)

frogatto · Accepted Answer · 2013-07-23 12:37:10Z

1

You can use this code:

var var1 = 50;
var var2 = var1 * 5 / 100;
var var3 = 20;

if ($("input:radio[name=rdOptin]:checked").val() == "norm")
    $("div#calc_value").text(var1 + var2);
else if ($("input:radio[name=rdOptin]:checked").val() == "exp")
    $("div#calc_value").text(var1 + var2 + var3);

answered Jul 23, 2013 at 12:37

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

Comments

kbvishnu · Accepted Answer · 2013-07-23 12:44:44Z

1

HTML

<form id="form1" name="form1" method="post" action="form1.php"> <b> Option 1:</b>
             <input type="radio" name="rdOptin" value="norm"   />Normal
            <input type="radio" name="rdOptin" value="exp" id="rb2" />Expert
        <br />
        <b>Calculated Value:</b>
        <div class="valueDisp">
            <div id="calc_value">
            </div>
        </div>

jQuery

$('input[name=rdOptin]').click(function(){
    var selected=$(this).val();
    var var1 = 50;
    var var2 = var1 * 5 / 100;
    var var3 = 20;
    if (selected == 'norm'){
        $("#calc_value").html(var1 + var2);}
    else {
        $("#calc_value").html(var1 + var2 + var3);}

});

Demo http://jsfiddle.net/GMrPS/6/

answered Jul 23, 2013 at 12:44

kbvishnu

15.7k21 gold badges75 silver badges105 bronze badges

3 Comments

ashis Over a year ago

if i add the jquery code in a separate file as abc.js, only this code has to be added? or anything else is needed to be added there?

kbvishnu Over a year ago

@user2057047 no. But make sure that you changed all the places you referred the .js file with another name.

kbvishnu Over a year ago

@user2057047 please use a common place to include you css as well as you js files. So when you need to change anything, you can change only in one place.

Okazari · Accepted Answer · 2013-07-23 12:53:20Z

1

Seems like i'm a little late finishing my demo ... but this will work too :

$("[name=rdOptin]").click(function(event){

    var rdOptin = $("input[name=rdOptin]:checked").val();

    if (rdOptin == "norm")
        var calc_value = var1 + var2;

    else if (rdOptin == "exp")
        var calc_value = var1 + var2 + var3;

    $("#calc_value").text(calc_value);

});

http://jsfiddle.net/GMrPS/7/

answered Jul 23, 2013 at 12:53

Okazari

4,5971 gold badge17 silver badges27 bronze badges

1 Comment

ashis Over a year ago

still you get a thumsup. you are never late for helping. Thanks dude.

Collectives™ on Stack Overflow

Javascript calculation function

5 Answers 5

Comments

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related