jQuery Form Doesn't Post

The total sum of calories is the meal plan created by dragging and dropping tiles to the right side.

In my controller:
$this->set('foo3', $this->request->getData());

In my template:
print_r($foo3);

returns an empty array.

It’s a form with hidden inputs so $_REQUEST[] shouldn’t be returning an empty array. The problem seems to be with my PHP form not the ajax call.

debug(file_get_contents("php://input")); returns an empty string

In my php.ini I have:

upload_max_filesize=2M
post_max_size=8M
max_input_vars = 1000

Are those good values?

My problem is that I have hidden inputs for fields that aren’t in my mealplans table.

I added a couple of hidden inputs for fields that are in my mealplans table but I still get an empty post array.

The data from the hidden inputs with fields that are in my mealplans table got saved to the database but the post array is still empty.

debug(file_get_contents("php://input")); returned the hidden inputs once and then when I reloaded the page, it was empty again.

@Zuluru, I do need javascript to calculate the total calories because the total gets updated every time a tile is dragged to the droppable box. Draggable and droppable capabilities are enabled with jQuery.

The form that I posted had an error that I couldn’t edit away because the edit button wasn’t available. The hidden input for cals_per_serving shouldn’t have a name option set. Here I’ve commented out the name option:

echo $this->Form->hidden('cals_per_serving'. $tile->id, [
'id' => 'cals_per_serving'. $tile->id,
'multiple' => 'true',
//'name' => 'cals_per_serving',//can't have multiple inputs with the same name
'value' => $tile->cals_per_serving,
]);

In another forum, I read that post_max_size must be less than upload_max_filesize so I changed my php.ini to: upload_max_filesize=9M

The following code successfully creates a query string but the query string isn’t appended to the target url when being submitted to the response page.

$("#myId2").click(function() {
$('#result').append(total);
$("#myForm").submit();//this goes to the edit page
var total_cals = $("#result").html();
var querystring = "?total calories="+total_cals;
$.ajax({
type : 'GET',
url : targetUrl/querystring,
dataType: "text",
data: querystring,
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } ,
success : function(data) {
alert(querystring);
    },
error: function () {
alert('error');
     }	
}); 
});

I added this to the function:

var foo = JSON.stringify(total_cals);
var querystring = "?total calories="+foo;

I tried:

url : targetUrl + querystring,

but then it went to the error function.

echo  $this->Form->create($mealplan, ['id'=>'myForm', 'type' => 'get']);
//submits to the same page and query string is set but not with the ajax query string.

echo  $this->Form->create($mealplan, ['id'=>'myForm', 'type' => 'get', 'url' => ['action' => 'edit']]);
//submits to the edit page with the PHP query string but no id is sent so it throws an error.

This is what I’m working on now. It doesn’t use the jquery submit function. It submits according to the PHP method in my controller even though I used event.preventDefault to stop PHP form submission.

$("#myId").click(function() {
$('#result').append(total);
$("#myForm2").submit(function(event){	
event.preventDefault;
var total_cals = $("#result").html();
var foo = JSON.stringify(total_cals);
var querystring = "?total_calories="+foo;
	 
$.ajax({
type : 'GET',
url : targetUrl,
dataType: "text",
data: querystring,
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } ,
success : function(data) {
alert(querystring);
    },
error: function () {
alert('error');
     }	
});
}); 
});

I changed my error function to include a more detailed message like this:

error: function(jqXHR, textStatus, errorThrown) {
    var errorMessage = jqXHR.responseText;
    if (errorMessage.length > 0) {
        alert(errorMessage);
    }
}

I got this error: Error: CSRF token from either the request body or request headers did not match or is missing.

CSRF token issue

try to use this
beforeSend: function (xhr) {
xhr.setRequestHeader(‘X-CSRF-Token’,<?= json_encode($this->request->getParam('_csrfToken')); ?>);
},

 $.ajax({
                type: 'POST',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('X-CSRF-Token',<?= json_encode($this->request->getParam('_csrfToken')); ?>);
                },
                data:{id:id,name:name,type:type},
                url: 'users/get_popupmake/' + id,
                success: function (response) {},
                error: function (err) {},
           });

I get the error message: Method “param()” does not exist. I’m using cakephp version 4.