Question

我正在尝试使用表单条目构建计算器作为要计算的数字并返回到另一个字段集中的相应表单字段。我对jQuery很新，我遵循一本书的建议，但我必须诚实，我确实需要匆匆忙忙，我有一些问题。

如果您需要对其进行可视化，这是jfiddle：http://jsfiddle.net/u3xx4ubv/14/

编辑：不确定相应的表单操作，这可能会导致一些问题。

HTML：

<form action="" method="get" id="ATSCalc">
<fieldset>
    <legend>Return on Investment Calculator</legend>
    <label for="aptsBooked" class="label">Avg. Appointments Booked</label>
    <input name="aptsBooked" type="text" id="aptsBooked">
    <br />
    <label for="aptsAttended" class="label">Avg. Appointments Attended</label>
    <input name="aptsAttended" type="text" id="aptsAttended">
    <br />
    <label for="reqMeetings" class="label">Meetings per deal</label>
    <input name="reqMeetings" type="text" id="reqMeetings">
    <br />
    <label for="orderVal" class="label">Avg. order value</label>
    <input name="reqMeetings" type="text" id="reqMeetings">
    <br />
    <input type="submit" value="Submit" />
</fieldset>
<br />
<fieldset>
    <legend>Results</legend>
    <label for="convRate" class="label">Appointment conversion rate</label>
    <input name="convRate" type="text" id="convRate">
    <br />
    <label for="meetingsPerDeal" class="label">No. of meetings per deal</label>
    <input name="meetingsPerDeal" type="text" id="meetingsPerDeal">
    <br />
    <label for="meetingVal" class="label">Value of each meeting</label>
    <input name="meetingVal" type="text" id="meetingVal">
    <br />
</fieldset>
</form>

JavaScript的：

$(document).ready(function(){
  $('#ATSCalc').submit(function(){

var aptsBooked = $('#aptsBooked').val();
var aptsAttended = $('#aptsAttended').val();
var reqMeetings = $('#reqMeetings').val();
var orderVal = $('#orderVal').val();
//Collects values of form input

var aptsConvRate = aptsAttended / aptsBooked * 100;
$('#convRate').val(aptsCovRate); //Outputs meeting conversion rate to form field.

var meetingsPerDeal = aptsBooked / reqMeetings;
$('#meetingsPerDeal').val(meetingsPerDeal); //Outputs meeting per deal value to form field.

var meetingVal = orderVal / meetingsPerDeal;
$('#meetingVal').val(meetingVal); //Outputs value of each meeting to form field.
//Variables for calculation of Return on Investment figures
                     }}; // end submit()
                     }}; // end ready ()

我正在尝试运行第二组变量并返回第二个字段集中显示的字段中的输出。我想这只是语法错误或错位的代码，但我真的很难解决它。任何帮助将不胜感激。

Answer 1

Fiddle example

你错过了

}};代替});作为结束括号
变量名 aptsCovRate 而不是aptsConvRate（缺少n）

$(document).ready(function () {
    $('#ATSCalc').submit(function (e) {
        e.preventDefault();

        var aptsBooked =  parseInt($('#aptsBooked').val(), 10);
        var aptsAttended = parseInt($('#aptsAttended').val(), 10);
        var reqMeetings = parseInt($('#reqMeetings').val(), 10); 
        var orderVal = parseFloat($('#orderVal').val());
        //Collects values of form input

        var aptsConvRate = aptsAttended / aptsBooked * 100;

        $('#convRate').val(aptsConvRate); //Outputs meeting conversion rate to form field.
                            /* ^^^^ Conv !! not Cov */

        var meetingsPerDeal = aptsBooked / reqMeetings;
        $('#meetingsPerDeal').val(meetingsPerDeal); //Outputs meeting per deal value to form field.

        var meetingVal = orderVal / meetingsPerDeal;
        $('#meetingVal').val(meetingVal); //Outputs value of each meeting to form field.
        //Variables for calculation of Return on Investment figures
    }); // end submit()
}); // end ready ()

此外，最好将parseInt()（值为整数^Docs）与radix参数和parseFloat()一起使用（值为浮点数< sup> Docs ）从输入中获取Number值时的方法。

要对结果进行舍入，请查看toFixed()方法。

Answer 2

您的javascript / HTML存在一些问题，以及您遗漏的一些问题。

$('#convRate').val(aptsCovRate);应为$('#convRate').val(aptsCo**n**vRate);
结束提交和结束准备应为});而不是}};
您没有orderVal作为ID的HTML输入。它需要改变。

最后，您错过了 - 您的表单将提交并刷新，您将丢失计算值。您可以使用e.stopPropagation();和e.preventDefault();

更新的小提琴应该适合您：http://jsfiddle.net/u3xx4ubv/17/

使用jQuery创建表单条目计算器

2 个答案: