如何使用按键事件进行计算

Question

这是我的创建页面。

费率 = 人工 + 机械 + 材料 + 现场开销 + 总部开销 + 利润

在提交按钮单击之前，我想完成上述计算并将其填充到 Rate 文本字段。是否有类似按键的事件（如在 Windows 应用程序中）来执行此操作？ 我是 yii 的新手，我想你们帮我做这件事。

这是我通过 Yii 生成的表单。

<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'trboq-form',
    'enableAjaxValidation'=>false,
)); ?>

<?php
    $projectWbs = Yii::app()->session['projectWbs'];
?>

<?php
    $subBoqNo=Yii::app()->session['$subBoqNo']  ;
    $subBoqDes=Yii::app()->session['subBoqDes']  ;
    $mainBoqDes=Yii::app()->session['mainBoqDes']  ;
?>




    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php echo $form->errorSummary($model); ?>


<!-- Start of First table-->
 <div class="form">
  <div class="group" style="width:600px; padding-left:50px;margin-top:40px; margin-left:15px">
   <fieldset>
      <legend>General</legend>
      <table>
     <tr>
       <th><?php echo $form->hiddenfield($model,'Project_Code'); ?></th>
       <th><?php echo $form->hiddenfield($model,'Project_Code',array('size'=>20,'value'=>$projectWbs,'readonly'=>true)); ?></th>
       <th><?php echo $form->error($model,'Project_Code'); ?></th>
    </tr>
    <tr>
        <th><?php echo $form->labelEx($model,'Sub_BOQ_No'); ?></th>
        <th><?php echo $form->textField($model,'Sub_BOQ_No',array('size'=>20,'value'=>$subBoqNo,'readonly'=>true)); ?></th>
        <th><?php echo $form->error($model,'Sub_BOQ_No'); ?></th>
    </tr>
       <tr>
        <th><?php echo $form->labelEx($model,'Sub_BOQ_Description'); ?></th>
        <th><?php echo $form->textField($model,'Sub_BOQ_Description',array('size'=>60,'maxlength'=>150, 'value'=>$subBoqDes,'readonly'=>true)); ?>        </th>
        <th><?php echo $form->error($model,'Sub_BOQ_Description'); ?></th>
    </tr>
      <tr>
        <th><?php echo $form->labelEx($model,'BOQ_Item_Code'); ?></th>
        <th><?php echo $form->textField($model,'BOQ_Item_Code',array('size'=>25,'maxlength'=>25)); ?></th>
        <th><?php echo $form->error($model,'BOQ_Item_Code'); ?></th>
    </tr>
       <tr>
        <th><?php echo $form->labelEx($model,'BOQ_Item_Name'); ?></th>
        <th><?php echo $form->textarea($model,'BOQ_Item_Name',array('rows'=>6, 'cols'=>40)); ?></th>
        <th><?php echo $form->error($model,'BOQ_Item_Name'); ?></th>
    </tr>
    </tr>
       <tr>
        <th><?php echo $form->labelEx($model,'BOQ_Description'); ?></th>
        <th><?php echo $form->textarea($model,'BOQ_Description',array('rows'=>6, 'cols'=>40)); ?></th>
        <th><?php echo $form->error($model,'BOQ_Description'); ?></th>
    </tr>

    <tr>
        <th><?php echo $form->labelEx($model,'Unit_Code'); ?></th>
        <th> <?php echo $form->dropdownlist($model,'Unit_Code',CHtml::listData(MaUnits::model()->findAll(),'Unit_Code','Unit_Code'),array('width'=>              '25', 'empty'=>'please select'));  ?></th>
        <th><?php echo $form->error($model,'Unit_Code');?></th>
    </tr>

     <tr>
        <th><?php echo $form->labelEx($model,'Qty'); ?></th>
        <th><?php echo $form->textField($model,'Qty'); ?></th>
        <th><?php echo $form->error($model,'Qty'); ?></th>
    </tr>
        </table>
    </fieldset>

  </div>
  </div>

  <div class="form">
  <div class="group" style="width:600px; padding-left:50px;margin-top:40px; margin-left:15px">
   <fieldset>
      <legend>Cost</legend>
      <table>
      <tr>
        <th><?php echo $form->labelEx($model,'Labour'); ?></th>
        <th><?php echo $form->textField($model,'Labour'); ?></th>
        <th><?php echo $form->error($model,'Labour'); ?></th>
    </tr>
    <tr>
        <th><?php echo $form->labelEx($model,'Machinery'); ?></th>
        <th><?php echo $form->textField($model,'Machinery'); ?></th>
        <th><?php echo $form->error($model,'Machinery'); ?></th>
    </tr>
       <tr>
        <th><?php echo $form->labelEx($model,'Matirial'); ?></th>
        <th><?php echo $form->textField($model,'Matirial'); ?></th>
        <th><?php echo $form->error($model,'Matirial'); ?></th>
    </tr>
      <tr>
        <th><?php echo $form->labelEx($model,'Side_over_head'); ?></th>
        <th><?php echo $form->textField($model,'Side_over_head'); ?></th>
        <th><?php echo $form->error($model,'Side_over_head'); ?></th>
    </tr>
       <tr>
        <th><?php echo $form->labelEx($model,'Head_office_over_head'); ?></th>
        <th><?php echo $form->textField($model,'Head_office_over_head'); ?></th>
        <th><?php echo $form->error($model,'Head_office_over_head'); ?></th>
    </tr>
     <tr>
        <th><?php echo $form->labelEx($model,'Profit'); ?></th>
        <th><?php echo $form->textField($model,'Profit'); ?></th>
        <th><?php echo $form->error($model,'Profit'); ?></th>
    </tr>
    <tr><th><p>----------------------------------------------------------------------------</p></th></tr>
    <tr>
        <th><?php echo $form->labelEx($model,'Rate'); ?></th>
        <th><?php echo $form->textField($model,'Rate'); ?></th>
        <th><?php echo $form->error($model,'Rate'); ?></th>
    </tr>
      <tr>
        <th><?php echo $form->labelEx($model,'Amount_Total'); ?></th>
        <th><?php echo $form->textField($model,'Amount_Total'); ?></th>
        <th><?php echo $form->error($model,'Amount_Total'); ?></th>
      </tr>
        </table>
    </fieldset>
  </div>
  </div>

        <div class="row buttons" style="margin-left:580px">
            <?php echo CHtml::submitButton($model->isNewRecord ? 'Save' : 'Save'); ?>
        </div>

