如何在yii2中的JavaScript中获取动态表单输入值? [英] How to get dynamic form input values in JavaScript in yii2?
本文介绍了如何在yii2中的JavaScript中获取动态表单输入值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在JavaScript函数中获取动态表单输入值? 以下代码仅适用于零索引输入值，不适用于所有
How to get dynamic form input values in JavaScript function? following code working only for zero index input values not for all
$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);
如下所示查看代码，当光标从price_unit移动时，我想计算总金额:
View code as per follows I want to calculate total amount when cursor moves from 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();
?>
推荐答案
对于所有动态表单，我正在使用 knockoutjs
for all dynamic forms i am using knockoutjs
好处是，您可以创建(可写)计算得出的变量，例如总和或总计(=单位*价格)
the benefit is, you can make (writeable) computed vars like sums or totals (=units * price)
使用observableArray还将帮助您保持html的干净.
这是一个html示例(请注意'data-bind'选项):
using observableArray will also help you keep your html clean.
here an example html (note the 'data-bind' options):
<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中的样本剔除视图模型:
and a sample knockout viewmodel in 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库.我还使用了jQuery，这不是淘汰赛的必要条件.
requires to load knockoutjs library. i also used jquery, which is not a requirement for knockout.
这篇关于如何在yii2中的JavaScript中获取动态表单输入值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
