如何克服 JS 中的冲突

乌卡·拉马特

在表单中,我希望该函数自动将数据从一种表单获取到另一种表单,并且自动计算一起运行。但这里只能运行一个函数。

在我想要的照片中,当我选择 LAO 时,它会自动从其他表单中检索数据并出现在 Posisi Awal 文本字段中。然后当我填写 Persen 文本字段时,然后自动计算并填写 Posisi Awal 与目标 Awal 文本字段中的 Persen 计算数据。问题是自动计算有效,但将数据从表单检索到另一个表单不起作用。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何克服Bootstrap.js和Avada WordPress主题之间的细微冲突

来自分类Dev

如何克服LALR语法中的移位减少冲突

来自分类Dev

如何克服清单中的\ n

来自分类Dev

如何克服 Node.js 中的“TypeError: Class extends value undefined is not a constructor or null”错误?

来自分类Dev

如何克服2个网卡之间的冲突-VirtualBox Ubuntu

来自分类Dev

如何克服这种情况在Android中的tabwidget

来自分类Dev

如何克服图形中条形标签的重叠

来自分类Dev

如何克服这种情况在Android中的tabwidget

来自分类Dev

如何克服CHtmlView中的脚本错误?

来自分类Dev

如何克服Oracle中的IN子句问题

来自分类Dev

如何克服Excel中超链接的限制?

来自分类Dev

如何使用Three.js检测JavaScript中两个对象之间的冲突?

来自分类Dev

如何解决angular应用程序中的clearance-icons.min.js版本冲突

来自分类Dev

如何克服java中println zoo中的错误

来自分类Dev

如何克服R中的此“下标超出范围”错误?

来自分类Dev

如何克服Java中的不准确性

来自分类Dev

如何克服我的Android应用程序中的OutOfMemory错误?

来自分类Dev

如何克服python中的“类方法不可调用”

来自分类Dev

我可以在TreeSet中插入重复的条目。如何克服这个

来自分类Dev

如何克服Java中的不准确性

来自分类Dev

如何克服我的Android应用程序中的OutOfMemory错误?

来自分类Dev

cp -r中的语法差异以及如何克服它们

来自分类Dev

如何克服移动Safari中奇怪的“占位符”问题

来自分类Dev

如何克服tar:从成员名称中删除前导“ /”

来自分类Dev

如何克服 Slick 3.2 中的 22 列限制?

来自分类Dev

节点js express中的冲突路由

来自分类Dev

如何避免Laravel中的列名冲突?

来自分类Dev

如何避免python Tkinter中的键盘冲突?

来自分类Dev

如何解决Eclipse SVN中的冲突

Related 相关文章

  1. 1

    如何克服Bootstrap.js和Avada WordPress主题之间的细微冲突

  2. 2

    如何克服LALR语法中的移位减少冲突

  3. 3

    如何克服清单中的\ n

  4. 4

    如何克服 Node.js 中的“TypeError: Class extends value undefined is not a constructor or null”错误?

  5. 5

    如何克服2个网卡之间的冲突-VirtualBox Ubuntu

  6. 6

    如何克服这种情况在Android中的tabwidget

  7. 7

    如何克服图形中条形标签的重叠

  8. 8

    如何克服这种情况在Android中的tabwidget

  9. 9

    如何克服CHtmlView中的脚本错误?

  10. 10

    如何克服Oracle中的IN子句问题

  11. 11

    如何克服Excel中超链接的限制?

  12. 12

    如何使用Three.js检测JavaScript中两个对象之间的冲突?

  13. 13

    如何解决angular应用程序中的clearance-icons.min.js版本冲突

  14. 14

    如何克服java中println zoo中的错误

  15. 15

    如何克服R中的此“下标超出范围”错误?

  16. 16

    如何克服Java中的不准确性

  17. 17

    如何克服我的Android应用程序中的OutOfMemory错误?

  18. 18

    如何克服python中的“类方法不可调用”

  19. 19

    我可以在TreeSet中插入重复的条目。如何克服这个

  20. 20

    如何克服Java中的不准确性

  21. 21

    如何克服我的Android应用程序中的OutOfMemory错误?

  22. 22

    cp -r中的语法差异以及如何克服它们

  23. 23

    如何克服移动Safari中奇怪的“占位符”问题

  24. 24

    如何克服tar:从成员名称中删除前导“ /”

  25. 25

    如何克服 Slick 3.2 中的 22 列限制?

  26. 26

    节点js express中的冲突路由

  27. 27

    如何避免Laravel中的列名冲突?

  28. 28

    如何避免python Tkinter中的键盘冲突?

  29. 29

    如何解决Eclipse SVN中的冲突

热门标签

归档