Yii2 Form Submit Ajax with model popup

Submit form with ajax.

Yii2 form submit model with ajax

Yii2 Form Submit Ajax with model popup

This is Controller Action Code : 

<?php

use yii\web\Response;
use yii\widgets\ActiveForm;  

   /**

     * Create a User popup submit form

     * If creation is successful, the browser will be redirected to the 'view' page.     

     */

    public function actionCreatePopup() {

        $this->activeBreadcrumb = "Create";

        $model = new User();

        if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {

            Yii::$app->response->format = Response::FORMAT_JSON;

            return $err = ActiveForm::validate($model);

        }

        if ($model->load(Yii::$app->request->post()) && $model->validate()) {

            $model->created_at = time();

            if ($model->save(false)) {

                $model->sendRegistrationEmail();

                Yii::$app->session->setFlash("success", "User registered successfully.");

                return $this->redirect(['view', 'id' => $model->id]);

            }

        } else {

            $model->mobile = $model->country_code . $model->mobile;

        }

        return $this->renderAjax('create-ajax', [

                    'model' => $model,

        ]);

    }

View File Code : 

   

<?php

use yii\helpers\Html;

use yii\widgets\ActiveForm;

use borales\extensions\phoneInput\PhoneInput;

/* @var $this yii\web\View */

/* @var $model app\models\User */

/* @var $form yii\widgets\ActiveForm */

?>

<div class="user-form">

    <?php

    $form = ActiveForm::begin([

                    //'id' => 'leave-apply-form',

                    //'enableAjaxValidation' => true,

                    //'enableClientValidation' => false,

                    //'options' => ['class' => 'model-form']

    ]);

    ?>

    <?= $form->field($model, 'first_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'last_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>

    <div class="form-group">

        <?= Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']) ?>

        <?= Html::a(Yii::t('app', 'Cancel'), 'index', ['class' => 'btn btn-default', 'data-dismiss' => 'modal']) ?>

    </div>

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

</div>

This is a Model Dialog Code : 

<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content animated fadeIn">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <h3 class="modal-title">Create New User</h3>

                <small class="font-bold"></small>

            </div>

            <div class="modal-body">

                <div id='modalContent'></div>

            </div>            

        </div>

    </div>

</div>

<button href="<?php echo Url::to('create-popup');?>" type="button" class="btn btn-primary openModal">Create New User</button>

Model Open JavaScript Code : 

<?php

$script = <<< JS

    //Open Modal And Saved

    $(document).on('click',".openModal",function(e) {

        $("#myModal2").modal("show");

        $("#myModal2").find("#modalContent").load($(this).attr("href"));

    });

JS;

$this->registerJs($script);

?>