Javascript 如何克服JS中的冲突

在表单中，我希望函数自动地将数据从一个表单传送到另一个表单，并且自动计算一起运行。但这里只能运行一个函数

我希望当我选择LAO时，它会自动从其他表单检索数据，并显示在Posisi Awal文本字段中。然后，当我填写Persen文本字段时，自动计算并填写目标预警文本字段中Persen的Posisi预警计算数据。问题是自动计算可以工作，但将数据从表单检索到另一个表单不起作用

<?= $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);
?>

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

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

另外，如果您更改了一些输入值，那么您需要在该输入上为依赖于要触发的字段onchange事件的其他代码触发一个更改事件

为什么要使用attr更改输入值？jQuery对此具有.valvalue方法：

所以正确的用法应该是这样的：

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

或者甚至像这样。我想你指的是posisi\u awal输入。但我对监控tgl输入一无所知。在那页上似乎不存在

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

---

您得到的错误是什么？你能在JSFIDLE中提供你的代码吗？为什么当选择Kode Lao时，文本字段Posisi Awal不会自动填充？@sonyit的工作，在第二个答案中。非常感谢非常感谢