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

i have model fields user info. , crud generator created views , modified view, form view, below

here have hidden editing profile part , when user clicks on edit shows popup , editfields options. problem when submit submits whole form need submit edited part , 1 more problem when edit , cancel form, still keeps value edited , saves when submit on other portion of form. please suggest how can achieve partial submit of 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(); ?> 

you're trying 2 different things:

1. split form
2. avoid sending empty inputs server

for first thing can try 1 of following 2 options:

1. create various forms, each of 1 have own ajaxsubmitbutton send data server
2. leave form intact, instead of using ajaxsubmitbuton, use various normal 'chtml::htmlbutton' , specify in $htmloptions array custom js function called in onclick event. these js functions (one each button, example) collect data input, , not others, , responsible of sending data through ajax controller.

for second thing, can use js functions in 'onclick' handlers, said before, or cand modify little code following: use 'beforesend' , 'complete' handlers of jquery ajax call ($ajaxoptions in chtml::ajaxsubmitbutton) create attribute "disabled" in fields empty before send, , delete them after complete. 'serialize' jquery call ajax submit button uses, not encode attributes "disabled".