如何克服JS中的冲突

时间:2019-05-15 06:02:13

标签: javascript jquery yii yii2 yii2-advanced-app

在表单中,我希望函数自动将数据从一个表单转移到另一表单,并自动运行自动计算。但是这里只能运行一个功能。

in my foto我想要当我选择LAO时,它将自动从其他表单中检索数据并出现在Posisi Awal文本字段中。然后当我填充Persen文本字段时,然后在目标Awal文本字段中使用Persen自动计算和填充Posisi Awal的计算数据。问题是自动计算有效,但无法从表单向另一表单检索数据。

<?= $form->field($model, 'posisi_awal')->textInput(['id'=>'posisi_awal','onkeyup'=>'sum();','type' => 'number','maxlength' => true])->label('Posisi Awal') ?>

当我在此代码中省略'id'=>'posisi_awal'时。可以从另一个位置检索数据的功能,但是对于自动计算则不能     

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\select2\Select2;
use yii\helpers\ArrayHelper;
use app\models\Resumes;
use dosamigos\datepicker\DatePicker;

/* @var $this yii\web\View */
/* @var $model app\models\Monitoring */
/* @var $form yii\widgets\ActiveForm */
$model->tgl = date('Y-m-d');
?>

<script>
function sum() {
      var txtThirdNumberValue = document.getElementById('posisi_awal').value;
      var txtFourNumberValue = document.getElementById('persen').value;

      var result1 = parseInt(txtThirdNumberValue) / 100 * parseInt(txtFourNumberValue);

      var hasil1 = Math.ceil(result1);

      if (!isNaN(hasil1)) {
         document.getElementById('target_awal').value = hasil1;
      } 

}
</script>

<div class="monitoring-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'kode_lao')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Resumes::find()->all(),'resumes_id',function($model){return ($model->lao.' ('.$model->tgl.')');}),
    'theme' => Select2::THEME_BOOTSTRAP,
    'language' => 'en',
    'options' => ['placeholder' => 'Pilih LAO (Tanggal)','required' => true,'style'=>'width:500px','maxlength' => true,'id'=>'lao'],
    'pluginOptions' => [
    'allowClear' => true
    ],
    ]);
    ?>

    <?= $form->field($model, 'tgl')->textInput(['readOnly'=>true,'style'=>'width:500px','maxlength' => true]) ?>


    <?= $form->field($model, 'posisi_awal')->textInput(['id'=>'posisi_awal','onkeyup'=>'sum();','type' => 'number','maxlength' => true])->label('Posisi Awal') ?>
    <?= $form->field($model, 'persen')->textInput(['id'=>'persen','onkeyup'=>'sum();','type' => 'number','maxlength' => true])->label('Persen') ?>
    <?= $form->field($model, 'target_awal')->textInput(['id'=>'target_awal','onkeyup'=>'sum();','type' => 'number','maxlength' => true])->label('Target Awal') ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

<?php
$script = <<< JS

$('#lao').change(function(){
    var laoId = $(this).val();

    $.get('index.php?r=resumes/get-persen-eom',{ laoId : laoId },function(data){
        var data = $.parseJSON(data);

        $('#monitoring-tgl').attr('value',data.tgl);
        $('#monitoring-posisi_awal').attr('value',data.tgt_pergeseran);

    });
});

JS;
$this->registerJs($script);
?>

1 个答案:

答案 0 :(得分:0)

    $('#monitoring-tgl').attr('value',data.tgl);
    $('#monitoring-posisi_awal').attr('value',data.tgt_pergeseran);

该页面上没有具有这些ID的字段。

此外,如果您更改某些输入值,则需要在该输入上触发一个change事件,以便依赖于该字段onchange事件来触发的其他代码。

为什么要使用attr更改输入的值? jQuery为此具有.val(value)方法:http://api.jquery.com/val/

因此正确的用法如下:

    $('#monitoring-tgl').val(data.tgl).trigger("change");
    $('#monitoring-posisi_awal').val(data.tgt_pergeseran).trigger("change");

也许甚至是这样。我认为您实际上是在指的是#posisi_awal输入。但我对#monitoring-tgl输入一无所知。该页面上似乎不存在。

    $('#monitoring-tgl').val(data.tgl).trigger("change");
    $('#posisi_awal').val(data.tgt_pergeseran).trigger("change");