Question

我有一个动态表单用于产品订单。我使用产品dropDownList中的dynamicform来设置基于公司（select2）和产品的价格。公司位于dynamicform之外的基本表单（易于参考），但产品是<?php foreach ($modelsOrderItem as $o => $modelOrderItem): ?> <div class="item panel panel-default"> <div class="clearfix"></div> <div class="panel-body"> <?php // necessary for update action. if (! $modelOrderItem->isNewRecord) { echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id"); } ?> <div class="pull-right"> <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> </div> <div class="col-md-5"> <?= $form->field($modelOrderItem, "[{$o}]idProduct")-> dropDownList ( ArrayHelper::map(Product::find()->all(), 'id','ProductCodeWithName'), ['prompt' => 'Select a Product','style'=>'width:400px' , 'onchange' => '$.post( "index.php?r=pricelist/pricelist&idProduct='.'"+$(this).val()+"'.'&idCompany='.'"+$("#order-idcompany").val(), function(data) { $( "#orderitem-0-itemprice" ).val(data); });'] )->label(false); ?> </div> <div class="col-md-3" > <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:150px'])->label(false) ?> </div> <div class="col-md-2"> <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?> </div> </div> </div> </div> <?php endforeach; ?>中的列表项。我的代码正在为第一个项目工作，但我无法设置后续项目，因为我无法弄清楚如何处理添加的动态表单项的项目＃。

动态表单循环：

                <div class="container-items"><!-- widgetContainer -->
            <?php foreach ($modelsOrderItem as $o => $modelOrderItem):?>
                <div class="item panel panel-default"><!-- widgetBody -->
                    <div class="clearfix"></div>
                    <div class="panel-body">
                        <?php
                            // necessary for update action.
                            if (! $modelOrderItem->isNewRecord)
                            {
                                echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id");
                            }
                        ?>
                        <div class="form-group kv-fieldset-inline">
                            <div class="col-sm-4">

                                <?= $form->field($modelOrderItem, "[{$o}]idProduct")->dropDownList
                                    (
                                        ArrayHelper::map(Product::find()->orderBy('productCode')->all(), 'id','ProductCodeWithName'),
                                        ['prompt' => 'Select a Product','style'=>'width:360px' ,]

                                    )->label(false);
                                ?>
                            </div>

                            <div class="col-sm-2" >
                                    <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:100px','padding'=>'100px'])->label(false) ?> 
                            </div>

                            <div class="col-sm-2" >
                                    <?= $form->field($modelOrderItem, "[{$o}]quantityType")->DropdownList(['Cartons'=>'Cartons','Bags'=>'Bags','Kilograms'=>'Kilograms',
                                            'Tubs'=>'Tubs', 'Pieces' => 'Pieces'],['style'=>'width:150px'])->label(false) ?> 
                            </div>

                            <div class="col-sm-2">
                                    <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?>
                            </div>

                            <div class="pull-right">
                                <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                                <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                            </div>
                        </div>
                    </div><!-- .row -->
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php DynamicFormWidget::end(); ?>
    </div>

我现在已经删除了onchange函数并添加了Javascript，允许我控制要更改的表单元素，但是，我无法弄清楚如何使用动态添加的元素来执行此操作。我已经添加了脚本来查找添加的价格元素的更改，但脚本没有被激活。因此它适用于零（0）元素，但不会响应orderitem1等。这是我更新的代码和Javascript。

 <?php
    $script = "$('#orderitem-0-idproduct').change(function()
        {
            var idProduct = $(this).val();
            $.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct, idCompany:$model->idCompany },
            function(data)
            {
                    $('#orderitem-0-itemprice').val(data);
            });
        });
        $('#orderitem-1-idproduct').change(function()
        {
            var idProduct1 = $(this).val(data);
            alert();
            $.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct1, idCompany:$model->idCompany },
            function(data)
            {
                    $('#orderitem-1-itemprice').val(data);
            });
        });";
    $this->registerJs($script);
?>

使用Javascript：

{{1}}

Answer 1

我能够使用Javascript找出被点击的元素。这避免了能够在尚未启动的动态元素上运行代码的问题。

    <?php $js = <<<JS

    $('body').change(function(e)
    {
        var element = '#'+$(e.target).attr('id');
        var field = element.substring(element.length - number_of_chars_in_your_fieldname, element.length);  //stripping the string to identify the field you are looking 

        if(field === "field_you_are_looking_for")  //element usually looks like #formID-row-field
        {
            var dropdownID = $(element).val();
            if (element.length === 22)              //single digit row numbers
            {
                var row = element.substring(11,12);  //extract the current row number
            } else                                   //row numbers higher than 9
            {
                var row = element.substring(11,13); 
            }
            //Do whatever you need to do

            $('#formID-'+row+'-field_you_want_to_change').val(data);  //set the field to change on current row
        }
    });
JS;

    $this->registerJs($js);

?>

Yii2 - 使用javascript从wbraganca dynamicform更新动态元素

1 个答案: