CODEWITHSUNDEEP
javascriptinputfieldauto-update
Jack_D
Jack_D

Reputation: 75

How to auto update a price based on form field type="number"

If I have created an order form, and want to allow the user to select the product quantity using a number-based input using form type of "number", what event would you use to fire a calculation of total cost? I've tried oninput, but it simply outputs the error "Uncaught TypeError: Object [object Object] has no method 'oninput'"

For example, this code:

<label>Number of products:</label> <input name="product" id="product" type="number" /> Total Value: $ <span id="result"></span>​

and calculation:

jQuery(document).ready(function(){
jQuery('#product').oninput(function(){
    jQuery('#result').text(jQuery('#product').val() * 25.99);
});

});​

http://jsfiddle.net/7BDwP/806/

Upvotes: 2

Views: 3228

Answers (1)

Radu
Radu

Reputation: 8699

You need to use the change event.

$(document).ready(function(){
    $('#product').change(function(){
        $('#result').text($(this).val() * 25.99);
    });    
});​

Also, you might want to add a minimum value for your input field:

<input name="shares" id="product" type="number" min=0 />

Upvotes: 4

Related Questions