Resolved: Multiple Records Added After Enabling Client Side Validation And Submit The Form

Hi,

I have a form which add states data to the states table(code, name, status). I enabled the client side validation and submit the form. But after checking the state table multiple recodes were added instead of one record.

_form.php inside view





                           <div style="padding-left: 20px" id="box-content">

                               <div class="form">

                                   <?php

                                   $form = $this->beginWidget('CActiveForm', array(

                                       'id' => 'state-form',                                                                             

                                       'enableClientValidation'=>true,//                                   

                                       'clientOptions' => array(

                                        'validateOnSubmit' => true,

                                   ),


                                   ));

                                   ?>

                                   <p class="note">Fields with <span class="required">*</span> are required.</p>

                                   <?php //echo $form->errorSummary($model); ?>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'code'); ?>

                                       <?php echo $form->textField($model, 'code', array('class'=>'form-control mystyle', 'style'=>'width: 10%; ', 'size' => 60, 'maxlength' => 2)); ?>

                                       <?php echo $form->error($model, 'code'); ?>

                                   </div>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'name'); ?>

                                       <?php echo $form->textField($model, 'name', array('class'=>'form-control', 'style'=>'width: 40%', 'size' => 60, 'maxlength' => 100)); ?>

                                       <?php echo $form->error($model, 'name'); ?>

                                   </div>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'status'); ?>

                                       <?php echo $form->dropDownList($model, 'status', array(1 => 'Enabled', 0 => 'Disabled'), array('class'=>'form-control', 'style'=>'width: 10%')); ?>

                                       <?php echo $form->error($model, 'status'); ?>

                                   </div>

                                   <br>

                                   <button onclick="$('#state-form').submit();" class="btn btn-xs btn-default">Save</button>

                                   <a class="btn btn-default" onclick="document.location = 'backend.php?r=state/admin'" >Cancel</a>


                                   <?php $this->endWidget(); ?>

               

                               </div><!-- form -->



StateController.php




public function actionCreate()

	{

		$model = new State;


		// Uncomment the following line if AJAX validation is needed

		//$this->performAjaxValidation($model);


		if(isset($_POST['State']))

		{

			$model->attributes=$_POST['State'];

			if($model->save())

            {

                Yii::app()->user->setFlash('success', "Success: You have modified State!");

                $this->redirect(array('state/admin'));

            }

		}


		$this->render('_form',array(

			'model'=>$model,

		));

	}



State.php




public function tableName()

	{

		return 'state';

	}


	/**

	 * @return array validation rules for model attributes.

	 */

	public function rules()

	{

		// NOTE: you should only define rules for those attributes that

		// will receive user inputs.

		return array(

			array('code','required'),

			array('name','required'), 

               array('status', 'numerical', 'integerOnly'=>true),

			array('code', 'length', 'max'=>2),

			array('name', 'length', 'max'=>100),

			// The following rule is used by search().

			// Please remove those attributes that should not be searched.

			array('state_id, code, name, status', 'safe', 'on'=>'search'),

		);

	}



It would be very grateful if any one can help on this matter.

Hi,

Have u checked how many request triggered on single click of submit button.

Is it single or many… this is very important to note

Hi Chandran,

Thanks for the reply and how do I do that?

open console browser…

firefox

chrome

do u know how to do that ? check above link :)

Hi,

Thank you for the reply. I will check this.

Hi Chandran,

I check this out. And after put client side validation and when try to add new

state it add multiple records. I checked this using web console in Fire Fox. It sends more than one POST requests. Screen shot of it is given below.

https://www.dropbox.com/s/8l0r53xcj6tqbzp/state_error.jpg

And I even change the view coding as below and tried and but in vain.




<div style="padding-left: 20px" id="box-content">

                               <div class="form">

                                   <?php

                                   $form = $this->beginWidget('CActiveForm', array(

                                       'id' => 'state-form',                                                                             

                                       'enableAjaxValidation'=>true,

                                       'htmlOptions' => array('data-ajax' => 'false'),

                                        'clientOptions'=>array(

                                            'validateOnSubmit'=>true,

                                        ),


                                   ));

                                   ?>



Strange thing is that I used the above code(client side validation) in sample yii site and it works their.

we used bootstrap theme in create state form. So do you think it has to do something with multiple POSTs.

If you could give any help on this and it would really grateful as we struck here for 2 days.

If you have ‘enableAjaxValidation’=>true,

then read the comment text

// Uncomment the following line if AJAX validation is needed

//$this->performAjaxValidation($model);

Hi ORey,

Yeah ORey that’s true. My initial code was like below




<?php

                                   $form = $this->beginWidget('CActiveForm', array(

                                       'id' => 'state-form',                                                                             

                                       'enableClientValidation'=>true,//                                   

                                       'clientOptions' => array(

                                        'validateOnSubmit' => true,

                                   ),


                                   ));

                                   ?>




controller




$model = new State;


		// Uncomment the following line if AJAX validation is needed

		//$this->performAjaxValidation($model);


		if(isset($_POST['State']))

		{

			$model->attributes=$_POST['State'];

			if($model->save())

            {

                Yii::app()->user->setFlash('success', "Success: You have modified State!");

                $this->redirect(array('state/admin'));

            }

		}


		$this->render('_form',array(

			'model'=>$model,

		));



Because above code did result multiple records, I tried different possibilities. :)

And I still get lot of records one i submit the form

https://www.dropbox.com/s/xelzeueyop0ks1q/state_error_table.jpg

Hi,

I have some strike on your points and your code :(

if you are using bootstrap, t[size=2]hen verify your resource on webconsole , is it loading multiple jquery OR jquery.min?[/size]

[size=2]

[/size]

i dont know why are you using jquery form submit :)

use yii framework submit button… i think it can solve your problems

like below code




		<?php echo  CHtml::submitButton('Speichern',array('id'=>'floatbtn'));?>



This will also post your data :)

please dont try to add ordinary html inside YII code… unless you dont have any view from YII framework

like below your code





<button onclick="$('#state-form').submit();" class="btn btn-xs btn-default">Save</button>

  <a class="btn btn-default" onclick="document.location = 'backend.php?r=state/admin'" >Cancel</a>




I am sure you have problem only because of this mix coding… try to use one way :)

Hi Chandran,

Thanks for the help. I totally agree with you regarding mixing yii with PHP. But thing is I did that because it was nearing the deadline and some time it is very time consuming and difficult to do things in yii way. I thought doing this project in yii it would save time. But now I am beginning to think If I have done this in PHP it would be bit more easier and more flexible than yii. :) . May be it is with my fault because it seems that you guys doing things easily with yii :). This is my first project doing using a framework. And one of my friend who used CodeIgniter told me yii class reference(documentation) is more difficult to grasp. I think under each of function it would be easier if there is an example. May be once the yii community grows they will include more examples like PHP manual.

By the way I used below code and tested and it seems that it will not enter multiple submissions any more.

view




<div style="padding-left: 20px" id="box-content">

                               <div class="form">

                                   <?php

                                   $form = $this->beginWidget('CActiveForm', array(

                                       'id' => 'state-form',                                                                             

                                       'enableClientValidation'=>true,

                                        'enableAjaxValidation'=>false,

                                        'htmlOptions' => array('data-ajax' => 'false'),

                                            'clientOptions'=>array(

                                                'validateOnSubmit'=>true,

                                            ),


                                   ));

                                   ?>

                                   <p class="note">Fields with <span class="required">*</span> are required.</p>

                                   <?php //echo $form->errorSummary($model); ?>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'code'); ?>

                                       <?php echo $form->textField($model, 'code', array('class'=>'form-control mystyle', 'style'=>'width: 10%; ', 'size' => 60, 'maxlength' => 2)); ?>

                                       <?php echo $form->error($model, 'code'); ?>

                                   </div>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'name'); ?>

                                       <?php echo $form->textField($model, 'name', array('class'=>'form-control', 'style'=>'width: 40%', 'size' => 60, 'maxlength' => 100)); ?>

                                       <?php echo $form->error($model, 'name'); ?>

                                   </div>

               

                                   <div class="row">

                                       <?php echo $form->labelEx($model, 'status'); ?>

                                       <?php echo $form->dropDownList($model, 'status', array(1 => 'Enabled', 0 => 'Disabled'), array('class'=>'form-control', 'style'=>'width: 10%')); ?>

                                       <?php echo $form->error($model, 'status'); ?>

                                   </div>

                                   <br>

                                   <button onclick="$('#state-form').submit();" class="btn btn-default">Save</button>

                                   <a class="btn btn-default" onclick="document.location = 'backend.php?r=state/admin'" >Cancel</a>

                                   <?php $this->endWidget(); ?>

               

                               </div><!-- form -->

                           </div>



