ExpenseCount/app/View/Homes/create_family_expense.ctp

<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>js/jquery-1.10.2.js" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>js/jquery-ui.js" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/expense.css"/>

<style>
    .switch-container{
        margin-left: 140px !important;
    }
    .switch{
        width: 50px !important;
    }
input[type="submit"] {
    background: #0757a4;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 7px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: none;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover{
	background: #104374;
}
.loginBox label, .regBox label {
    display: inline-block;
    padding-top: 5px;
    vertical-align: top;
    width: 120px;
    padding-right: 5px;
    font-weight: normal;
}
.comments input[type="text"], .comments textarea, .loginBox input[type="text"], .loginBox textarea, .loginBox input[type="password"] {
    width: 320px;
    padding: 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #b6b6b6;
    margin-bottom: 8px;
}
</style>
<div class="bodyContent shadow">

            <h1><?php echo __("LBL_CREATE_FAMILY_BUDGET"); ?></h1>
            <p><?php echo __("LBL_FILLUP_THE_FORM_AND_CLICK"); ?> </p>
            
            <div class="pageDivider"></div>
 
            
      <?php  echo $this->Form->create(null, array('class'=>'loginBox','url' => array('controller' => 'Home', 'action' => 'createFamilyExpense'))); ?>

             
                
                    <label for="loginTitle"><span>*</span><?php echo __("LBL_TITLE"); ?></label>
                    <?php echo $this->Form->input('title',array('Placeholder'=>'Expenses of January,2017','div'=>false,'title' => __("TITLE_NOT_EMPTY_MAX_CHAR"),'label'=>false, 'required'=>'false'));?>
                 

				<p id="error_title" class="formError"></p>
                
                                    
                 <p>
                   <label for="loginEmail"><?php echo __("LBL_EMAIL"); ?></label>
                   <?php echo $this->Form->input('emails',array('Placeholder'=>'youremail@gmail.com','title' => __("LBL_PLEASE_PROVIDE_EMAIL"),'label'=>false,'div'=>false,'required'=>'false'));?> <button type="button"  data-toggle="tooltip" data-placement="right" class="btn btn-primary" title="<?php echo __("LBL_EXPENSECOUNT_LINK_SENT_EMAIL"); ?>">?</button>
                </p>
                <p  id="error_emails" class="formError"></p>
 
                
                 <p>
                    <label for="loginName"><span>*</span><?php echo __("LBL_CURRENCY"); ?></label>
                    <?php echo $this->Form->input('currency',array('label'=>false,'div'=>false,'value'=>'USD')) ;?>  (USD,AUD,EUR etc.) 
                </p>
                <p id="error_currency" class="formError"></p>
                
                 <p>
                   <label><?php echo __("LBL_DESCRIPTION"); ?></label>
                    <?php echo $this->Form->textarea('description',array('div'=>false));?> 
                    <?php  echo $this->Form->input('captcha',array('label'=>false,'div'=>false,'type' => 'hidden','value'=>$captcha));?>
                    
                </p>
                         <p  id="error_captcha" class="formError"></p>
                <?php if(RESTRICTION_MODE_HIDE){ ?>
                    <div class="row">
                        <div class="switch-container">
                            <label class="switch">
                                <?php echo $this->Form->checkbox('restrictedMode', array('div' => false,'onchange'=>'toggleRestrictedMode(this)')); ?>
                                <span class="slider"></span>
                            </label>
                            <span id="restrictedLabel">Restricted Mode: OFF</span>
                        </div>
                    </div>

                <?php } ?>

                <p class="captcha"  >
                 <label> </label>
 					<input type="submit"   name="data[Expense][loginBoxSubmit]" id="loginBoxSubmit" value="<?php echo __('LBL_CREATE');?>" />
                    <img id="loadingGif" style="display: none;" src="<?php echo CDN_URL; ?>images/loading.gif" alt="">
        			 
                </p>
                 <input type=hidden name="data[Expense][createDate]" id="expense_create_date" >
            </form>

        </div>

<script src="<?php echo CDN_URL; ?>js/expense.js?v=1.0.1"></script>
<script type="text/javascript">

 $(document).ready(function () {
 
    $("#ExpenseTitle").val("");    
   $("#ExpenseEmails").val("");
   $("#ExpenseDescription").val("");
   
     $('#ExpenseCreateFamilyExpenseForm').submit(function(){
     
     
     $("#error_title").text("");
     $("#error_emails").text("");
     $("#error_participants").text("");
     $("#error_currency").text("");
     $("#error_captcha").text("");
     
     //set javascript  date
     document.getElementById("expense_create_date").value = getFormattedDate();
     
        //serialize form data
        var formData = $(this).serialize();
        //get form action
        var formUrl = $(this).attr('action');
         $("#loadingGif").css("display","inline-block");
       $('#error_title').text("");
       $('#error_participants').text("");
      $('#ExpenseCreateGroupExpenseForm').find('error_').text("");
         $('[id^=error_]').text("");
        $.ajax({
            type: 'POST',
            url: formUrl,
            data: formData,
            success: function(data,textStatus,xhr){
               // alert(data);
                    if(data.trim() == "+000"){     
                    	                  
                    	document.getElementById("ExpenseCreateFamilyExpenseForm").submit();
                    } else{
                    		data  = 	data.trim() ;
 						var lineArray = data.split("#"); 
						var totalLine = lineArray.length-1;
						for(var i=0;i<totalLine;i++){
							var msgArray = lineArray[i].split("|"); 							
							$('#error_'+msgArray[0]).text(msgArray[1]);
							 
						}
                    }
                $("#loadingGif").css("display","none");
            },
            error: function(xhr,textStatus,error){
                  //  alert(error);
            }
        });	
            
        return false;
    });
});

</script>