在同一 HTML 页面上加载带有表格的图表

Question

我有一个 HTML 页面，我在其中使用表单将变量传递给生成图表的 PHP 页面。

图表加载了 JpGraph，这是一个强大的工具，可以创建 img。

鉴于以下表格，我加载了四个不同的图表，传递了四个不同的值。如您所见，图表被重定向到浏览器中的新选项卡 (target="_blank"):

  <form method="POST" action="graph.php" target="_blank">
   <select name="eti">
     <option value="04" selected> graph with input value 4
     <option value="06"> graph with input value 6
     <option value="08"> graph with input value 8
     <option value="11"> graph with input value 11
    </select>
    <input type="submit" name="tag" value="load graph" />
  </form>

我想知道是否可以在同一个 HTML 页面上动态加载四个图表，就在表格 的正下方（而不是将它们重定向到不同的选项卡） .

我需要 Javascript 才能这样做吗？欢迎任何提示。

Answer 1

我找到了使用 iframe 的方法：

  <form class="forms" method="POST" action="graph.php" target="iframe">
       <select name="eti">
        <option value="" selected> - scegli un tag -
        <option value="04"> tag 4
        <option value="06"> tag 6
        <option value="08"> tag 8
        <option value="10"> tag 10
       </select>
       <input type="submit" name="tag" value="load graph" />
  </form>

<div class="embed-container">
 <iframe name="iframe" width="400" height="350" frameborder="0" allowfullscreen>
  <img src="graph.php" />
 </iframe>
</div>

除此之外，还需要一些 CSS 格式化。

在同一 HTML 页面上加载带有表格的图表

loading graphs with a form on the same HTML page

html

forms

graph

jpgraph