Расчеты Javascript на основе ответов на формы

Question

Я создал веб-форму, которая имеет несколько входных и радиокнопок. Ответ на каждый должен быть собран для расчета стоимости. Я не уверен, правильна ли моя логика 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 форме. Уравнения все правильные, я просто не уверен, что размещение отдельных компонентов для totalCost помещено в нужное место или нет, и я не уверен в логике этого расчета. Радиокнопки вызвали у меня некоторые проблемы.

Answer 1

Я бы порекомендовал вам взглянуть на ng-model, чтобы узнать, как вы можете работать с полями формы.

Here - это демонстрационное приложение, которое я закодировал некоторое время назад, и должно дать вам представление о том, как вы могли бы выполнять вычисления на основе ввода формы.

Ваш quoteGenerator - это функция js без какого-либо углового кода. Inject $scope в функцию или используйте controllerAs, создайте контроллер и удалите все звонки document.getElementsById.

Here Ваш код: Я начал улучшать свой код, но я остановился, чтобы завершить демонстрацию, потому что я не понимаю, как работать с файлами.