在yii2中的wbraganca动态表单中的文本框中自动填充值

时间:2016-08-13 08:56:40

标签: javascript yii2

我在yii2中添加了wbraganca动态表单。在这个表单中,我试图在productname和batchno - 两个下拉菜单中填充itemid文本框。我获得了值但无法在文本框中传递它。请帮忙。

我的表格看起来像 -

<div class="bills-form">

    <?php $form = ActiveForm::begin([
        'id' => 'dynamic-form', 
        'type' => ActiveForm::TYPE_HORIZONTAL,
        'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
    ]); ?>

    <?= $form->field($model, 'bills_partyname')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Parties::find()->orderBy(['parties_partyname' => SORT_ASC,])->all(),'parties_partyname','partyDetails'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Party Name', 'id' => 'partyid'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ]); ?>

    <?= $form->field($model, 'transport')->textInput(['maxlength' => true, 'readOnly'=>true]) ?>

    <?= $form->field($model, 'bills_ebillid')->textInput() ?>

    <?= $form->field($model, 'bills_year')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Year::find()->orderBy(['yid' => SORT_DESC,])->all(),'year_year','year_year'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Year', 'id' => 'yearid'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ]); ?>

    <?= $form->field($model, 'console')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Console::find()->orderBy(['consoleid' => SORT_ASC,])->all(),'console','console'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Console','id' => 'consoleid'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ]); ?>

    <?= $form->field($model, 'num')->textInput() ?>

    <?= $form->field($model, 'billno')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'billdate')->widget(
                    DatePicker::className(), [
                    // inline too, not bad
                     'inline' => false, 
                     // modify template for custom rendering
                    //'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
                    'clientOptions' => [
                        'autoclose' => true,
                        'todayHighlight' => true,
                        'format' => 'yyyy-mm-dd'

                    ]

                    ]);?>

    <div class="row">
        <div class="panel panel-default">
        <div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i> Products</h4></div>
        <div class="panel-body">
             <?php DynamicFormWidget::begin([
                'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                'widgetBody' => '.container-items', // required: css class selector
                'widgetItem' => '.item', // required: css class
                'limit' => 20, // the maximum times, an element can be cloned (default 999)
                'min' => 1, // 0 or 1 (default 1)
                'insertButton' => '.add-item', // css class
                'deleteButton' => '.remove-item', // css class
                'model' => $modelsProductsales[0],
                'formId' => 'dynamic-form',
                'formFields' => [
                    'productname',
                    //'batchno',
                    'qty',
                    'free',
                    'total',

                ],
            ]); ?>

            <div class="container-items"><!-- widgetContainer -->
            <?php foreach ($modelsProductsales as $i => $modelsProductsales): ?>
                <div class="item panel panel-default"><!-- widgetBody -->
                    <div class="panel-heading">
                        <h3 class="panel-title pull-left">Products</h3>
                        <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="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <?php
                            // necessary for update action.
                            if (! $modelsProductsales->isNewRecord) {
                                echo Html::activeHiddenInput($modelsProductsales, "[{$i}]id");
                            }
                        ?>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3 col-lg-3">

                                <?= $form->field($modelsProductsales, "[{$i}]productname")->widget(Select2::classname(), [
                                'data' => ArrayHelper::map(Productbatch::find()->orderBy(['productname' => SORT_ASC,])->all(),'productname','productname'),
                                'language' => 'en',
                                'options' => ['placeholder' => 'Select Productname', 'id' => 'productid'],
                                'pluginOptions' => [
                                    'allowClear' => true
                                ],
                                ]); ?>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-lg-3">
                                <?= $form->field($modelsProductsales, "[{$i}]qty")->textInput(['maxlength' => true]) ?>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-lg-3">
                                <?= $form->field($modelsProductsales, "[{$i}]free")->textInput(['maxlength' => true]) ?>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-lg-3">
                                <?= $form->field($modelsProductsales, "[{$i}]total")->textInput(['maxlength' => true]) ?>
                            </div>
                            <?= $form->field($modelsProductsales, "[{$i}]itemid")->textInput(['maxlength' => true]) ?>
                            <?= $form->field($modelsProductsales, "[{$i}]batchno")->widget(DepDrop::classname(), [
                            'options'=>['id'=>'batchid'],
                            'pluginOptions'=>[
                                'depends'=>['productid'],
                                'placeholder'=>'BatchNo',
                                'url'=>Url::to(['/invoice/bills/subcat'])
                            ]
                            ]); ?>
                            <?= $form->field($modelsProductsales, "[{$i}]expdate")->textInput(['maxlength' => true]) ?>
                            <?= $form->field($modelsProductsales, "[{$i}]mrp")->textInput(['maxlength' => true]) ?>
                            <?= $form->field($modelsProductsales, "[{$i}]rate")->textInput(['maxlength' => true]) ?>
                            <?= $form->field($modelsProductsales, "[{$i}]discount")->textInput(['maxlength' => true]) ?>
                        </div><!-- .row -->

                    </div>
                </div>
            <?php endforeach; ?>
        </div>
            <?php DynamicFormWidget::end(); ?>
        </div>
        </div>
    </div>

    <?= $form->field($model, 'billamount')->textInput() ?>

    <?= $form->field($model, 'transport')->textInput(['maxlength' => true]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

我的javascript代码是 -

<?php
/* start getting the itemid and expdate */
$script = <<< JS
$(function(){
    $('#productid').change(function(){   
        getItemid();
    });
    $('#batchid').change(function(){   
        getItemid();
    });

    var productid = $(this).val();
    var batchid = $(this).val();

    var getItemid = function(){
        var productid = String($('#productid').val());
        var batchid = String($('#batchid').val());
        $.get('index.php?r=invoice/bills/get-for-itemid',{ productid : productid, batchid : batchid }, function(data){
        //alert(data);
        var data = $.parseJSON(data);
        var getItemid = data;
        $('#dynamic-[{$i}]itemid').val(getItemid["itemid"]);
        });

    } ;

});


JS;
$this->registerJs($script);
/* end getting the itemid and expdate */
?>

请参阅以下屏幕截图。我想要的是 - enter image description here

更新 我已经检查了Yii2-dynamicforms and javascript并更新了另外两个依赖的表单字段(productname,batchno),如下所示 -

<div class="col-xs-3 col-sm-3 col-lg-3">

                                    <?= $form->field($modelsProductsales, "[{$i}]productname")->label(false)->textInput(['onchange' => 'getItemdetails($(this))', 'onkeyup' => 'getItemdetails($(this))'])->widget(Select2::classname(), [
                                    'data' => ArrayHelper::map(Productbatch::find()->orderBy('productname')->all(),'productname','productname'),
                                    'language' => 'en',
                                    'options' => ['placeholder' => 'Select Product','id' => 'prodname'],
                                    'pluginOptions' => [
                                        'allowClear' => true
                                    ],
                                    ]); 
                                ?>                                  
                                </div>
                                <div class="col-xs-2 col-sm-2 col-lg-2 nopadding">   
                                    <?= $form->field($modelsProductsales, 'batchno')->label(false)->textInput(['onchange' => 'getItemdetails($(this))', 'onkeyup' => 'getItemdetails($(this))'])->widget(DepDrop::classname(), [
                                    'options'=>['id'=>'batchno'],
                                    'pluginOptions'=>[
                                        'depends'=>['prodname'],
                                        'placeholder'=>'Batch No',
                                        'url'=>Url::to(['/invoice/bills/subcat'])
                                    ]
                                    ]); ?>

但不知道javascript部分。目前,javascript看起来如下 -

<?
/* start getting the itemid */
$script = <<< JS
$(function(){
    $('#productsales-{$i}-prodname').change(function(){   
        getItemid();
    });
    $('#productsales-{$i}-batchno').change(function(){   
        getItemid();
    });

    var prodname = $('#productsales-{$i}-batchno').val();
    var batchno = $('#productsales-{$i}-batchno').val();

    var getItemid = function(){
        var prodname = String($('#productsales-{$i}-prodname').val());
        var batchno = String($('#productsales-{$i}-batchno').val());
        $.get('index.php?r=invoice/bills/get-for-itemid',{ prodname : productsales-{$i}-prodname, batchno : productsales-{$i}-batchno }, function(data){
        alert(data);
        //var data = $.parseJSON(data);
        //var getItemid = data;
        //$('#productsales-{$i}-itemid').val(getItemid["itemid"]);
        });

    } ;

});
JS;
$this->registerJs($script);
/* end getting the itemid */
?>

更新:实施Insaneskull的答案

表格:刚从答案中复制。

<div class="col-xs-3 col-sm-3 col-lg-3">
                                    <?= $form->field($modelsProductsales, "[{$i}]productname")->widget(Select2::classname(), [
                                    'data' => ArrayHelper::map(Productbatch::find()->orderBy('productname')->all(),'productname','productname'),
                                    'language' => 'en',
                                    'options' => ['placeholder' => 'Select Product', 'onchange' => 'getItemID($(this))'],
                                    'pluginOptions' => [
                                        'allowClear' => true
                                    ],
                                    ])->label(false);
                                ?>
                                </div>
                                <div class="col-xs-2 col-sm-2 col-lg-2 nopadding">
                                    <?= $form->field($modelsProductsales, 'batchno')->widget(DepDrop::classname(), [
                                    'options' => ['onchange' => 'getItemID($(this))'],
                                    'pluginOptions'=>[
                                        'depends'=> [Html::getInputID($modelsProductsales, "[{$index}]productname")],
                                        'placeholder'=>'Batch No',
                                        'url'=>Url::to(['/invoice/bills/subcat'])
                                    ]
                                    ])->label(false); ?>
                                </div>

JS函数在表单底部注册 -

<?php
/* start getting the itemid */
$script = <<< JS
function getItemID(item) {
    var index  = item.attr("id").replace(/[^0-9.]/g, "");
    var batch = product = 0;
    var id = item.attr("id");
    var myString = id.split("-").pop();

    if (myString == "productname") {
        fetch = index.concat("-batchno");
        product = item.val();
        batch = $("#productsales-"+fetch+"").val();
    } else {
       fetch = index.concat("-productname");
       batch = item.val();
       product = $("#productsales-"+fetch+"").val(); 
    }
    $.get('index.php?r=invoice/bills/get-for-itemid',{ prodname : product, batchno : batch }, function(data){
       var data = $.parseJSON(data);
       var getItemid = data;
       itemID = "productsales-".concat(index).concat("-itemid");
       $("#"+itemID+"").val(getItemid["itemid"]);
   });
}
JS;
$this->registerJs($script);
/* end getting the itemid */
?>

我得到的错误 - enter image description here 未在Select2小部件中选择数据 enter image description here 当前的Javascript

<?php
/* start getting the itemid */
$script = <<< JS
function getItemID(item) {
    var index  = item.attr("id").replace(/[^0-9.]/g, "");
    var batch = product = 0;
    var id = item.attr("id");
    var myString = id.split("-").pop();

    if (myString == "productname") {
        fetch = index.concat("-batchno");
        product = item.val();
        batch = $("#productsales-"+fetch+"").val();
    } else {
       fetch = index.concat("-productname");
       batch = item.val();
       product = $("#productsales-"+fetch+"").val(); 
    }
    $.get('index.php?r=invoice/bills/get-for-itemid',{ prodname : product, batchno : batch }, function(data){
       var data = $.parseJSON(data);
       var getItemid = data;
       itemID = "productsales-".concat(index).concat("-itemid");
       $("#"+itemID+"").val(getItemid["itemid"]);
   });
}
JS;
$this->registerJs($script, View::POS_END);
/* end getting the itemid */
?>

错误 enter image description here

1 个答案:

答案 0 :(得分:1)

<强> _form.php这个

<div class="col-xs-3 col-sm-3 col-lg-3">
    <?= $form->field($modelsProductsales, "[{$i}]productname")->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Productbatch::find()->orderBy('productname')->all(),'productname','productname'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Product', 'onchange' => 'getItemID($(this))'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ])->label(false);
?>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 nopadding">
    <?= $form->field($modelsProductsales, '[{$i}]batchno')->widget(DepDrop::classname(), [
    'options' => ['onchange' => 'getItemID($(this))'],
    'pluginOptions'=>[
        'depends'=> [Html::getInputID($modelsProductsales, "[{$i}]productname")],
        'placeholder'=>'Batch No',
        'url'=>Url::to(['/invoice/bills/subcat'])
    ]
    ])->label(false); ?>
</div>

<强> JS

function getItemID(item) {
    var index  = item.attr("id").replace(/[^0-9.]/g, "");
    var batch = product = 0;
    var id = item.attr("id");
    var myString = id.split("-").pop();

    if (myString == "productname") {
        fetch = index.concat("-batchno");
        product = item.val();
        batch = $("#productsales-"+fetch+"").val();
    } else {
       fetch = index.concat("-productname");
       batch = item.val();
       product = $("#productsales-"+fetch+"").val(); 
    }
    $.get('index.php?r=invoice/bills/get-for-itemid',{ prodname : product, batchno : batch }, function(data){
       var data = $.parseJSON(data);
       var getItemid = data;
       itemID = "productsales-".concat(index).concat("-itemid");
       $("#"+itemID+"").val(getItemid["itemid"]);
   });
}