将重力表单输入值(PHP和AJAX)传递给Google Chart (JS)

<form id="gravity-form">
  <label for="input1">Input 1:</label>
  <input type="text" id="input1" name="input1">
  
  <label for="input2">Input 2:</label>
  <input type="text" id="input2" name="input2">
  
  <button type="submit">Submit</button>
</form>

<div id="chart-container"></div>

// 监听表单提交事件
document.getElementById("gravity-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  // 获取表单字段的值
  var input1Value = document.getElementById("input1").value;
  var input2Value = document.getElementById("input2").value;
  
  // 发送AJAX请求到服务器
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process-form.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 在接收到服务器响应后，使用Google Chart绘制图表
      var chartData = JSON.parse(xhr.responseText);
      drawChart(chartData);
    }
  };
  xhr.send("input1=" + encodeURIComponent(input1Value) + "&input2=" + encodeURIComponent(input2Value));
});

// 使用Google Chart绘制图表
function drawChart(data) {
  // 创建图表数据表
  var chartData = new google.visualization.DataTable();
  chartData.addColumn("string", "Input");
  chartData.addColumn("number", "Value");
  chartData.addRows(data);
  
  // 配置图表选项
  var chartOptions = {
    title: "Gravity Form Data",
    width: 400,
    height: 300
  };
  
  // 创建图表并绘制
  var chart = new google.visualization.BarChart(document.getElementById("chart-container"));
  chart.draw(chartData, chartOptions);
}

<?php
$input1 = $_POST["input1"];
$input2 = $_POST["input2"];

// 根据表单数据生成图表数据
$data = array(
  array("Input 1", intval($input1)),
  array("Input 2", intval($input2))
);

// 将图表数据转换为JSON格式
$jsonData = json_encode($data);

// 返回图表数据
echo $jsonData;
?>