Using JQuery to handle the selection of dropdown

Question

How to use JQuery to handle the selection of the input do the calculation and display the results.

<input type="text" id="num1"/>

<select name="Calc">
  <option value="add">ADD</option>
  <option value="subtract">SUBTRACT</option>
  <option value="multiply">MULTIPLY</option>
  <option value="divide">DIVIDE</option>
</select>

<input type="text" id="num2"/>

<button id="Calculate">CALCULATE</button>
<button id="clear">CLEAR</button>
Calculated Value:
<div class="valueDisp">
<div id="calc_value">
</div>
</div>

$('input[name=Calc]').ready(function () {
    var selected = $(this).val();
    var num1 = $('#num1').val();
    var num2 = $('#num2').val();
    if (selected == 'add') var total = +num1 + +num2;
    else if (selected == 'subtract') var total = num1 - num2;
    else if (selected == 'multiply') var total = num1 * num2;
    else if (selected == 'divide') var total = num1 / num2;
    else var total = ("Please select an option");
    $("#calculate").click(function () {});
    $("#clear").click(function () {
        $('.input').val("");
    });
    $("#calc_value").html(total);
});

I have the following : http://jsfiddle.net/kHtHA/5/

The Alpha · Accepted Answer · 2013-10-16 01:42:13Z

2

You may try this (check the value attribute of select, changed it, but there are other ways)

<option value="add">ADD</option>

become

<option value="+">ADD</option> <!--and so on-->

JS:

$(document).ready(function () {
    $('#Calculate').click(function(){
        var operand = $('select[name=Calc]').val();
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        if(num1.match(/\d/) && num2.match(/\d/)) {
            var total = eval(num1 + operand + num2);
            $("#calc_value").html(total);
        }
    });
});

DEMO.

edited Oct 16, 2013 at 1:42

answered Oct 16, 2013 at 1:35

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

Comments

lastr2d2 · Accepted Answer · 2013-10-16 01:30:10Z

1

Check the update : http://jsfiddle.net/kHtHA/7/

    var doCalculate = function () {
        var selected = $('select[name="Calc"]:eq(0)').val();
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        if (selected == 'add') var total = +num1 + +num2;
        else if (selected == 'subtract') var total = num1 - num2;
        else if (selected == 'multiply') var total = num1 * num2;
        else if (selected == 'divide') var total = num1 / num2;
        else var total = ("Please select an option");
        $("#calc_value").html(total);
    };
    $('#Calculate').click(doCalculate);
    $('select[name="Calc"]').change(doCalculate);

answered Oct 16, 2013 at 1:30

lastr2d2

4,0243 gold badges27 silver badges43 bronze badges

Comments

Howard · Accepted Answer · 2013-10-16 01:48:32Z

Not 100% sure what you want. A fiddle update: http://jsfiddle.net/kHtHA/14/.

$('#Calculate').on('click', function(e){
    var num1 = parseInt($('#num1').val());
    var num2 = parseInt($('#num2').val());

    if(isNaN(num1) || isNaN(num2)){
        return;
    }

    var operator = $('select[name=Calc]').val();
    var total;
    switch(operator){
        case "add":
            total = num1 + num2;
            break;
        case "subtract":
            total = num1 - num2;
            break;
        case "multiply":
            total = num1 * num2;
        break;
        case "divide":
            total = num1 / num2;
            break;
    }

    $('#calc_value').html(total);
});

$('#clear').on('click', function(e){
    $('#num1').val("");
    $('#num2').val("");
});

Collectives™ on Stack Overflow

Using JQuery to handle the selection of dropdown

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related