jquery - submitting form through modal footer button -
in system display form in bootstrap modal using ajax rendering. form default submit button work correctly. need submit form through modal footer button added me.
index page
<div class="term-index"> <h1><?= html::encode($this->title) ?></h1> <?php // echo $this->render('_search', ['model' => $searchmodel]); ?> <p> <?= html::a('create term', ['create'], ['class' => 'create btn btn-success']) ?> </p> <?php modal::begin([ 'header'=>'<h4></h4>', 'id'=> 'modal', 'size'=>'modal-md', 'footer' => '<div class="form-group"> <button type="submit" class="btn btn-success">create</button> </div> <?php activeform::end(); ?>' ]); echo "<div id='modalcontent'></div>"; modal::end(); ?> <?= gridview::widget([ 'dataprovider' => $dataprovider, 'filtermodel' => $searchmodel, 'columns' => [ ['class' => 'yii\grid\serialcolumn'], 'id', 'name', 'description:ntext', 'date', 'user_id', // 'brach_id', // 'start_date', // 'end_date', // 'academic_year_id', ['class' => 'yii\grid\actioncolumn'], ], ]); ?> </div>
form view
<div class="term-form"> <?php $form = activeform::begin(); ?> <?= $form->field($model, 'name')->dropdownlist(arrayhelper::map(termtype::find()->all(),'name','name'),['prompt' => '']); ?> <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?> <?= $form->field($model, 'brach_id')->dropdownlist(arrayhelper::map(branch::find()->all(),'id','name'),['prompt' => '']); ?> <label>start date</label> <?= datepicker::widget([ 'model' => $model, 'attribute' => 'start_date','class'=>'form-control input-sm', 'size' => 'sm', 'template' => '{addon}{input}', 'clientoptions' => [ 'autoclose' => true, 'format' => 'yyyy-mm-dd','label'=>'start date' ] ]);?> <br/> <label>end date</label> <?= datepicker::widget([ 'model' => $model, 'attribute' => 'end_date', 'class'=>'form-control input-sm', 'size' => 'sm', 'template' => '{addon}{input}', 'clientoptions' => [ 'autoclose' => true, 'format' => 'yyyy-mm-dd', ] ]);?> <?= $form->field($model, 'academic_year_id')->dropdownlist(arrayhelper::map(branchhasacademicyear::find()->all(),'id','academic_year_name'),['prompt' => '']) ?> <div class="form-group"> <?= html::submitbutton($model->isnewrecord ? 'create' : 'update', ['class' => $model->isnewrecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> </div>
and j query function is
$('body').on('click','.create',function() { var href = $(this).attr('href'); $('#modal').modal('show') .find('#modalcontent').load(href); return false; });
you need bind footer button click js onclick handler , use ajax submit form. have never used modal cannot give code snippet.
easiest option imho using jui dialogs. here sample code jui doing same modal (just give idea)
dialog::begin([ 'clientoptions' => [ 'modal' => true, 'buttons'=>[ 'submit'=> new jsexpression(" function() { //select form id //submit ajax } ") ] ], ]); echo 'dialog contents here...'; dialog::end();
Comments
Post a Comment