Update Price Automatically When Quantity Changes on Click

I built a order form using WordPress Contact Form 7 plugin. I’m wanting to update the price automatically when quantity field’d value is changing on mouse click or key press.

See the animated image file. You can understand the requirement.

I added the simple JS code into my js file.

Assume your quantity field name is number-323 & price field name is number-450 . So JavaScript code will be like this:

jQuery(document).ready(function() {
  jQuery("input[name='number-323']").on('keyup mouseup', function() {
	var qty = jQuery("input[name='number-323']").val(),
	price = jQuery("input[name='number-450']").attr('placeholder'),
	newprice = price * parseInt( qty );

	jQuery("input[name='number-450']").val( newprice.toFixed(2) );
  });
});

You will setup the initial price value as a placeholder attribute. In this demo initial price value is 109.90.