Tutorial :jQuery calculation



Question:

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/ http://img707.imageshack.us/img707/5216/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.


Solution:1

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.


Solution:2

$(textbox1).change(function(event) {    $(textbox2).val($(this).val() / 2.54);  })  


Solution:3

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

$("#leftText").change(function()  {     $("#rightText").val($("#leftText").val() * factors[$("#centerDDL").val()]);  });  


Solution:4

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »