I have an ajax form which gets submitted twice and hence same record being replicated twice in the db.
This particular cases happens only when the Client side validation is turned on.
I have also tried using the e.stopImmediatePropagation() but this will disable the error messages from being displayed as well which is not a solution in my case.
I want both the verification and the form submission to work fine without replication.
Here’s my code:
Controller:
public function actionIndex() {
$model = new Transaction();
if (isset($_POST['ajax']) && $_POST['ajax'] === 'transaction-form') {
echo CActiveForm::validate($model);
Yii::app()->end();
}
if (Yii::app()->request->isAjaxRequest) {
$model->attributes = $_POST['Transaction'];
if($model->save()){
echo 'Success';
}
Yii::app()->end();
}
$this->render('index', array('model' => $model));
}
View File:
<div class="form">
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'transaction-form',
'action' => Yii::app()->createUrl('transaction/index'),
'enableAjaxValidation'=>true,
'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,'BilledAmount'); ?>
<?php echo $form->textField($model,'BilledAmount',array('size'=>10,'maxlength'=>10)); ?>
<?php echo $form->error($model,'BilledAmount'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'ChargedAmount'); ?>
<?php echo $form->textField($model,'ChargedAmount',array('size'=>10,'maxlength'=>10)); ?>
<?php echo $form->error($model,'ChargedAmount'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'CardExpiry'); ?>
<?php echo $form->textField($model,'CardExpiry',array('size'=>4,'maxlength'=>4)); ?>
<?php echo $form->error($model,'CardExpiry'); ?>
</div>
<div class="row buttons">
<input name="submit" type="submit" value="Submit">
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<script>
$(function () {
$('form#transaction-form').on('submit', function (e) {
e.preventDefault();
var action = $("#transaction-form").attr('action');
var datas = $("#transaction-form").serialize();
$.ajax({
type: 'post',
url: action,
data: datas,
success: function (msg) {
if(msg == 'Success'){
location.reload();
}
}
});
return false;
});