如何克服 JS 中的冲突

Question

在表单中，我希望函数自动将数据从一个表单提取到另一个表单，并自动计算运行。但是这里只有一个函数可以是运行.

in my foto 我想当我 select LAO 时，它会自动从其他表单中检索数据并出现在 Posisi Awal 文本字段中。然后当我填写 Persen 文本字段时，然后自动计算并在 Target 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);
?>

Answer 1

    $('#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");

如何克服 JS 中的冲突

How to Overcome Conflicts in JS

javascript

jquery

yii

yii2

yii2-advanced-app