Как преодолеть конфликты в JS - PullRequest
Новая
       35

Как преодолеть конфликты в JS

0 голосов
/ 15 мая 2019

В форме я хочу, чтобы функция автоматически брала данные из одной формы в другую, и автоматические вычисления выполняются вместе. но здесь может быть запущена только одна функция.

на моем фото Я хочу, чтобы при выборе LAO он автоматически извлекал данные из других форм и появлялся в текстовом поле Posisi Awal. затем, когда я заполняю текстовое поле Persen, автоматически вычисляет и заполняет данные из расчета Posisi Awal с Persen в текстовом поле Target 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 голосов
/ 15 мая 2019 
    $('#monitoring-tgl').attr('value',data.tgl);
    $('#monitoring-posisi_awal').attr('value',data.tgt_pergeseran);

На этой странице нет полей с этими идентификаторами.

Кроме того, если вы измените какое-либо входное значение, то вам нужно инициировать событие 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");
...