Yii2-動態表單

Question

我正在Yii2動態表單中工作，但我需要添加一些小函數來添加，子和相乘2個字段並將值放在第三個。我寫了一些代碼，但我無法在textfield上調用該函數。

如何調用字段中的函數？

<script type="text/javascript"> 
 
function earnings() 
 
{ 
 
    var bs = document.getElementById('basic_salary').value; 
 
    var da = document.getElementById('dra').value; 
 
    var ta = document.getElementById('tra').value; 
 
    var gs = parseInt(bs) + parseInt(da) + parseInt('ta'); 
 
    if (!isNaN(gs)) 
 
    { 
 
     document.getElementById('gross_salary').value = gs; 
 
    } 
 
} 
 
function deduct() 
 
{ 
 
    var lv = document.getElementById('leave').value; 
 
    var pd = document.getElementById('per_day').value; 
 
    var ra = parseInt(lv) * parseInt(pd); 
 
    if (!isNaN(ra)) 
 
    { 
 
     document.getElementById('reduced_amount').value = result; 
 
    } 
 
} 
 
function net() 
 
{ 
 
    var gs = document.getElementById('gross_salary').value; 
 
    var ra = document.getElementById('reduced_amount').value; 
 
    var ns = parseInt(gs) - parseInt(ra); 
 
    if (!isNaN(ns)) 
 
    { 
 
     document.getElementById('net_salary').value = ns; 
 
    } 
 
} 
 
</script>

<h4 class="box-title text-aqua"><?php echo Yii::t('payroll', 'Earnings'); ?></h4> 
 
<div class="col-xs-12 col-lg-12 no-padding"> 
 
    <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'basic_salary')->textInput(['maxlength' => 30, 
 
      'placeholder' =>$model->getAttributeLabel('basic_salary')], ['id'=>'basicSalary']) ?> 
 
    </div> 
 

 
    <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'dra')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('dra')], ['id'=>'dearnessAllowance']) ?> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-12 col-lg-12 no-padding"> 
 
     <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'tra')->textInput(['maxlength' => 30, 
 
     'placeholder' => $model->getAttributeLabel('tra')], ['id'=>'travelAllowance']) ?> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'gross_salary')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('gross_salary')], ['id'=>'grossSalary']) ?> 
 
     </div> 
 
</div> 
 

 
<h4 class="box-title text-aqua"><?php echo Yii::t('payroll', 'Deduction'); ?></h4> 
 
<div class="col-xs-12 col-lg-12 no-padding"> 
 
    <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'leave')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('leave')]) ?> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
     <?= $form->field($model, 'per_day')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('per_day')]) ?> 
 
    </div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-lg-12"> 
 
     <?= $form->field($model, 'reduced_amount')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('reduced_amount')]) ?> 
 
    </div> 
 

 
<h4 class="box-title text-aqua"><?php echo Yii::t('payroll', 'Total Amount'); ?></h4> 
 
<div class="col-xs-12 col-sm-12 col-lg-12"> 
 
     <?= $form->field($model, 'net_salary')->textInput(['maxlength' => 30, 
 
      'placeholder' => $model->getAttributeLabel('net_salary')]) ?> 
 
</div> 
 
<?php } ?>

Answer 1

試圖在測試環境中您的代碼後，我發現了幾個問題。例如，ActiveField-> textInput只接受一個參數（html屬性數組） - 請參閱http://www.yiiframework.com/doc-2.0/yii-widgets-activefield.html#textInput()-detail。另外，如果你修正了下面的例子，你將會得到一個id爲「basicSalary」的輸入。您的JavaScript收入函數正在尋找「basic_salary」，並且不會找到它。這種類型還有許多其他的錯誤。

我建議你：

• 打開yii2文檔，並保持開放，同時編寫代碼
• 使用瀏覽器的開發工具檢查HTML和JavaScript除錯（例如，在Chrome中使用「檢查」來查看生成的HTML代碼和Sources選項卡來查看，設置斷點等在您的javascript）
• 投入一些時間閱讀約jquery;它會讓你的生活變得更容易。

（Original，correct answer :)您可以將onchange屬性添加到每個字段;每次用戶鍵入內容時都會調用您指定的函數。例如，

<?= $form->field($model, 'basic_salary')->textInput([ 
 
      'maxlength' => 30, 
 
      'placeholder' =>$model->getAttributeLabel('basic_salary')], 
 
      'id'=>'basicSalary', 
 
      'onchange' => 'earnings()', 
 
     ]) ?>

爲了配合上面的代碼，您的收益（）函數需要入手：

var bs = document.getElementById('basicSalary').value;