views:

77

answers:

4

Hello, I am new to jQuery and I would like to know how to accomplish a simple calculation based on the value selected in the picklist. please see the below screen shot I put on ImageShack for reference.

http://img707.imageshack.us/i/imagebg.png/

I want to be able to show the result of the calculation in the text box at the right, If I enter number 2 on the text box on the left side and press Tab then the value of the text box on the right will update. If I can get to know how that works then I can take it from there. thank you very much in advance.

A: 
$(textbox1).change(function(event) {
  $(textbox2).val($(this).val() / 2.54);
})
thank you for your input.
Antonio
A: 

I should be something similar to this. You must provide the factors[] array.

$("#leftText").change(function()
{
   $("#rightText").val($("#leftText").val() * factors[$("#centerDDL").val()]);
});
James Curran
Thank you for your input James. I appreciate it.
Antonio
A: 

You will want to bind a blur event on your input field and a change event on your select field. These events should trigger a call to your calculate function that will read the values from each field, using val(), and perform the necessary calculation: inches to centimeter, inches to feet, etc.

If you post some of your HTML, I can add a code sample.

Jason McCreary
Thank you Jason, I appreciate your input.
Antonio
+1  A: 

Get the amount to convert from the text box (below named 'amount') and the conversion factor from the select list (below named 'scale') parsed as floating point numbers, then multiply the two and set that as the value of the conversion (below named 'converted').

$('#amount').change( function() {
    var amount = parseFloat( $(this).val() );
    var factor = parseFloat( $('#scale').val() );
    var converted = amount * factor;
    $('#converted').val( converted );
});

You'll need to do something similar for the select -- the first two lines change, but the rest can be shared.

tvanfosson
It works great. thank you very much. I can take it from here now.
Antonio
@tvanfosson - you could stay DRY by changing `this` to `#amount` and adding `, '#scale'` to the change event.
Jason McCreary
@Jason -- good observation. It does add a DOM traversal, but that's probably not a big deal.
tvanfosson