loading graphs with a form on the same HTML page

Question

I have an HTML page where, using a form, I pass a variable to a PHP page which generates a graph.

The graph is loaded with JpGraph, a powerful tool that creates img.

Given the following form, I load four different graphs passing four different values. As you can see, the graphs are redirected to new tabs in the browser (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>

I wonder if it is possible to dynamically load the four graphs on the same HTML page, right below the form (instead of redirecting them to different tabs).

Do I need Javascript to do that? Any tips are welcome.

Answer 1

I found a way using 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>

In addition to this, some CSS formatting was needed.