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

Creating a form entry calculator with jQuery

本文关键字：表单一个计算器 jQuery 创建使用更新时间：2023-09-26

我正在尝试构建一个计算器，使用表单条目作为要计算的数字，并返回到另一个字段集中的相应表单字段。我是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 ()

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

Fiddle示例

你错过了

}};而不是});作为结束括号
变量名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 ()

此外，在从输入中获取number值时，最好使用带基数参数的parseInt()（值到整数^Docs）和parseFloat()（值到浮点数^Docs

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

您的javascript/HTML有一些错误，还有一些遗漏。

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

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

更新后的小提琴应该为您工作：http://jsfiddle.net/u3xx4ubv/17/