基于表单答案的Javascript计算

3

我创建了一个包含多个输入框和单选按钮的Web表单。需要收集每个答案以计算费用。我不确定我的JS逻辑(特别是与单选按钮相关的部分)是否正确。请有人看一下这个,看看我是否做对了?谢谢。

HTML代码:

<div class="row">
    <div class="form-group col-md-4">
        <label for="company">Company Name*</label><br />
        <input type="text" class="form-control" name="company" placeholder="Company Name" ng-model="user.company">

    </div>
    <div class="form-group col-md-4">
        <label for="salesp">Salesperson Name*</label><br />
        <input type="text" class="form-control" name="salesp" placeholder="Salesperson Name" ng-model="user.salesp">

    </div>
    <div class="form-group col-md-4">
        <label for="emailsales">Contact Email*</label><br />
        <input type="email" class="form-control" name="emailsales" placeholder="john.doe@example.com" ng-model="user.emailsales">

    </div>
</div>
<div class="row">
    <div class="form-group col-md-4">
        <label for="partnum">Number of Part Being Made(Finished Goods)</label>
        <input type="number" class="form-control" id ="partnum" name="partnum" placeholder="Enter # items" ng-model="user.partnum">

    </div>
    <div class="form-group col-md-4">
        <label>New Files?</label><br />
        <input type="radio" name="files" id="files" value="42" ng-model="user.files"> Yes
        <input type="radio" name="files" id="files" value="0"ng-model="user.files"> No

    </div>
    <div class="form-group col-md-4">
        <label>Rerun Files?</label><br />
        <input type="radio" name="oldfiles" value="15" ng-model="user.oldfiles"> Yes
        <input type="radio" name="oldfiles" value="0" ng-model="user.oldfiles"> No

    </div>
</div>
<div class="row">
    <div class="form-group col-md-4">
        <label for="shortp">Shortest Dimension on Print Part (inches)</label>
        <input type="number" class="form-control" name="shortp" placeholder="Shortest Dim" ng-model="user.shortp">

    </div>
    <div class="form-group col-md-4">
        <label for="longp">Longest Dimension on Print Page (inches)</label>
        <input type="number" class="form-control" name="longp" placeholder="Longest Dim" ng-model="user.longp">

    </div>
    <div class="form-group col-md-4">
        <label for="pressnum">Number of Ups on Press Sheet</label>
        <input type="number" class="form-control" name="pressnum" placeholder="# Ups" ng-model="user.pressnum">

    </div>
</div>
<div class="row">
    <div class="form-group col-md-4">
        <label for="shortpress">Number of Short Press Sheet</label>
        <input type="number" class="form-control" id="shortpress" name="shortpress" placeholder="# Short Press" ng-model="user.shortpress">

    </div>
    <div class="form-group col-md-4">
        <label for="longpress">Number of Long Press Sheet</label>
        <input type="number" class="form-control" id="longpress" name="longpress" placeholder="# Long Press" ng-model="user.longpress">

    </div>
    <div class="form-group col-md-4">
        <label>Passes First Side?</label><br />
        <input type="radio" name="passfirst" value="Yes" ng-model="user.passfirst"> Yes
        <input type="radio" name="passfirst" value="No" ng-model="user.passfirst"> No

    </div>
</div>
<div class="row">
    <div class="form-group col-md-4">
        <label for="inkcoverone">Percent of Ink Coverage on First Side</label>
        <input type="number" class="form-control" id="inkcoverone" name="inkcoverone" placeholder="% Ink Coverage" ng-model="user.inkcoverone">

    </div>
    <div class="form-group col-md-4">
        <label>Passes Second Side?</label><br />
        <input type="radio" name="passsecond" value="1" ng-model="user.passsecond"> Yes
        <input type="radio" name="passsecond" value="0" ng-model="user.passsecond"> No

    </div>
    <div class="form-group col-md-4">
        <label for="inkcovertwo">Percent of Ink Coverage on Second Side</label>
        <input type="number" class="form-control" name="inkcovertwo" placeholder="% Ink Coverage" ng-model="user.inkcovertwo">

    </div>
</div>
<div class="row">
                <div class="form-group col-md-offset-10">
                    <button type="submit" class="btn btn-default btn-block register" ng-click="quoteGenerator()"> GET QUOTE </button>
                </div>
</div>

以下是JS代码:

function quoteGenerator(){
    let count = parseInt(document.getElementById('partnum').value);
    if (count > 0) {
        let size = 0;
        for (var i = 0 ; i < document.getElementsByName('files').length; i++) {
            if (document.getElementsByName('files')[i].checked) {
                    size = parseInt( document.getElementsByName('files')[i].value);
                    break;
            }
            if(size == 42){
                let newcount = count * size;
            } else if(size==0){
                for (var i = 0 ; i < document.getElementsByName('oldfiles').length; i++) {
                    if (document.getElementsByName('oldfiles')[i].checked) {
                        newsize = parseInt( document.getElementsByName('oldfiles')[i].value);
                        break;
                    }
                }
                let newcount= count*newsize;
            }
        }       
    }
    var ink = parseInt(document.getElementById('inkcoverone').value);
    var shortp = parseInt(document.getElementById('shortpress').value);
    var longp = parseInt(document.getElementById('longpress').value);
    var parentsheet = parseInt(document.getElementById('psheetnum').value);
    let inkcost1 = ((longp+shortp)/144)*.19*ink*parentsheet;

    for (var i = 0 ; i < document.getElementsByName('passsecond').length; i++) {
            if (document.getElementsByName('passsecond')[i].checked) {
                    pass2 = parseInt( document.getElementsByName('passsecond')[i].value);
                    break;
            }
    }
    var ink2 = parseInt(document.getElementById('inkcovertwo').value);
    let inkcost2 = ((longp+shortp)/144)*.19*ink2*parentsheet*pass2;

}

这些方程都基于HTML表单中变量的ID。这些方程都是正确的,只是我不确定totalCost的各个组件的放置位置是否正确,也不确定这个计算的逻辑是否正确。单选按钮给我造成了一些问题。


代码工作了吗? 你做了一些测试,所有结果都没问题吗? - Kim Aragon Escobar
1个回答

1
我建议您查看ng-model以了解如何使用表单字段。 这里是我之前编写的演示应用程序,可以让您了解如何根据表单输入进行计算。
您的quoteGenerator是一个没有任何angular代码的js函数。将$scope注入函数中或使用controllerAs,创建一个控制器并删除所有document.getElementsById调用。 这里是您的代码,我已经开始改进您的代码,但由于不理解如何处理文件的计算,因此停止了完成演示。

非常感谢您,AWolf。如果我有更多问题,我可以再次向您请教吗?再次感谢。 - afzaaldeveloper1
不用客气。如果你需要更多帮助,可以随时问我。但最好的方法是完成代码示例,如果你卡住了,我可以尝试帮忙。 - AWolf

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接