What is reset button and what is it supposed to do?
What is reset button and what is it supposed to do?
It is supposed to clear the form input fields data. It is on the form
form.php
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\jui\DatePicker;
use wbraganca\dynamicform\DynamicFormWidget;
use app\models\Ascassignment;
use app\models\Asccenter;
use kartik\time\TimePicker;
use yii\helpers\ArrayHelper;
use app\models\Student;
/* @var $this yii\web\View */
/* @var $model app\models\Ascteacherreport */
/* @var $form yii\widgets\ActiveForm */
?>
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
$("#dynamic-form")[0].reset();
</script>
<div class="ascteacherreport-form">
<?php $form = ActiveForm::begin(['id' => 'dynamic-form', 'options' => ['class' => 'disable-submit-buttons'],
]);?>
<div class="panel panel-primary " >
<div class="panel panel-heading"><font size="3"><b>Teacher Report</b></font></div>
<div class="row">
<div class="col-sm-4">
<?= $form->field($model, 'ASCId')->dropDownList(ArrayHelper::map(Asccenter::find()->leftJoin('ascassignment','`ascassignment`.`ASCId`=`asccenter`.`ASCId`')->where(['ascassignment.UserId' => \Yii::$app->user->identity->getonlyid()])->all(),'ASCId','ASCName'), ['prompt' => 'Select ASC Center','onChange' => '
'
]) ?>
</div>
<div class="col-sm-4">
<?= $form->field($model, 'DateofReport')->widget(DatePicker::classname(), [
//'language' => 'ru',
'dateFormat' => 'yyyy-MM-dd',
'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'],
'clientOptions'=>['changeMonth'=>true,
'changeYear'=>true,
'readOnly'=>true]
]) ?>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"><font size="3"><b>Time and Student Details</b></font></div>
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper',
'widgetBody' => '.container-items',
'widgetItem' => '.time-item',
'limit' =>10,
'min' => 1,
'insertButton' => '.add-time',
'deleteButton' => '.remove-time',
'model' => $modelsTime[0],
'formId' => 'dynamic-form',
'formFields' => [
'FromTime',
'ToTime'
],
]); ?>
<table class="table table-bordered">
<thead>
<tr bgcolor='#B8B8B8'>
<th style='border: 1px solid black;'></th>
<th class ="text-center" style='border: 1px solid black;'>Time</th>
<th class ="text-center" style='border: 1px solid black;'>Student Details</th>
<th class="text-center" style='border: 1px solid black;'>
<button type="button" class="add-time btn btn-success btn-xs"><span class="fa fa-plus"></span> Add Time</button>
</th>
</tr>
</thead>
<tbody class="container-items">
<?php foreach ($modelsTime as $indexTime => $modelTime): ?>
<tr class="time-item">
<td class="vcenter" style='border: 1px solid black;'>
<?php
// necessary for update action.
if (! $modelTime->isNewRecord) {
echo Html::activeHiddenInput($modelTime, "[{$indexTime}]ASCReportDetailsId");
}
?>
</td>
<td style='border: 1px solid black;width:15%'>
<?= $form->field($modelTime, "[{$indexTime}]FromTime")->label(true)->widget(TimePicker::classname(),[
'pluginOptions' => [
'readOnly' => true,
'minuteStep' => 1,
],
])?><br>
<?=
$form->field($modelTime, "[{$indexTime}]ToTime")->label(true)->widget(TimePicker::classname(),[
'pluginOptions' => [
'readOnly' => true,
'minuteStep' => 1,
],
])?>
</td>
<td style='border: 1px solid black;'>
<?= $this->render('_form-studentdata', [
'form' => $form,
'indexTime' => $indexTime,
'modelsStudentdata' => $modelsStudentdata[$indexTime],
]) ?>
</td>
<td class="text-center vcenter" style='border: 1px solid black;'>
<button type="button" class="remove-time btn btn-danger btn-xs"><span class="fa fa-minus"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php DynamicFormWidget::end(); ?>
</div>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?= Html::resetButton('Reset',['class' => 'btn btn-default'])?>
</div>
<?php ActiveForm::end(); ?>
</div>
i am using reset button to clear the input fields data. One thing to prevent that when a user creates a report and clicks on submit the report data is ssaved in the table. If the user clicks the back button of the browser, then the data on the form should be cleared.(to prevent the user from creating duplicate entry for the same record)
What about reseting everything with JQuery?
$(".resettable" ).each(function(){
$(this).val(''); //reset to empty all input with class resettable
});
Good Day. If I use the above jquery code then it works correctly for the create action (form inputs are getting cleared) but on the update form, all the inputs which used to be loaded from the database table are also getting cleared.
You have to store it somewhere and retrieve it on resetting
//Sample view
<?php foreach ($modelsTime as $indexTime => $modelTime) : ?>
<?= $form->field($modelTime, "[{$indexTime}]ToTime")->textInput(['class' =>'resettable', 'data-default' => $modelTime->ToTime]) ?>
<?php endforeach; ?>
//Sample JS
$(".resettable" ).each(function(){
$(this).val($(this).attr('data-default'));
});
Ok. How do we set the data-default attribute for Date Picker and Time Picker extensions.
One Field has widget DatePicker. Date is not fetched in update
For Date Picker
<?= $form->field($model, 'DateofReport')->widget(DatePicker::classname(), [
//'language' => 'ru',
'dateFormat' => 'yyyy-MM-dd',
'options' => ['class'=>'form-control r1 ','readOnly'=>'readOnly'],
'clientOptions'=>[
'defaultDate' => $model->DateofReport,
'changeMonth'=>true,
'changeYear'=>true,
'readOnly'=>true]
]) ?>
For TimePicker
<?= $form->field($modelTime, "[{$indexTime}]FromTime")->label(true)->widget(TimePicker::classname(),[
'pluginOptions' => [
'class'=>'form-control r1',
'readOnly' => true,
'minuteStep' => 1,
],
])?>
Also if we are using jquery to reset all the form input, then we also dont need to put Reset button on the form ?
Check documentation. I guess options property for the datepicker. Not sure of the timepicker
Ok Thanks.