controller




/**

	 * Creates a new model.

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

	 */

	public function actionCreate()

	{

		$model = new State;


		// Uncomment the following line if AJAX validation is needed

		//$this->performAjaxValidation($model);


		if(isset($_POST['State']))

		{

			$model->attributes=$_POST['State'];

			if($model->save())

            {

                Yii::app()->user->setFlash('success', "Success: You have modified State!");

                $this->redirect(array('state/admin'));

            }

		}


		$this->render('_form',array(

			'model'=>$model,

		));

	}



And I really appreciate help from you guys to get through difficult times like this :)

Hi,

Sorry for being bit inconsistent. I think it is the bootstrap causing the strange behavior for multiple submissions. Because when I add the bootstrap to another form it also submit multiple times. And Even though I thought state form is okay It stared to submit multiple times.

Does any one got clue for this thing?

Hi,

one more clue

have u tried with YII submitbutton ?

I hope when u replace with this button. your problem will get solved…

when u need to make any ajax call on this button… then use ajaxsubmitbutton… it will help u to resolve your problem

cheers :)

Hi Chandran,

After putting Yii submit button it worked. Thank you very much. The modified code is given below.




<?php

                                    $form = $this->beginWidget('CActiveForm', array(

                                        'id' => 'state-form',

                                        'action' => 'backend.php?r=state/create',

                                        'method' => 'post',

                                        'enableClientValidation' => true,                                      

                                        'htmlOptions' => array('data-ajax' => 'false', 'class' => 'form-horizontal'),

                                        'clientOptions' => array(

                                            'validateOnSubmit' => true,

                                        ),

                                    ));

                                    ?>

                                    <p class="note">Fields with <span class="required">*</span> are required.</p>

                                    <?php //echo $form->errorSummary($model);  ?>


                                    <div class="form-group">

                                        <?php echo $form->labelEx($model, 'code', array('class' => 'control-label col-md-2')); ?>

                                        <div class="col-md-8">

                                            <?php echo $form->textField($model, 'code', array('class' => 'form-control', 'maxlength' => 2)); ?>

                                        </div>     

                                        <?php echo $form->error($model, 'code'); ?>

                                    </div>


                                    <div class="form-group">

                                        <?php echo $form->labelEx($model, 'name', array('class' => 'control-label col-md-2')); ?>

                                        <div class="col-md-8">

                                            <?php echo $form->textField($model, 'name', array('class' => 'form-control', 'maxlength' => 100)); ?>

                                        </div>    

                                        <?php echo $form->error($model, 'name'); ?>

                                    </div>


                                    <div class="form-group">

                                        <?php echo $form->labelEx($model, 'status', array('class' => 'control-label col-md-2')); ?>

                                        <div class="col-md-8">

                                            <?php echo $form->dropDownList($model, 'status', array(1 => 'Enabled', 0 => 'Disabled'), array('class' => 'form-control')); ?>

                                        </div>    

                                        <?php echo $form->error($model, 'status'); ?>

                                    </div>


                                    <div class="form-group">

                                        <label class="control-label col-md-2 required"></label>

                                        <div class="col-md-8">

                                            <?php echo CHtml::submitButton('Create', array('class'=>'btn btn-primary')); ?>

                                        </div>

                                    </div>




                                    <?php $this->endWidget(); ?>