我在网站上使用联系表格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]) );
}
});