在保持同一页面的同时改变PHP图像？

So I tried to make a very simple column-diagram demo in PHP. It shows the relative amount of likes, dislikes and neutral votes.

The image-creating code is in "columnmaker.php" (it has a PNG output), while the site itself is "column.php". I'm pretty sure that columnmaker.php works correctly.

Now here's what I tried to do in column.php:

<img src="columnmaker.php" alt="">
...
<form action="" method="POST">
    Like: <input type="number" name="like" min="0" step="100"> <br>
    Dislike: <input type="number" name="dislike" min="0" step="100"> <br>
    Neutral: <input type="number" name="neutral" min="0" step="100"> <br>
    <input type="submit" value="Change!">
</form>

But this one never shows the actual changed image. And if I write "columnmaker.php" in the form action field, the HTML inputs don't show up anymore (obviously).

So, what should I do to be able to change the image and stay on the same page at the same time?

I don't understand why you haven't been able to define an action and still show the image. You could do something like this:

// form.php
<?php if(!empty($_POST)) { ?>
<img src="columnmaker.php?like=<?php echo $_POST['like']; ?>&amp;dislike=<?php echo $_POST['dislike']; ?>&amp;neutral=<?php echo $_POST['neutral']; ?>" alt="">
<?php } ?>

<form action="form.php" method="POST">
    Like: <input type="number" name="like" min="0" step="100" value="<?php echo !empty($_POST['like']) ? $_POST['like'] : 0; ?>"> <br>
    Dislike: <input type="number" name="dislike" min="0" step="100" value="<?php echo !empty($_POST['dislike']) ? $_POST['dislike'] : 0; ?>"> <br>
    Neutral: <input type="number" name="neutral" min="0" step="100" value="<?php echo !empty($_POST['neutral']) ? $_POST['neutral'] : 0; ?>"> <br>
    <input type="submit" value="Change!">
</form>

Now that you've done that, in columnmaker.php, you can then access $_GET['like'], etc, to generate the image. Make sure your header()'s are correct.

Well, if you want a little bit more of interactivity I would suggest you use JavaScript to generate the charts, rather than PHP, but you can still make it work.

For simplicity's sake I'm going to assume that you have jQuery loaded on your website, and that column.php works just fine.

Change your form to this:

<img id="dynamicColumns" src="columnmaker.php" alt="">

<form action="" method="POST">
    Like: <input type="number" id="like" name="like" min="0" step="100"> <br>
    Dislike: <input type="number" id="dislike" name="dislike" min="0" step="100"> <br>
    Neutral: <input type="number" id="neutral" name="neutral" min="0" step="100"> <br>
   <input type="submit" id="updateColumns" value="Change!">
</form>

Then you can just use jQuery to send an AJAX request, and capture the response this way:

 $('#updateColumns').on('click', function(e) {
      e.preventDefault(); // This statement prevents the form from being submitted
     var like = $('#like').val();
     var dislike = $('#dislike').val();
     var neutral = $('#neutral').val();
     $.ajax({
          type: "POST",
          data: {like:like, dislike:dislike, neutral:neutral}
          url: "columnmaker.php"
     }).done(function(response) {
        d = new Date();
        $("#dynamicColumns").attr("src", "/columnmaker.php?"+d.getTime());
        // latter statement will force the browser to reload image on request. 
     });  
  });

the url parameter in the $.ajax call will send all the information to that page via POST, so that you can access likes,dislikes,and neutral values in PHP this way:

$_POST['likes'] $_POST['dislikes'], $_POST['neutral']

and use those variables in any way you want to generate columns dynamically.

Final Note:

to include jQuery in your page just use this tag:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>