联系表格7,计算报价显示提交价格

时间:2016-08-31 03:08:23

标签: javascript php jquery html5 css3

我在网站上使用联系表格7,我想要一个计算报价功能,用户可以输入多少米宽的车道和混凝土的表面处理类型。在他们输入表格中的详细信息后,他们点击计算报价并显示价格。

目前,只要尺寸变化(宽/长),价格就会出现。

如何点击以显示价格。我一直绞尽脑汁。 (相对较新的jquery)

网站页面为http://x.aiadstaging.com.au/projects/fdmconcreting.com.au/calculate-quote/

联系表格7表格代码和jquery是:

if
// wpcf7_caculate_quote.js
function caculate_quote($form, ev) {
	var $ = jQuery, $quoteTotal = $form.find('.quote-total');
	var $drivewayMeters = $form.find('[name="driveway-meters"]');
	var $footpathMeters = $form.find('[name="footpath-meters"]');

	var $finish = $form.find('[name="finish"]');
	var $totalQuote = $form.find('[name="total-quote"]');
	var total = 0;
	total = parseInt( $drivewayMeters.val() );
	total += parseInt( $footpathMeters.val() ) * parseInt($finish.val().replace(/^\$(\d+) /, '$1'))

	$totalQuote.val( total );
	$quoteTotal.html( '$' + $totalQuote.val() );
	if( total > 0 ) {
		$form.find('.head-title').removeClass('hide');
		$form.find('.your-info').removeClass('hide');
		
	} else {
		$form.find('.head-title').addClass('hide');
		$form.find('.your-info').addClass('hide');
	}
	return;
}
function hasEmptyValues($elements) {
	var res = false, $ = jQuery;
	$elements.each(function() {
		if( $.trim(this.value) == '') {
			res = true;
			return false;
		}
	});
	return res;
}
jQuery(function($){
	var forms = document.querySelectorAll('form.wpcf7-form');
	for( var i=0; i<forms.length; i++) {
		(function($form) {
			if( $form.find('#contact-me, #email-quote, #caculate-quote').length == 3 ) {
				// caculate_quote.call($form[0], $form);
				var $line1 = $form.find('[name="email-phone"], [name="your-name"], [name="post-code"]');
				var $line2 = $form.find('[name="your-email"], [name="your-name1"], [name="post-code1"]');
				$line1.bind('change.submit', function(ev) {
					if( hasEmptyValues($line1) ) {
						$form.find('.btn-contact-me').attr('disabled', 'disabled');
					} else {
						$form.find('.btn-contact-me').removeAttr('disabled');
					}
				});
				$line1.change();

				$line2.bind('change.submit', function(ev) {
					if( hasEmptyValues($line2) ) {
						$form.find('.btn-email-quote').attr('disabled', 'disabled');
					} else {
						$form.find('.btn-email-quote').removeAttr('disabled');
					}
				});
				$line2.change();

				var j=0, $elements = $form.find('select.change-quote, input.change-quote');
				for(j=0; j < $elements.length; j++) {
					if( $elements[j].type == 'submit' ) {
						continue;
					}
					if( $elements[j].type == 'checkbox' || $elements[j].type == 'radio' ) {
						$($elements[j]).bind('click.caculate', function(ev) {
							return caculate_quote.call(this, $form, ev);
						});
						continue;
					}
					$($elements[j]).bind('change.caculate', function(ev) {
						return caculate_quote.call(this, $form, ev);
					});
				}
				
				$form.unbind('submit.caculate').bind('submit.caculate', function(ev) {
					// ev.preventDefault();
					// return false;
					return caculate_quote.call(this, $form, ev);
				});
				var data = $._data( forms[i] ), firstClick = false;
				if( data && ('events' in data) && ('submit' in data.events) && (data.events.submit.length > 1) ) {
					if( data.events.submit[1].namespace == 'caculate' ) {
						var bk = data.events.submit[1];
						data.events.submit[1] = data.events.submit[0];
						data.events.submit[0] = bk;
						bk._handler = bk.handler;
						bk.handler = function(ev) {
							var $yourInfo = $form.find('.your-info');
							if( firstClick ) {
								caculate_quote.call($form[0], $form);
								firstClick = true;
							}
							if( $yourInfo.hasClass('.hide') || 
								!$.trim( $yourInfo.find('[name="email-phone"]').val() ) || 
								!$.trim( $yourInfo.find('[name="your-name"]').val() ) || 
								!$.trim( $yourInfo.find('[name="post-code"]').val() ) || 
								!$.trim( $yourInfo.find('[name="your-email"]').val() ) || 
								!$.trim( $yourInfo.find('[name="your-name1"]').val() ) || 
								!$.trim( $yourInfo.find('[name="post-code1"]').val() ) 
								) {
								ev.preventDefault();
								return false;
							}
							return bk._handler.call(this, ev);
						}
					}
				}
			}
			
		})( $(forms[i]) );
		
	}
});

0 个答案:

没有答案