I set the form parametres:
<? $form = ActiveForm::begin(
[
'options' => ['class' => 'form-horizontal'],
'fieldConfig' =>
[
'template' => '<div class="control-group">{input}</div>.<div class="control-group error">{error}</div>',
],
]);
?>
<div class="control-group">
<b>Регистрация</b>
</div>
<?
echo $form->field($model, 'login', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Логин')]);
echo $form->field($model, 'password', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Пароль')]);
echo $form->field($model, 'repassword', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Повторите пароль')]);
?>
As a result, it still turns a standard form with standart classes:
<form id="w0" class="form-horizontal" action="/web/index.php?r=site%2Freg" method="post">
<input type="hidden" name="_csrf" value="cjZfVVZNOElDbml4NBlhMBRbcjslfFIvFg4OJm4aFSpERDI5Zn19OA==">
<div class="control-group">
<b>Регистрация</b>
</div>
<div class="form-group field-user-login required">
<input type="text" id="user-login" class="asd" name="User[login]" placeHolder="Логин">
<div class="help-block"></div>
</div>
<div class="form-group field-user-password required">
<input type="text" id="user-password" class="asd" name="User[password]" placeHolder="Пароль">
<div class="help-block"></div>
</div>
<div class="form-group field-user-repassword required">
<input type="text" id="user-repassword" class="asd" name="User[repassword]" placeHolder="Повторите пароль">
<div class="help-block"></div>
</div>
</form>
I don't need this classes and div with "help-block" class.
do something like :
$form->field($model, 'username', [ 'inputTemplate' => '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>{input}</div>'])->label(false)->textInput(['placeholder'=>'Your Email']);
Updatedcustomize template for all :
$form = ActiveForm::begin([
'layout' => 'horizontal',
'fieldConfig' => [
'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
'horizontalCssClasses' => [
'label' => 'col-sm-4',
'offset' => 'col-sm-offset-4',
'wrapper' => 'col-sm-8',
'error' => '',
'hint' => '',
],
],
]);
references : yii2 doc and bootstrap activeform yii2 doc
Related
I'm trying to create a dynamic form for one of my projects. I used wbraganca's Dynamic From to achieve this. In my dynamic form I have a DepDrop to show subcategories list from a parent category.
My _form.php
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<div class="row">
<div class="col-md-6">
<?= $form->field($model, 'rq_job_no')->textInput() ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_req_date')->widget(\yii\jui\DatePicker::class, [
//'language' => 'ru',
'dateFormat' => 'php:Y-m-d',
'clientOptions' => [
'changeMonth' => true,
'changeYear' => true,
'showButtonPanel' => true,
'yearRange' => '1990:2030',
'minDate' => date('Y-m-d'),
],
'options' => ['class' => 'form-control', 'readOnly' => true, 'placeholder' => 'Enter the Item Required Date'],
]) ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_priority_type')->dropDownList(['urgent' => 'Urgent', 'normal' => 'Normal'], ['prompt' => '--Select Priority Type--']) ?>
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_approval_type')->dropDownList([1 => ' Approved Vendor Needed', 2 => 'Approved Submitted Needed', 3 => 'Warranty Certificate to be Collected', 4 => 'Long Lead Material',], ['prompt' => '--Select Type of Approval--']) ?>
<?php echo $form->field($model, 'rq_cat_type')->widget(Select2::class, [
'data' => $catData,
'options' => ['placeholder' => '--Select Request Type--', 'class' => 'form-control'],
'pluginOptions' => [
'allowClear' => true
],
]);
?>
</div>
<div class="col-md-12">
<?= $form->field($model, 'rq_remarks')->textarea(['rows' => 6]) ?>
</div>
</div>
<!-- code for dynamic form -->
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-envelope"></i> Request Items</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' => 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' => $modelsAddress[0],
'formId' => 'dynamic-form',
'formFields' => [
'item_name',
'item_qty',
'item_unit',
],
]); ?>
<div class="container-items">
<!-- widgetContainer -->
<?php foreach ($modelsAddress as $i => $modelAddress) : ?>
<div class="item panel panel-default">
<!-- widgetBody -->
<div class="panel-heading">
<h4 class="panel-title pull-left">Items</h4>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="fa fa-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="fa fa-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<?php
// necessary for update action.
if (!$modelAddress->isNewRecord) {
echo Html::activeHiddenInput($modelAddress, "[{$i}]rt_id");
}
?>
<?php //$form->field($modelAddress, "[{$i}]rt_item")->textInput(['maxlength' => true]) ?>
<?= $form->field($modelAddress, "[{$i}]rt_item")->widget(DepDrop::class, [
'options' => ['id' => 'reqitems-'.$i.'-rt_item'],
'pluginOptions' => [
'depends' => ['requests-rq_cat_type'],
'placeholder' => '--Select Location--',
'url' => Url::to(['/requests/subcat'])
]
]); ?>
<div class="row">
<div class="col-sm-6">
<?= $form->field($modelAddress, "[{$i}]rt_qty")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-6">
<?= $form->field($modelAddress, "[{$i}]rt_unit")->textInput(['maxlength' => true]) ?>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
My Controller action to load the subcategory
public function actionSubcat()
{
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($parents != null) {
$cat_id = $parents[0];
$out = self::getSubCatList($cat_id);
return ['output' => $out, 'selected' => ''];
}
}
return ['output' => 'No Category Available', 'selected' => ''];
}
public function getSubCatList($cat_id)
{
$output = [];
$category = Item::find()->where(['item_category' => $cat_id])->orderBy('item_title')->all();
if (empty($category)) {
$output[] = ['id' => '0', 'name' => 'No Category Available'];
} else {
foreach ($category as $cat) {
$output[] = ['id' => $cat->item_id, 'name' => $cat->item_title];
}
}
return $output;
}
My problem is that DepDrop is only loading the subcategory for the first loop of the dynamic form and leaves the rest loop blank. Attached screenshot for your reference.
Can anyone help by pointing what I am missing or how can I achieve my requirement.
displaying msg on above the line, how to display error msg below line. I have added below view page. any suggestions.
below is view page
<div class="ibox-content bwform clearfix" id="bwcart">
<h2><b>Profile</b><div id="loader"></div></h2>
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}\n{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'firstname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">First Name</span>
</label>
</div>
</div>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'lastname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">Last Name</span>
</label>
</div>
</div>
You can use this solution:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
//modify this
'template' => "{label}<div class='col-md-12'>{input}</div><div class='col-md-12 '>{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
So your error tag is positioned
under your input tag.
Your error attribute should not be in your col-md-12 class div.
So it should be like this:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}</div>{error}",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
I want to create form using yii2 ActiveForm. Here is my code:
<?php
$form = \yii\widgets\ActiveForm::begin([
'options' => [
'class' => 'form-inline'
]
]);
?>
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput(['placeholder' => "Enter Your Email"])->input('email')->label(false); ?>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
<?php \yii\widgets\ActiveForm::end(); ?>
which generates this html:
<form id="w0" class="form-inline" action="/example" method="post">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<div class="form-group field-subscriber-email required">
<input type="email" id="subscriber-email" class="form-control transparent" name="Subscriber[email]"
autofocus="autofocus">
<div class="help-block"></div>
</div>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
Everything is ok, but where is placeholder?
Put it inside input() method as second parameter - reference
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput()->input('email', ['placeholder' => "Enter Your Email"])->label(false); ?>
</div>
I have been trying to load remote content for different bootstrap modal on same yii2 view
<?php
$label = $model->getAttributeLabel('educationId');
$addon = [
'prepend' => [
'content' => Html::icon('book')
],
'append' => [
'content' => Html::button(
Html::icon('plus'), [
'class' => 'btn btn-success',
'title' => 'Add New' . $label,
'onclick' => new JsExpression('showModal();'),
]
),
'asButton' => true
]
];
echo Html::tag('label',$model->getAttributeLabel('educationId'), ['class'=>'control-label']);
echo Select2::widget([
'model' => $model,
'attribute' => 'educationId',
'data' => ArrayHelper::map ( EducationLevel::find ()->all (), 'id', 'name' ),
'options' => ['placeholder' => 'Select Education Level ...','template' => 'label}\n{error}'],
'addon' => $addon,
'pluginOptions' => [
'maximumInputLength' => 10
],
]);
JS function
Function showModal(){
$('#addEducationModal').modal({
remote: 'modal.html',
show: true
});
}
So the user will click on the addon button of a text field and the modal will show up, and other text fields shall have same mechanism with different modal content.
However all what I get is faded background.
I was able to make it work and more than that.
The issue i had mainly because the yii cashes generated files so to resolve i deleted the generated files and made sure the content is generated fresh :)
and i havent used the JQuery load function.
see below code:
PHP View Code
$label = $model->getAttributeLabel('majorId');
$addon = [
'prepend' => [
'content' => Html::icon('book')
],
'append' => [
'content' => Html::button(Html::icon('plus'), [
'class' => 'btn btn-success',
'title' => 'Add New' . $label ,
'data-toggle' => 'modal',
'data-target' => '#addModal',
'href'=> 'addMajorModal.html',
]),
'asButton' => true
]
];
echo Html::tag('label',$model->getAttributeLabel('majorId'),['class'=>'control-label']);
echo Select2::widget([
'model' => $model,
'attribute' => 'majorId',
'data' =>ArrayHelper::map ( Major::find ()->all (), 'id', 'name' ),
'options' => ['placeholder' => 'Select Major ...','template' => 'label}\n{error}'],
'addon' => $addon,
'pluginOptions' => [
'maximumInputLength' => 10
],
]);
<div class="modal fade" id="addModal" >
<div class="modal-dialog" dir="rtl">
<div class="modal-content" dir="rtl">
<!-- Content will be loaded here from "addMajorModal.html" file -->
</div>
</div>
</div>
The Modal file content
<div class="modal-header panel-primary" dir="rtl" horizantal-aligned="">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">إضا�ة جديد</h4>
</div>
<div class="modal-body" dir="rtl">
<div id="login-boxs" class="login-popup>
<form id="newCat" method="post" class="signin" dir="rtl" action="#">
<div class="form-group">
<label for="certName" class="control-label">مسمى التخصص </label>
<input type="text" name="name" data-val="true" data-val-required="ErrMsg" data-rule-required="true" placeholder="مسمى الشهادة" class="form-control" id="certName">
</div>
<div class="form-group">
<label for="certShortDesc" class="control-label">وص� قصير </label>
<input type="text" name="shdesc" data-rule-required="true" placeholder="وص� قصير" class="form-control" id="certShortDesc" required>
</div>
</form>
</div>
</div>
<div class="modal-footer" dir="rtl">
<div class="col-lg-6" dir="rtl">
<div class="progress" >
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" id="progresBarUpload">
</div>
</div>
</div>
<div class="col-lg-6" dir="rtl">
<button type="button" class="btn btn-danger" dir="rtl" data-dismiss="modal"><i class="glyphicon glyphicon-remove"> </i>Close</button>
<button id="submitButton" type="button" dir="rtl" class="btn btn-primary" onclick="createCertificate()"><i class="glyphicon glyphicon-ok"> </i>Save changes</button>
</div>
</div>
Thats all, with this the modal will be loaded based on yii append generation of the HTML
As far as i know, this will be workable till Bootstrap 3.3 as remote content will be deprecated in version 4
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
<?= $form->field($model, 'email', [
'inputOptions' => [ 'placeholder' => 'Ihre E-Mail Adresse', 'class' => 'newsletter-cta-mail' ]
])->label(false)->textInput(); ?>
<?= Html::submitButton('20€ Gutschein sichern', ['class' => 'green newsletter-cta-button', 'name' => 'contact-button', 'value' => 'hallo']) ?>
<?php ActiveForm::end(); ?>
results into:
<form id="contact-form" action="/" method="post" role="form">
<input type="hidden" name="_csrf" value="WFlFWnIwU1Y3HnQKSn06GG46PXcjQRUzNCA9KhRiYCxvFXQ9RHIiPA=="> <div class="form-group field-newsletterform-email required has-error">
<input type="text" id="newsletterform-email" class="newsletter-cta-mail" name="NewsletterForm[email]" placeholder="Ihre E-Mail Adresse">
<p class="help-block help-block-error">Verification Code cannot be blank.</p>
</div> <button type="submit" class="green newsletter-cta-button" name="contact-button" value="hallo">20€ Gutschein sichern</button></form>
But I dont need the wrapping
How to disable this?
You could simply use Html::activeTextInput() :
<?= Html::activeTextInput($model, 'email', ['placeholder' => 'Ihre E-Mail Adresse', 'class' => 'newsletter-cta-mail']); ?>
Or change ActiveForm::$fieldConfig configuration :
ActiveForm::begin([
'id' => 'contact-form',
'fieldConfig' => [
'options' => [
'tag' => false,
],
],
]);
or You could something like this (change div to span)
$form = ActiveForm::begin([
'id' => 'contact-form',
'fieldConfig' => [
'template' => "{input}",
'options' => [
'tag'=>'span'
]
]
]);
<?= $form->field($model, 'email', [
'template' => '{input}', // Leave only input (remove label, error and hint)
'options' => [
'tag' => false, // Don't wrap with "form-group" div
],
]) ?>
I have solved it like this....put tag as span.. also you can prepend icons infront of the box.
<div id="login-box-inner">
<?php $form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['role'=>'form'],
'fieldConfig' => [
'options' => [
'tag' => 'span',
],
],
]); ?>
<?= $form->field($model, 'username',[
'template' => '
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user emerald"></i></span>
{input}
</div>
{error}',
'inputOptions' => [
'placeholder' => 'Username ...',
'class'=>'form-control',
]])
?>
<?= $form->field($model, 'password', [
'template' => '
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key emerald"></i></span>
{input}
</div>
{error}',
'inputOptions' => [
'placeholder' => 'Password ...',
'class'=>'form-control',
]])->input('password')
?>
<?php ActiveForm::end(); ?>