php - AJAX リクエストで「数値以外の値が見つかりました」。値が取得されないのはなぜですか?

Question

AJAX を使用して、フォーム情報を php 処理ページに送信します。var_dump を実行すると、入力された数値が「0」ではないにもかかわらず、値が「0」として入っていることがわかります。値が「(int)」として指定されていても、PHP7 は「20 行目の /process_measurements.php で数値以外の値が検出されました」を返します。

次のように明示的に型キャストすると、PHP エラーはなくなりますが、var_dump は、フォームに入力された値ではなく 0 として入っていることを示しているため、フォームに入力された値に関係なく、計算結果は 0 です。

$length = (int)$length;
$width = (int)$width;
$height = (int)$height;

「数値以外の値が見つかりました」エラーを示すコード：

<?php
  function is_ajax_request() {
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
      $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  }

  (int)$length = isset($_POST['length']) ? (int) $_POST['length'] : '';
  (int)$width = isset($_POST['width']) ? (int) $_POST['width'] : '';
  (int)$height = isset($_POST['height']) ? (int) $_POST['height'] : '';

  var_dump($length, $width, $height);

  $volume = $length * $width * $height;

  if(is_ajax_request()) {
    echo $volume;
  } else {
    exit;
  }
?>

HTML and JS for further clarification:

    <div id="measurements">
      <p>Enter measurements below to determine the total volume.</p>
      <form id="measurement-form" action="process_measurements.php" method="POST">
        Length: <input type="text" name="length" /><br />
        <br />
        Width: <input type="text" name="width" /><br />
        <br />
        Height: <input type="text" name="height" /><br />
        <br />
        <input id="html-submit" type="submit" value="Submit" />
        <input id="ajax-submit" type="button" value="Ajax Submit" />
      </form>
    </div>

<script>
      var result_div = document.getElementById("result");
      var volume = document.getElementById("volume");

      function postResult(value) {
        volume.innerHTML = value;
        result_div.style.display = 'block';
      }

      function clearResult() {
        volume.innerHTML = '';
        result_div.style.display = 'none';
      }

      // omits textareas, select-options, checkboxes, radio buttons
      function gatherFormData(form) {
        var inputs = form.getElementsByTagName('input');
        var array = [];
        for (i = 0; i < inputs.length; i++) {
          var inputNameValue = inputs[i].name + '=' + inputs[i].value;
          array.push(inputNameValue);
        }
        return array.join('&');
      }

      function calculateMeasurements() {
        clearResult();

        var form = document.getElementById("measurement-form");
        var action = form.getAttribute("action");

        // gather form data
        var form_data = gatherFormData(form);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', action, true);
        // do not set content-type with FormData
        //xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onreadystatechange = function () {
          if(xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log('Result: ' + result);
            postResult(result);
          }
        };
        xhr.send(form_data);
      }

      var button = document.getElementById("ajax-submit");
      button.addEventListener("click", calculateMeasurements);

    </script>