如何在yii2中获取JavaScript中的动态表单输入值？

时间：2016-08-19 09:32:47

标签： javascript jquery yii2

如何在JavaScript函数中获取动态表单输入值？ 以下代码仅适用于零索引输入值，不适用于所有

$this->registerJs(
'$(document).ready(function(){
$("‪#‎quotationitem‬-0-unit_price").change(function(){
var unit_value = $("#quotationitem-0-unit_price").val(); 
var qty_value = $("#quotationitem-0-quantity").val(); 
var total=Number(unit_value) * Number(qty_value);
$("#quotationitem-0-amount").val(total);
});
});', \yii\web\View::POS_END);

Dynamic form image

按照以下方式查看代码我想计算光标从price_unit移动时的总金额：

<?php

use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use backend\models\Company;
use backend\models\Item;
use backend\assets\AppAsset;
use wbraganca\dynamicform\DynamicFormWidget;
use dosamigos\datepicker\DatePicker;



$this->registerJs(
  '$(document).ready(function(){
    $("#quotationitem-0-unit_price").change(function(){
      var unit_value = $("#quotationitem-0-unit_price").val();   
      var qty_value = $("#quotationitem-0-quantity").val(); 
      var total=Number(unit_value) * Number(qty_value);
      $("#quotationitem-0-amount").val(total);

    });
});',  \yii\web\View::POS_END);

?>

<div class="quotation-form">

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
    <div class="panel panel-primary">
    <div class="panel-heading">
        <h2 class="panel-title">New Quotation</h2>
    </div>
    <div class="panel-body">
    <div class="col-lg-12">
        <div class="col-lg-8">
                <?= $form->field($model, 'summary')->textInput(['placeholder' => 'Type quotation summary here...'])->label(false) ?>
                    <div class="col-lg-8 col-sm-12 col-xs-12"> 

                        <div class="input-group">
                            <?= $form->field($model, 'address_from')->dropDownList(ArrayHelper::map(Company::find()->all(), 'id', 'companyName'), ['prompt' => 'Select Company',
                                    'onchange' =>
                                            '$.get("?r=quotation/comp-dtls&id="+$(this).val(), function(data){

                                            $("#fromdtls").val(data);
                                        });
                                        $.get("?r=quotation/get-image&id="+$(this).val(), function(success) {
                                            $(".putimg").html(success);
                                        })
                                    '
                            ])?>
                            <span class="input-group-btn" style="padding: 25px 0px;">
                                <button id="modalButtonCompany" class = "btn btn-default" type = "button"  value="?r=quotation/createcompany">
                                   +
                               </button>
                            </span>
                        </div>
                        <div class="form-group">
                            <textarea rows="4" cols="40" class="form-control" id="fromdtls"></textarea>
                        </div>

                        <div class="input-group">
                            <?= $form->field($model, 'address_to')->dropDownList(ArrayHelper::map(Company::find()->all(), 'id', 'companyName'), ['prompt' => 'Select Company',
                                    'onchange' =>
                                            '$.get("?r=quotation/comp-dtls&id="+$(this).val(), function(data){
                                            $("#todtls").val(data);
                                    })'

                            ])?>
                            <span class="input-group-btn" style="padding: 25px 0px;">
                                <button id="modalButtonCompany2" class = "btn btn-default" type = "button"  value="?r=quotation/createcompany">
                                   +
                               </button>
                            </span>
                        </div>
                        <div class="form-group">
                            <textarea rows="4" cols="40" class="form-control" id="todtls"></textarea>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" >
                        <?= $form->field($model, 'date')->widget(
                            DatePicker::className(), [
                                    'clientOptions' => [
                                    'autoclose' => true,
                                    'format' => 'yyyy-m-dd'
                                ]
                        ]);?>
                        <?= $form->field($model, 'quote_number')->textInput(['maxlength' => true]) ?>                    
                        <?= $form->field($model, 'quotation_validity')->dropDownList([ '1 day' => '1 Day', '5 days' => '5 Days', '10 days' => '10 Days', ], ['prompt' => '']) ?>
                    </div>
        </div>

    <div class="col-lg-4">
        <div class="row">
            <div class="putimg">
            </div>
    </div>
    </div>
</div>