<?php $this->endWidget(); ?>

</div><!-- form -->

Answer 1

你可以用javascript和jquery做这种事情，看看它是如何工作的：http://www.w3schools.com/jquery/，http://www.w3schools.com/js/，http://api.jquery.com/

了解 javascript 需要一些工作，但你可以用它构建强大的东西。

在你的情况下，它可能是这样的：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <form id="myForm">
            <input id="Labour" type="text"/> <label>Labour</label> <br/>
            <input id="Machinery" type="text"/> <label>Machinery</label> <br/>
            <input id="Material" type="text"/> <label>Material</label><br/>
            <input id="Site" type="text"/> <label>Site Over Head</label><br/>
            <input id="HeadOffice" type="text"/> <label>Head Office Over Head</label><br/>
            <input id="Profit" type="text"/> <label>Profit</label><br/>
            <input type="submit">  <br/>
        </form>

        <script type="text/javascript">
            $("#myForm input").each(function(){
                $(this).keyup(function(){
                    var labour = $("#Labour").val();
                    var Machinery = $("#Machinery").val();
                    var Material = $("#Material").val();
                    var SiteOverHead = $("#Site").val();
                    var HeadOfficeOverHead = $("#HeadOffice").val();
                    labour = $.isNumeric(labour)?labour:0;
                    Machinery = $.isNumeric(Machinery)?Machinery:0;
                    Material = $.isNumeric(Material)?Material:0;
                    SiteOverHead = $.isNumeric(SiteOverHead)?SiteOverHead:0;
                    HeadOfficeOverHead = $.isNumeric(HeadOfficeOverHead)?HeadOfficeOverHead:0;
                    $("#Profit").val(parseInt(labour)+parseInt(Machinery)+parseInt(Material)+parseInt(SiteOverHead)+parseInt(HeadOfficeOverHead));
                });
            });
        </script>
    </body>
</html>

祝你好运。