如何使用按鍵事件來執行計算

Question

這是我的創建頁面。

率=勞動力+機械+材料+網站在頭+的總公司負責人+利潤

提交按鈕之前單擊我想上面的計算，以完成並填寫率文本字段。有沒有像按鍵（像在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，但你可以建立強大事情與它。

在你的情況下，它可能是somethig像：

<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> 

好運。