<div class="col-lg-12">


 <div class="row">
         <div class="panel panel-default">

            <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' => 10, // 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' => $modelsQuotationItem[0],
                    'formId' => 'dynamic-form',
                    'formFields' => [
                        'id',
                        'item_id',
                        'description',
                        'quantity',
                        'unit_price',
                        'amount',
                    ],
                ]); ?>


                <div class="container-items"><!-- widgetContainer -->
                <?php foreach ($modelsQuotationItem as $i => $modelsQuotationItem): ?>
                    <div class="item panel panel-default"><!-- widgetBody -->
                        <div class="panel-heading">
                            <h3 class="panel-title pull-left">Item Details</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 (! $modelsQuotationItem->isNewRecord) {
                                    echo Html::activeHiddenInput($modelsQuotationItem, "[{$i}]id");
                                }
                            ?>

                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="input-group">
                                        <?= $form->field($modelsQuotationItem, "[{$i}]item_id")->dropDownList(
                                                ArrayHelper::map(Item::find()->all(), 'id', 'name'),
                                                ['prompt' => 'Select Item',
                                                'onchange' =>
                                                        '$.get("?r=quotation/item-dtls&id="+$(this).val(), function(data){
                                                })'
                                        ])?>

                                        <span class="input-group-btn" style="padding: 25px 0px;">
                                            <button id="modalButtonItem" class = "btn btn-default" type = "button"  value="?r=quotation/createitem">
                                               +
                                           </button>
                                        </span>
                                    </div>
                                </div> 

                                <div class="col-sm-3">
                                    <?= $form->field($modelsQuotationItem, "[{$i}]description")->textInput(['maxlength' => true]) ?>
                                </div>
                                <div class="col-sm-2">
                                    <?= $form->field($modelsQuotationItem, "[{$i}]quantity")->textInput(['maxlength' => true]) ?>
                                </div>
                                <div class="col-sm-2">
                                    <?= $form->field($modelsQuotationItem, "[{$i}]unit_price")->textInput(['maxlength' => true ])?> 
                                </div>
                                <div class="col-sm-2">
                                    <?= $form->field($modelsQuotationItem, "[{$i}]amount")->textInput(['maxlength' => true])?>
                                </div>
                            </div><!-- .row -->

                        </div>
                    </div>
                <?php endforeach; ?>
                </div>
                <?php DynamicFormWidget::end(); ?>
                <div class="col-lg-9"></div>
                <div class="col-lg-3">
                    <?= $form->field($model, 'sub_total')->textInput(['maxlength' => true, 'value' => '0.00']) ?>
                </div>
            </div>
        </div>
    </div>    



</div>
<div class="col-lg-12">

</div>
<div class="col-lg-12">
    <?= $form->field($model, 'notes')->textArea(['rows' => 4]) ?>
</div>
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Save') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success pull-right' : 'btn btn-primary pull-right' ]) ?>
    </div>

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

</div>
</div>
</div>
<?php
Modal::begin([
'header' => '<h4>Add New Company</h4>',
'id' => 'modalCompany', 
'size' => 'modal-md',
]);
echo '<div id="modalContentCompany"></div>';
Modal::end();
?>

<?php
Modal::begin([
'header' => '<h4>Add New Item</h4>',
'id' => 'modalItem', 
'size' => 'modal-md',
]);
echo '<div id="modalContentItem"></div>';
Modal::end();
?>

2 个答案:

答案 0 :(得分：0)

您可以提及类来输入如下所示的类，或者如果该类已经存在，则使用相同的。

HTML代码 

<div class="box" data-id="caption">
 <input type="text" name="quantity" value="" class="quantity">
 <input type="text" name="price" value="" class="price">
 <input type="text" name="total" value="" class="total">
</div>
<div class="box" data-id="caption">
 <input type="text" name="quantity" value="" class="quantity">
 <input type="text" name="price" value="" class="price">
 <input type="text" name="total" value="" class="total">
</div>

Jquery代码： 

$("body").delegate('#quotationitem-0-unit_price', 'change', function() {
   var total = $(this).val() * $(this).prev().val();
   $(this).next().val(total);
});

答案 1 :(得分：0)

表示我使用的所有动态表单knockoutjs

好处是，你可以制作（可写）计算变量，如总和或总数（=单位*价格）

使用observableArray也可以帮助您保持html清洁。 这里有一个示例html（注意'data-bind'选项）：

<ul data-bind="foreach: items">
    <li><?= Html::textInput('title', null,  ['data-bind' => 'value: title']) ?> <?= Html::textInput('units', null,  ['data-bind' => 'value: units']) ?> <?= Html::textInput('price', null,  ['data-bind' => 'value: price']) ?> <span data-bind="text: total"></span></li>
</ul>
<p data-bind="text: sum"></p>
<p>
    <a href="#" class="btn btn-default" data-bind="click: addItem">add new item</a>
    <a href="#" class="btn btn-default" data-bind="click: submit">submit</a>
</p>
<code data-bind="text: ko.toJSON($data)"></code>

和javascript中的示例淘汰视图模型：

// viewmodel for an item, with title, price, units and computed total
var item = function(data) {
    var self   = this;
    data       = data || {};
    this.title = ko.observable(data.title || '');
    this.price = ko.observable(data.price || 0);
    this.units = ko.observable(data.units || 0);
    this.total = ko.computed(function() { return (self.price() * self.units()).toFixed(2); });
}

// app viewmodel, which is bound to your DOM
var vm = function() {
    var self = this;

    // array of items
    this.items = ko.observableArray([new item({title: 'item 1', units: 1, price: 12.34}), new item({title: 'item 2', units: 2, price: 23.45}), new item()]);

    // computed sum of all item's totals
    this.sum = ko.computed(function() {
        var sum = 0;
        for (var i = self.items().length - 1; i >= 0; i--) {
            sum += parseFloat(self.items()[i].total());
        }
        return sum.toFixed(2);
    })

    // function bound to click event of a button, to add a new row
    this.addItem = function() {
        self.items.push(new item({title: '<title>'}));
    }

    // handle your form submission here
    this.submit = function() {
        alert(ko.toJSON(self));
    }
}

$(document).ready(function() {
    // bind your viewmodel
    ko.applyBindings(new vm());
})

需要加载knockoutjs library。我也使用了jquery，这不是淘汰赛的要求。

相关问题
最新问题