Javascript 联系表格7，计算报价，提交时显示价格

我在一个网站上使用联系表7，我想要一个计算报价功能，用户可以输入车道的宽度和长度以及混凝土的饰面类型。在表单中输入详细信息后，他们点击calculate quote并显示价格

目前，只要尺寸变化（宽/长），价格就会显示出来

如何在单击时显示价格。我一直在绞尽脑汁。（对jquery来说相对较新）

网站页面是

联系表格7表格代码和jquery为：

//wpcf7\u caculate\u quote.js
功能计算报价（$form，ev）{
var$=jQuery，$quoteTotal=$form.find（'.quote-total'）；
var$drivewayMeters=$form.find（'[name=“drivewayMeters”]'）；
var$footpathMeters=$form.find（'[name=“footpathMeters”]'）；
var$finish=$form.find（'[name=“finish”]'）；
var$totalQuote=$form.find（'[name=“total quote”]'）；
var合计=0；
总计=parseInt（$drivewayMeters.val（））；
总计+=parseInt（$footpathMeters.val（））*parseInt（$finish.val（）.replace（/^\$（\d+/，“$1”））
$totalQuote.val（总计）；
$quoteTotal.html（'$'+$totalQuote.val（））；
如果（总数>0）{
$form.find（'.head title'）.removeClass（'hide'）；
$form.find（'.your info'）.removeClass（'hide'）；
}否则{
$form.find（'.head title'）.addClass（'hide'）；
$form.find（'.your info'）.addClass（'hide'）；
}
返回；
}
函数hasEmptyValue（$elements）{
var res=false，$=jQuery；
$elements.each（函数（）{
如果（$.trim（此.value）=''）{
res=真；
返回false；
}
});
返回res；
}
jQuery（函数（$）{
var forms=document.querySelectorAll（'form.wpcf7 form'）；
对于（var i=0；i 1））{
if（data.events.submit[1]。命名空间==“计算”）{
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=函数（ev）{
var$yournfo=$form.find（'.yournfo'）；
如果（首次单击）{
计算调用（$form[0]，$form）；
firstClick=true；
}
如果（$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（$yourninfo.find（'[name=“your-name1”]'）.val（））|
！$.trim（$yourInfo.find（'[name=“post-code1”]'）.val（）
) {
ev.preventDefault（）；
返回false；
}
返回bk.(u handler.call)(this,ev);；
}
}
}
}
})（$（表格[i]）；
}
});

报价总额：0
不包括商品及服务税

您希望我们就此报价与您联系吗

[文本总报价id:总报价类别：总报价]
[文本*电子邮件电话id:电子邮件电话类别：电子邮件电话占位符“电子邮件或电话号码”][文本您的姓名id:您的姓名类别：您的姓名占位符“您的姓名”][文本邮编id:邮编类别：邮编占位符“邮编”][提交id:联系我类别：btn联系我“联系我”]
[电子邮件*您的电子邮件id:您的电子邮件类别：您的电子邮件占位符“电子邮件地址”][文本您的-name1 id:您的-name1类别：您的-name1占位符“您的姓名”][文本post-code1 id:post-code1类别：post-code1占位符“post Code”][提交id:电子邮件报价类别：btn电子邮件报价“电子邮件报价”]
步骤1您的车道有多宽？：[number*车道米最小值：0 id:车道米类别：车道米类别：更改报价“10”]米
步骤2您的车库离人行道有多远？：[number*footpath meters min:0 id:footpath meters class:footpath meters class:change quote“20”]米
步骤3选择混凝土饰面：[选择*饰面id:饰面等级：饰面等级：更改报价“$65平方米普通混凝土”$80平方米彩色混凝土“$120平方米外露骨料”$120平方米模板”]
[提交id:计算报价类：btn计算报价“计算报价”]