How to Split a form in subsections in yii to achieve partial submit of a single form

Question

i have a model with all the fields about user info. and with crud generator i created views and modified the view, form view, as below

Here i have hidden the editing profile part and when user clicks on edit it shows popup and editfields options. Now the problem is when i submit it submits whole form but i need to submit only the edited part and one more problem is that when i edit something and then cancel the form, it still keeps the value edited and saves then when i submit on any other portion of the form. Please suggest how can i achieve the partial submit of the form

<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'my-form',
'enableAjaxValidation'=>true,
'htmlOptions'=>array('enctype'=>'multipart/form-data'),
'action' => Yii::app()->createUrl('/userprofile/editprofile&id='.$model->id),
)); 
?>
<h4>Edit Profile Pic</h4>
<div>
<?php echo CHtml::fileField('profilePic'); ?>
<div id="editpic"></div>
<div class="btns" id="uploadbutton">            
<?php echo CHtml::ajaxSubmitButton('Update', $this->createUrl('/rageprofile/editprofile&id='.$model->id), array('update'=>'#targetdiv'));?>
</div>
</div>
<div class="editbutton">&#9998; Edit</div>
<div class="eitit edly einfo" style="z-index:9001;" >
<span class="close">&#10006;</span>
<h4>Basic Info</h4>
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'firstName'); ?>
<?php echo $form->labelEx($model,'middleName'); ?>
<?php echo $form->textField($model,'middleName',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'middleName'); ?>
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'lastName'); ?><br>
<?php echo $form->labelEx($model,'DOB'); ?>
<?php echo $form->textField($model,'d_o_b',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'d_o_b'); ?><br>
<?php echo $form->textField($model,'m_o_b',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'m_o_b'); ?><br>
<?php echo $form->textField($model,'y_o_b',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'y_o_b'); ?><br>
<?php echo $form->labelEx($model,'City'); ?>
<?php echo $form->textField($model,'city',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'city'); ?><br>
<?php echo $form->labelEx($model,'State'); ?>
<?php echo $form->textField($model,'state',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'state'); ?><br>
<?php echo $form->labelEx($model,'Country'); ?>
<?php echo $form->textField($model,'country',array('size'=>30,'maxlength'=>30)); ?>
<?php echo $form->error($model,'country'); ?><br>
<?php echo CHtml::ajaxSubmitButton('Update', $this->createUrl('/rageprofile/editprofile&id='.$model->id), array('update'=>'#targetdiv'));?>
</div>
</div>
</div>
<?php $this->endWidget(); ?>

Answer 1

You're trying to get two different things:

1. Split a form
2. Avoid sending empty inputs to server

For the first thing you can try to one of the following two options:

1. Create various forms, each of one will have its own ajaxSubmitButton to send data to server
2. Leave your form intact, but instead of using an ajaxSubmitButon, use a various normal 'CHtml::htmlButton' and specify in his $htmlOptions array a custom js function to be called in the onclick event. These js functions (one for each button, for example) will collect data from some input, and not others, and will be responsible of sending data through ajax to the controller.

For the second thing, you can use the js functions in the 'onclick' handlers, as I said before, or you cand modify just a little your code to do the following: Use the 'beforeSend' and 'complete' handlers of jQuery ajax call ($ajaxOptions in CHtml::ajaxSubmitButton) to create the attribute "disabled" in that fields that are empty before send, and delete them after complete. The 'serialize' jquery call that the ajax submit button uses, will not encode those attributes that are "disabled".