Jquery – Form submission in cakephp using JQuery

cakephpformsjquery

I have created the Form as like

<?php echo $form->create('Result',array('action'=>'submit'));?>
    //some input text fields,texarea fields
    <?php echo $form->end('submit');?>

In my JQuery code, i have written like,

<script>
    $(document).ready(function(){
        var str,fields;
        function showValues() {
            str = $("form").serialize();
            $("#results").text(str);
        }

        $(".submit").click(function (){
            alert(str);
            $.ajax({
                type: "POST",
                url:"/results/submit"
                data: "str="+str,
                success: function(msg){
                    alert( "Data Saved: " + msg);
                }

            });
            return false;
        });//submit click
    });//document ready
</script>

Edit: Added Url to the Ajax,

  Now when i click the submit button it alerts str correctly.. 
  Like my alert value is 
      _method=POST&name1=value1&name2=value2 

  But in the next alert of Data saved it shows only the _method=POST 

In my Results Controller

 <?php
class ResultsController extends AppController 
{

var $name = 'Results';
var $helpers=array('Html','Ajax','Javascript','Form');
var $components = array( 'RequestHandler','Email');
var $uses=array('Form','User','Attribute','Result');
   function submit($id = null)
   {

    $str=$_POST['str'];
    echo "POSTED value ".$str;
   // echo $this->params['form']['str'];
  }

}

and my Results Table is having (id,form_id,attribute_id,label(eg .name1,name2),value(eg...value1,value2) )

Please suggest me..
Any suggestions?

Best Solution

Few issues:

  • You are sending a Ajax Request,when the Submit button is clicked, but not stopping the click event with something like, so it will in any case redirect to the /submit page
        $(".submit").click(function (){
           // do something .. in your case Ajax request
           return false
        });

  • So now when the form submits, the Ajax request gets sent but you are redirected to /submit page anyway, which I think has populated the GET array instead of POST.

  • Also the url is missing in the Ajax request

Try using the Jquery Form Plugin, its makes life a lot easier http://malsup.com/jquery/form/