Ajax表单提交

I am new to Ajax. i wanna submit a form through Ajax and save the data sent to the database.

Something like the Facebook Status update - where text area is disabled and then submited. once its saved in the database it comes back and updates the status message on the top. and again the text area is enabled.

this is my form

  <?php echo $form->create('StatusMessage', array('type' => 'post', 'url' => '/account/updateStatus', 'id' => 'updateStatus')); ?> 
  <?php echo $this->Form->input('id', array('value' => $user['User']['id'],'type' => 'hidden')); ?> 
  <?php echo $this->Form->textarea('message', array('value' => 'What have you been eating ?')); ?>

Edited: Modified as suggested by 0 RioTera

Cakephp Action

function updateStatus() {

    $this->autoRender = false;
    if($this->RequestHandler->isAjax()) {
        $this->layout = 'ajax'; //THIS LINE NEWLY ADDED

        $this->data['StatusMessage']['pid'] = 0;
        $this->data['StatusMessage']['commenters_item_id'] = $this->data['StatusMessage']['item_id'] = $this->User->Item->itemId('1', $this->data['StatusMessage']['id']);
        unset($this->data['StatusMessage']['id']);
        //debug($this->data);

        if($this->User->Item->StatusMessage->save($this->data)) {
        return true;
        } else {
            echo 'not saved';
        }
    } else {
        echo 'no';
    }

}

Javascript code

$(document).ready(function () {
    var options = {
        target: '#output2',
        // target element(s) to be updated with server response 
        beforeSubmit: showRequest,
        // pre-submit callback 
        success: showResponse, // post-submit callback 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };

    $('#updateStatus').submit(function () {
        // make your ajax call
        $(this).ajaxSubmit(options);
        return false; // prevent a new request
    });

    function showRequest(formData, jqForm, options) {
        $('#StatusMessageMessage').attr('disabled', true);
    }

    function showResponse(responseText, statusText, xhr, $form) {
        $('#StatusMessageMessage').attr('disabled', false);
        alert('shdsd');
    }
});

Using jquery and http://jquery.malsup.com/form/ plugin:

$(document).ready(function() { 
    var options = { 
        target:        '#message',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };
    $('#updateStatus').ajaxForm(options); 
});

function showRequest(formData, jqForm, options) {
    $('#StatusMessageMessage').attr('disabled', true);
}

function showResponse(responseText, statusText, xhr, $form)  { 
    $('#StatusMessageMessage').attr('disabled', false);
}

I didn't try it but I hope it helps you

i hope that this tutorial will help

http://mohammed-magdy.blogspot.com/2010/10/ajaxformsubmitter.html

This is a function I use to submit forms in cakephp 3.x it uses sweet alerts but that can be changed to a normal alert. It's very variable simply put an action in your controller to catch the form submission. Also the location reload will reload the data to give the user immediate feedback. That can be taken out.

$('#myForm').submit(function(e) {
    // Catch form submit
    e.preventDefault();

    $form = $(this);
    // console.log($form);
    // Get form data
    $form_data = $form.serialize();
    $form_action = $form.attr('action') + '.json';
    // Do ajax post to cake add function instead
    $.ajax({
        type   : "PUT",
        url    : $form_action,
        data   : $form_data,
        success: function(data) {
            swal({
                title: "Updated!", 
                text: "Your entity was updated successfully", 
                type: "success"
            },
            function(){
                    location.reload(true);
            });
        }
    });
});

This is what a simple action would look like in the controller;

public function updateEntity($id = null){
    $entity = $this->EntityName->get($id);
    $entity = json_encode($this->request->data);
    $this->EntityName->save($entity);
}