Calculate field activeform

Yii 2.0 General Discussions
1

Evening,

so once again i would like a bit of help.

i want to get “cost” from qty and cost per item

<?= $form->field($model, 'qty')->textInput()->label('Qty') ?>


   <?= Html::beginTag('div', ['class' => 'form-group field-costeach']) ?>
<?= Html::label('Cost Per Item:', 'costeach', ['class' => 'control-label']) ?>
<?= Html::textInput('QuoteDetail[costeach]', '', ['id' => 'costeach', 'class' => 'form-control']) ?>
<?= Html::endTag('div') ?>


     <?= $form->field($model, 'cost')->textInput(['maxlength' => true]) ->label('Total Cost')?>

and then i have this in a js file. but nothing is happening

$(function() {
     $('#quotedetail-qty').keyup(function() { 
      
        updateTotal();
    });

    $('#costeach').keyup(function() {  
        updateTotal();
    });

    var updateTotal = function () {
    var qty = parseInt($('#quotedetail-qty').val());
    var amount = parseInt($('#costeach').val());
    var totalAmount = qty * amount;

    if (isNaN(totalAmount) || totalAmount < 0 || totalAmount > 100000) {
        totalAmount = '';
    }

    $('#quotedetail-cost').val(totalAmount);
};

 });
2

Hi Abilham,

Here is the updated script below

    //Put the function on top of the single execution construct
var updateTotal = function () {
    var qtyStr = parseInt($('#quotedetail-qty').val());
    var amountStr = parseInt($('#costeach').val());
    var qty = isNaN(qtyStr) ? 0 : qtyStr;
    var amount = isNaN(amountStr) ? 0 : amountStr;
    var totalAmount = qty * amount;
    if (totalAmount > 100000) {
        totalAmount = '';
    }
    $('#quotedetail-cost').val(totalAmount);
};
//Now go ahead do catch the keyup events
$(document).on('keypress', '#quotedetail-qty', function () {
    updateTotal();
})on('keypress', '#costeach', function () {
    updateTotal();
});
3

Thank you!

I have tried but it just doesn’t seem to trigger

_form

use backend\assets\AppAsset;

AppAsset::register($this);

Asset file

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@themes';
    
    public $css = [
        'css/site.css',
    ];
    public $js = [
        '/backend/themes/js/ajax-modal-popup.js'
    ];
    
    public $depends = [
        'yii\web\YiiAsset',
    ];
}

JS file

//Put the function on top of the single execution construct
var updateTotal = function () {
var qtyStr = parseInt($('#quotedetail-qty').val());
var amountStr = parseInt($('#costeach').val());
var qty = isNaN(qtyStr) ? 0 : qtyStr;
var amount = isNaN(amountStr) ? 0 : amountStr;
var totalAmount = qty * amount;
if (totalAmount > 100000) {
    totalAmount = '';
}
$('#quotedetail-cost').val(totalAmount);
};
//Now go ahead do catch the keyup events
$(document).on('keypress', '#quotedetail-qty', function () {
updateTotal();
})on('keypress', '#costeach', function () {
updateTotal();
});
4

Hi Abilham,

Please check that the jQuery selectors are exactly matching with your forms ? as well make sure the _form is not loaded via ajax.!

Cheers

5

Hi,

The form is loaded by AJAX.

Is thus the problem?

6

Just realised its bot this form thats loaded by AJAX

7

Hi Abilham,

then you trigger the events on document onload or setTimeout function construct.

Cheers!