Question

我有一个表格用于计算要制造的产品的要求，fisrtly，即使用javascript也不是很好，其次我不知道是否有更简单的方法来编写这个功能。

基本上会发生什么，用户将填写表单中显示的前6个字段，然后单击calculate，我也使用表单的jquery验证插件，但客户端已请求显示错误消息计算值的值为0或Nan。

我的功能正常工作，但是如果有任何错误，我必须双击两次，我有一个隐藏的，当表单加载时显示（它不应该）并且我还添加了一个蓝色边框如果已经计算的值是正确的，如果它们不正确则为红色边框，下面是函数和表格。

<script type="text/javascript">

 $('#calculate').click(function() {
 var perlength = $("#plength").val();
 var pwidth = $("#pwidth").val();
 var nbeams = $("#nbeams").val();
 var hbeams = $("#hbeams").val();
 var wbeams = $("#wbeams").val();
 var nstrips = $("#nstrips").val();

 var nspacebeams = nbeams - 1;
 var beamspace = perlength - wbeams / 1000;
 var mbeamspace = beamspace / nspacebeams;
 var disbeams = mbeamspace - wbeams / 1000;
 var hbeamsc = hbeams / 1000;
 var hbeams2 = hbeamsc * hbeamsc;
 var disbeams2 = disbeams * disbeams;
 var weavediag = hbeams2 + disbeams2;
 var weavediaglength = Math.sqrt(weavediag);
 var ldiagstrips = nspacebeams * weavediaglength;
 var wbeammm = wbeams / 1000;
 var lbeamwidth = nbeams * wbeammm;
 var minlength = ldiagstrips + lbeamwidth;
 var totallength = minlength + 0.5;
 var finaltotallength = totallength.toFixed(2);
 var mainwidth = pwidth / nstrips;
 var widthfinal = mainwidth - 0.01;
 var mainwidthfinal = widthfinal.toFixed(3);
 var totalsize = (perlength * pwidth).toFixed(2);

 if ($.isNumeric($("#tpwidth").val())) {
     $("#tplength").css("border", "1px solid #008fc9");
     $("#tpwidth").css("border", "1px solid #008fc9");
     $("#totalsize").css("border", "1px solid #008fc9");
     $('#errorinput').hide();
 }

 // Else if the value is equal to 7, add a green border
 else {
     $("#tplength").css("border", "4px solid red");
     $("#tpwidth").css("border", "4px solid red");
     $("#totalsize").css("border", "4px solid red");
     $('#errorinput').show('slow');

 }


 $("#tplength").val(finaltotallength);  
 $("#tpwidth").val(mainwidthfinal);
 $("#totalsize").val(totalsize);


 });
 </script>

这就是形式：

<form action="order.cfm" method="post">
<fieldset>

<label for="plength">Pergola Length in Metres:</label>
<input name="plength" id="plength" type="text" size="25" placeholder="Pergola Length in Metres" title="Please Enter The Length Of The Pergola" />


<label for="pwidth">Pergola Width in Metres:</label>
<input name="pwidth" id="pwidth" type="text" size="25" placeholder="Pergola Width in Metres" title="Please Enter The Width Of The Pergola" />
</fieldset>

<fieldset>

<label for="nbeams">Number Of Beams:</label>
<input name="nbeams" id="nbeams" type="text" size="25" placeholder="Number Of Beams" title="Please Enter The Number Of Beams"/>


<label for="hbeams">Height Of Beams in Millimetres:</label>
<input name="hbeams" id="hbeams" type="text" size="25" placeholder="Height Of Beams in Millimetres" title="Please Enter The Height Of The Beams" />

<label for="wbeams">Width Of Beams in Millimetres:</label>
<input name="wbeams" id="wbeams" type="text" size="25" placeholder="Width Of Beams in Millimetres" title="Please Enter The Width Of The Beams" />


<label for="nstrips">Number Of Weave Strips:</label>
<input name="nstrips" id="nstrips" type="text" size="25" placeholder="Number Of Weave Strips" title="Please Enter The Number Of Weave Strips" />


<p style="padding:5px 0px; margin:10px 24px 20px 0; border-bottom:5px solid #999;">
<label for="calculate"><a id="calculate" class="btn-small btn">Calculate</a></label> 
</p>



<span id="errorinput" class="error" style="margin:0 20px 20px 0; clear:both; font-size:0.8em; display:block; line-height:1.4em; padding:10px; background-color:#e3e2e2; "><i class="fa fa-times"></i> <strong>ERROR</strong> -
 All fields have not been filled out, please fill out all the fields above and click calculate.
</span>

<label for="tplength"><strong>TOTAL LENGTH REQUIRED:</strong></label>
<input name="tplength" id="tplength" style="font-size:1.3em; font-weight:500; color:#008fc9;" type="text" size="25"  placeholder="Length Required" readonly="readonly"/>

<label for="tpwidth"><strong>WIDTH OF WEAVE STRIPS (IDEAL SIZE TO BE BETWEEN 45cm - 70cm):</strong></label>
<input name="tpwidth" id="tpwidth" style="font-size:1.3em; font-weight:500; color:#008fc9;" type="text" size="25" class="weave-input" placeholder="Width Of Weave Strips" readonly="readonly" />

<span style="background-color:#263e8d; padding:10px; color:#fff; font-size:0.7em; display:block; margin-bottom:20px; width:93%; float:left;"><i class="fa fa-info-circle"></i> IF WIDTH IS NOT BETWEEN THE IDEAL RANGE THEN YOU CAN CHANGE THE NUMBER OF WEAVE STRIPS AND CLICK ON CALCUATE AGAIN.</span>

<span id="sizeerror"></span>

<label for="totalsize"><strong>TOTAL m&sup2;:</strong></label>
<input name="totalsize" id="totalsize" style="font-size:1.3em; font-weight:500; color:#008fc9;" type="text" size="25"  placeholder="Total Size" readonly="readonly"/> 
<span id="#errorcalc1"></span>


 <br />

</fieldset>

     </form>

对不起，如果这个很长，我已经粘贴了有关此功能的所有信息。任何帮助将不胜感激。

Answer 1

我注意到你的html元素中有一些奇怪的代码，我删除它们只是为了好好看看你的代码：

<cfif isdefined ('url.error')>value="<cfoutput>#url.plength#</cfoutput>"     </cfif>

我认为以下示例工作正常（或至少最接近解决您的问题，因为我理解）：Fiddle

jQuery计算问题

1 个答案: