Jquery Calculator

I am trying to build a HTML / Jquery calculator 开发者_如何学Gowhere a user inputs a value into a text box "Average product unit value" and then another value into "Total unit sales volume".

Once the values have been inputted I need those values to be multiplied by one another to generate a value for "Total sales value" but there is no submit button - think as soon as the user clicks outside of the text box that is when the calculation needs to happen.

If a submit button is a MUST then I am happy to but the current requirement is to not have one.

I do not know where to begin writing the logic to be able to do this - I am a novice when it comes to Jquery as I am still learning it.

here is the code to help

All suggestions are welcome - hope the image helps

Jordy

Here's the basics. I'm sure you can finish it from here, but if not, post your HTML and the formula you want to use.

EDIT: Updated to use your HTML.

Working example available

$(document).ready(function()
{
    $('input').change(function()
    {
        var answer = parseInt($('#product-unit-val').val()) * parseInt($('#total-unit-sales').val()) * parseInt($('#number-reps').val());
        $('#sales-val').html('$' + answer);
    });
});

If this is the HTML:

Average product unit value <input type="text" id="product-unit-val" /><br/>
Total unit sales value <input type="text" id="total-unit-sales" /><br/>
Number of reps <input type="text" id="number-reps" /><br/>
Total sales value <span id="sales-val"></span>$

This is the jquery that makes the magic:

$(function() {
  $('#product-unit-val, #total-unit-sales, #number-reps').change(function() {
   var total = parseInt($("#product-unit-val").val()) *  parseInt($("#total-unit-sales").val()) * parseInt($("#number-reps").val());
   if (!isNaN(total)) {
      $("#sales-val").html(total);
   }
  });
});

The first line executes the code only after initialization. Second line:

$('#product-unit-val, #total-unit-sales, #number-reps').change(function() {

says that next function will be executed if something changes. Next line is the operation: parseInt is not absolutly necessary, but it is useful sometimes (use parseFloat if your values are float). Lines like $("#ID").val() says: give me the value of this ID item. I've added a NaN (Not a Number) test to avoid bad results when not all values are set.

Note also that your calculator responds every time user changes an input box, it is the user should do a click outside the input. If you want that your calculator runs on each key change the line:

  $('#product-unit-val, #total-unit-sales, #number-reps').change(function() {

by

  $('#product-unit-val, #total-unit-sales, #number-reps').keyup(function() {

There is a working demo here.

How about using jQuery's .change method?

$(".input").change(function (){
//check if both have data
//do the calculation
//save the value
});

Anytime an input field changes, this event will fire

Just attach an onChange to each of the textboxes that calls your function that retrieves and multiplies the values and updates the total. The function should screen for bad input.

I would attach a onkeyup and onblur event handler to the various text fields. On those events, call your function that does the simple math and outputs the value to the final text box. Make sure you take care to take care of bad input which will result in a NaN output