javascript - ページを更新せずにフォームからphp関数にjavascriptにデータを渡してキャンバスに描画する方法は?

Question

HTML、PHP、および JavaScript のみを使用して、基本的なグラフィック電卓を作成しようとしています。以下のコードは、JavaScript がグラフを描画する機会がないようにページを更新します。これが機能するはずの方法は、php がフォームからデータを取得し、方程式の結果をポイントごとに配列に出力することです。配列は、配列のインデックスを x 値に使用し、そのインデックスの値を y 値に使用する JavaScript に渡されます。フォームのターゲットを別の iframe にしようとしましたが、グラフはまだ描画されておらず、理由がわかりません。AJAX でこれを行う方法があると聞きましたが、現在の課題は、必要に応じて html、css、javascript、および php だけでこれを行うことです。

   <?php
    if( isset($_POST['submit']) )
    {
        $val1 = htmlentities($_POST['val1']);
        $val2 = htmlentities($_POST['val2']);
        $val3 = htmlentities($_POST['val3']);
        $results;
        for($i = 0; $i < 530; $i++)
        {
            $results[i] = pow($i,$val1) + $i*$val2 + $val3;
            if($results[i] >= 530)
                break;
        }
    }
    ?>
    <form action="example4.php" method="POST">
        x^:
        <input type="text" name="val1" id="val1"></input>
       +x*:
        <input type="text" name="val2" id="val2"></input>
       +1*:
        <input type="text" name="val3" id="val3"></input>

        <input type="submit" value="send"></input>
    </form>
    <canvas id="c" height="530" width="530" style="border:1px solid #d3d3d3;"></canvas>
          <script type="text/javascript">
              var b = document.body;
              var c = document.getElementsByTagName('canvas')[0];
              var a = c.getContext('2d');
              var data = <?php echo json_encode($results); ?>;
              a.beginPath();
              a.moveTo(0,530);
              a.strokeStyle="black";
              for(var i=0; i < data.length-1; i++))
              {
                a.moveTo(i,data[i]);
                a.lineTo(i+1,data[i+1]);
                a.stroke();
              }
          </script>