入力をphpで選択したオプションの値で乗算してjQueryグラフに表示するにはどうすればよいですか？

Question

phpを使用して同じページを再読み込みせずに2つの操作を行い、その結果をグラフに表示する必要があります。私はグラフにcanvasjsを使用しています。 最初に、入力値に選択したオプションの値を掛けることです。 2つ目は同じですが、4％追加します。

<?php 
    if(isset($_POST['calculate'])) { 
    $a= $_POST['a']; 
    $b= $_POST['b']; 
    $result1= $a * $b; 
    $result2= $a * $b + '4%'; 
?> 
<form method="post"> 
    <input type="text" name="a" id="a"> 
    <select name="b" id="b"> 
    <option value="" disable selected>Select an amount</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 
    <button type="submit" id="calculate" value="Calculate"> 
</form> 
<script type="text/javascript"> 
    window.onload = function() { 
     var chart = new CanvasJS.Chart("chartContainer", { 
      title: { 
       text: "Results" 
      }, 
      data: [{ 
       type: "column", 
       dataPoints: [ 
        { y: <?php echo $result1; ?>, label: "Result 1" }, 
        { y: <?php echo $result2; ?>, label: "Result 2" }, 
       ] 
      }] 
     }); 
     chart.render(); 
    } 
</script> 

フォームとチャートを変更せずに他のソリューションを歓迎します。

Answer 1

なぜあなたはjpfonchange eventでそれを行うことができ、あなたのjsページ以降のデータvar x = (100 + 50) * a;を計算することができます。セレクトボックスデータの変更はずっとシンプルで優れています。

Answer 2

javaScriptイベントリスナーを使用すると、要件を満たすことができます。ウィンドウロード内に次の行を追加するとうまく動作するはずです。

var input = <?php echo $a?>; 

var selector = document.getElementById('b'); 
document.getElementById("calculate").addEventListener("click", function(){ 
    var multiplicationFactor = selector.options[selector.selectedIndex].value; 
    chart.options.data[0].dataPoints[0].y = input * multiplicationFactor; 
    chart.options.data[0].dataPoints[1].y = input * multiplicationFactor * 1.04; 
    chart.render(); 
});