submit form from <div> html value in codeigneter

Question

i have problem using form in codeigneter when to submit value from div html,

example view

<label for="title">Title:</label>
<input type="text" class="form_field" id="title" name="title" size="30" value="<?php echo set_value('title', isset($default['title']) ? $default['title'] : ''); ?>" />
  <div class="form_field" name="contentbox" id="contentbox" contenteditable="true"> 
   <?php echo set_value('contentbox', isset($default['contentbox']) ? $default['contentbox'] : ''); ?></div>

in div id="contentbox" is set contenteditable="true", and i will get dinamic value,

controller

....

$data = array( 'title' => $this->input->post('title'),
           'content' => $this->input->post('contentbox'));
$this->my_model->add($data);

....

but in controller i can't get value div id="contentbox" , i have problem input to database,when i'm typing "sometext" in div id="contentbox" value always "0"

Answer 1

You can use the jquery cookie plugin to grab CI csrf token and include it before this function

jQuery

 (function($){

        var do_ajax = function(data, scope){

            // depending on your version of CI csrf token name will differ
            // newer versions of CI use the name in your application/config file

            data = {content : data, csrf_token : $.cookie('csrf_token')}

            $.ajax({
                url : BASE_PATH + 'some_class/some_method',
                data: data,
                context : scope,
                type : 'POST',
                dataType : 'json',
                success : function(callback){
                   //check the status first!

                   var $this = $(this);
                   $this.find(".msg").fadeIn();
                   $this.find("#contentbox").html(data);
                }
            });
        }

        var contents = {
            init: function(){
                if($("#editme"))
                   this.contentEditable();
            },
            contentEditable : function(){
                var scope    = $("#editme"),
                    eicon    = $(".icon-editable").hide(),
                    emessage = $(".msg").hide(),
                    econtent = $("#contentbox");

            econtent.hover(function(){
               eicon.show();
            }, function(){
               eicon.hide();
            });

            econtent.blur(function(){
               do_ajax($(this).html(), scope);
            });

            }        
        }

        $(function(){
            contents.init();
        });

    })(jQuery);

HTML

<div id="editme" class="editme">
    <span class="icon-editable">✎</span>
    <span class="msg">Content updated!</span>
    <h4>Some relevant title</h4>
    <div id="contentbox" class="contentbox" contenteditable="true">
        This is editable...
    </div>
</div>

CSS

div.editme{
    position:relative;
    background:#ffffff;
    padding:30px 8px 8px 8px;
}
span.icon-editable, span.msg{
    position:absolute;
    top:0;
}
span.icon-editable{
    left:0;
    border:1px solid #d1d1d1;
    border-top:0;
    border-left:0;
    font-size:1em;
    line-height:1.2em;
}
span.msg{
    right:0;
    font-size:0.8em;
    line-height:1.2em;
    color:#fafafa;
    background:green;
    padding:3px;
}

PHP

class some_class extends Controller{

    public function some_method(){
        if($this->input->is_ajax_request())
        {
           $data = array(
               'content'  => $this->input->post('content')
           );

           if($this->my_model->add($data))
           {
              $responce = array(
                  'status' => 'ok'
              );
           }
           else
           {
              $responce = array(
                  'status' => 'notok'
              );
           }
           echo json_encode($responce);  
        }
        else
        {
           show_404();
        }
    }
}

Test version without ajax request CLICK HERE