实时自动计算总价值表格

Question

我打算创建一个实时自动计算表单，收集所有（或某些）集合中产品的价格，并总结一些元素（当然值是整数，例如额外费用，修改，... ）。

这是Shopify平台，我创建了一个脚本，从下拉列表中选择特定产品的价格。

我无法通过select选项选择一些元素来进行计算。

这个想法来自这条指令：http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

以下是代码：产品的代码价格在我的shopify网站上运行良好但是当我把它放在这个代码片段中时，它不起作用。

$(function(){
		$('select[name="Menu"]').change(function(){
			var textId= $(this).data('text');
			var price = $( "option:selected" , this).data('price');
			$('#'+textId).val(price);  
		});
	});

	$.fn.fonkTopla = function() {
		var total = 0;
		this.each(function() {
			var deger = fonkDeger($(this).val());
			total += deger;
		});
		return total;
	};


	function fonkDeger(veri) {
		return (veri != '') ? parseInt(veri) : 0;
	}

	$(document).ready(function(){
		$('input[name^="inptxt1"]').bind('keyup', function() {
			$('#total').html( $('input[name^="inptxt1"]').fonkTopla());
		});
	});


	function getPrice()
	{
		//Assume form with id="theform"
		var theForm = document.forms["calculate"];
		//Get a reference to the TextBox
		var price = theForm.elements["inptxt1"];
		var howmany =0;
		//If the textbox is not blank
		if(inptxt1.value!="")
		{
			howmany = parseInt(inptxt1.value);
		}
		return howmany;
	}

	var filling_prices= new Array();
	filling_prices["Selection"]=0;
	filling_prices["Fee1"]=3;
	filling_prices["Fee2"]=10;
	
	//This function finds the filling price based on the
	//drop down selection
	function getFillingPrice()
	{
		var optFillingPrice=0;
		//Get a reference to the form id="calculate"
		var theForm = document.forms["calculate"];
		//Get a reference to the select id="filling"
		var selectedFilling = theForm.elements["filling"];

		//set cakeFilling Price equal to value user chose
		//For example filling_prices["Lemon".value] would be equal to 5
		optFillingPrice = filling_prices[selectedFilling.value];

		//finally we return cakeFillingPrice
		return optFillingPrice;
	}

	function getTotal()
	{
		//Here we get the total price by calling our function
		//Each function returns a number so by calling them we add the values they return together
		var lastPrice = getPrice() + getFillingPrice()

		//display the result
		document.getElementById('totalP').innerHTML =
			"Total Price is: "+lastPrice;

	}

<form action="" id="calculate">
					<select name="Menu" data-text="inptxt1">
						<option value="0" data-price="0">-- Select --</option>
            <option value="10" data-price="10">10$</option>
            <option value="20" data-price="20">20$</option>
						<!-- this one takes price of product in Shopify collection{% for product in collections.all.products %}
						<option value="{{ product.id }}" data-price="{{ product.price | ceil }}">{{ product.name}}</option>
						{% endfor %}-->
					</select>
					<input type="text" name="inptxt1" id="inptxt1" readonly/>	
					<select id="filling" name='filling'	onchange="calculateTotal()">
						<option value="Selection">-- Select --</option>
						<option value="Fee1">Extra fee 1</option>
						<option value="Fee2">Extra fee 2</option>
					</select>
					Total: <div id="totalP"></div>
				</form>