Internal server error MAMP calling PHP function with jQuery ajax

Question

I'm very sorry if this is a duplicate of triplicate, but I've been plowing through all the questions concerning calling a PHP function through ajax - and I just can't get it to work. I'm using MAMP and my code looks like this:

index.html

<form id="form">
  <h2 class="form-header" id="form-header"></h2>
  <p class="form-instruction" id="form-instruction"></p>
  <div class="inputs" id="inputs"></div>
  <div class="next-step" id="next-step">
    <button id="btn-next" onclick="result()" type="button" class="btn-next">Go to step 2</button>or
    <button class="btn-cancel" id="btn-cancel" type="button" onclick="init()">Cancel</button>
  </div>
</form>

Input fields are added dynamically through init() function in index.js :

let step;
let shapes = ['rectangle', 'circle', 'elipse','square'];
let shape;

function init(){
  step = 1;
  if(inputs.innerHTML != ""){
    inputs.innerHTML = "";
  };

  form_header.innerHTML = "Step " + step + " : Select your shape";
  form_instruction.innerHTML = 'Please select the shape that you would like to calculate the area of and press the button "Go to step 2"'
  btn.innerHTML = "Go to step 2";
  for (var i = 0; i < shapes.length; i++) {
    inputs.innerHTML += '<div class="input"><input type="radio" id="' + shapes[i] + '" name="select" value="' + shapes[i] + '"><label for="' + shapes[i] + '">' + shapes[i] + '</label></div>'
  }
}

..and function result() is called onclick from index.html:

var width;
var height;

function result(){
  var url = shape.charAt(0).toUpperCase() + shape.slice(1);

  var valW = document.getElementById(shape + "w").value;
  width = parseInt(valW);

  var valH = document.getElementById(shape + "h");
  if (valH){
    valH = valH.value
    height = parseInt(valH);
  }

  $.ajax({
    type: 'POST',
    url: "./shapeHandler.php",
    data: {
      shape: url,
      width: width,
      height: height
    },
    cache: false,
    success: function (resp) {
      console.log(resp);
    },
    error: function(xhr, status, err){
      console.log(xhr, status);
      console.log(err);
    }
  });
}

shapeHandler.php

<?php
include './classes/Circle.php';
include './classes/Rectangle.php';
include './classes/Square.php';
include './classes/Elipse.php';

$width = $_POST["width"];
$shape = $_POST["shape"];
if( isset($_POST["height"])){
  $height = $_POST["height"];
  echo "Height: " . $height . ". ";
}

echo "Shape: " . $shape . ". Width: " . $width;

switch($shape){
  case "Circle":
    $circle = new Circle($width);
    $circle->calculateArea();
    echo ". >>>> RESULT: " . json_encode($circle);
    break;
  case "Rectangle":
    $rectangle = new Rectangle($width, $height);
    $rectangle->calculateArea();
    echo ". >>>> RESULT: " . json_encode($rectangle);
    break;
  case "Elipse":
    $elipse = new Elipse($width, $height);
    $elipse->calculateArea();
    echo ". >>>> RESULT: " . json_encode($elipse);
    break;
  case "Square":
    $square = new Square($width);
    $square->calculateArea();
    echo ". >>>> RESULT: " . json_encode($square);
    break;
  default:
    echo "No shape was selected";
};

ex Circle.php

<?php

  class Circle {
    private $width;
    private $pi = 3.14159;

    public function __construct($width){
      $this->width = $width;
    }

    public function calculateArea(){
     return $this->width * $this->width * $this->pi;
    }
  }

But I only get a empty object "{}" when calling the function calculateArea():

any input would be greatly appreciated!

Answer 1

<?php
class Circle {
  private $radius = $_GET["width"];
  private $pi = 3.14159;

  public function __construct(){
    $this->radius = $radius;
  }

  public function calculateArea(){
   return $this->radius * $this->radius * $pi;
  }
}

You can not assign a dynamic property as default value to a class property ( private $radius = $_GET["width"]; )

Also you are assigning the variable $radius to $this->radius in the constuctor but you never declared $radius !

Also as Ravenous mentioned you need to either send the data via GET to the php script or use the $_POST var in your php script!

This could fix your problem!

Answer 2

You are submitting the form via POST method and in PHP you are checking for values in $_GET , check what you got in $_POST , moreover, create yourself a minimal debug environment. Create a file and write to it various values of interest. It will help you understand the flow better.

LE - You must get rid of $_GET['width'] from the Circle class and other classes, you can include width in the construct ( __construct($width, $height) followed by $this->width = $width , same for height or whatever mandatory property you need within the class) and then you pass these values upon creating a new instance of the class.