Add AJAX to PHP Form

Question

I am making a website where you can random throw dices. First I made the function to throw in JavaScript. Now I want it in PHP. Everything works, but the whole Site is always reloading if I try to throw it in PHP.

So I read I must use AJAX. But it doesen't work. The Site uses jQuery, so it should be an easy task. I tried it for hours but it doesen't work. Can you see where the problem is?

The code is as following:

<form name="imageForm">
<table border=0>
<tr>
<td>
<img src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>
</td>
</tr>
<tr>
<td>
<br>
<form method="post"><input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/></form>
<a onclick="displayImage();" class="btn btn--lg type--uppercase" href="#random"><span class="btn__text">
Random Dice Roll
</span>
</td>

</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</section>

 
<!-- Scripts -->
<script>
function displayImage(){
$.ajax({
url: "random.php",
success: function(data){
$('img[name="canvas"]').attr('src', data);
}
});
return false;
}
</script>
<script src="js/parallax.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/random-dice-6-sides/random.js"></script>
</body>
</html>

And the random.php

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>

You can see the whole process on https://randomster.com/random-dice-6-sides.php

The orange button is the php call, and the white is the Javascript call.

Thanks for your help! Greetings

Answer 1

I suggest moving jquery script link to as right now it's at the bottom of and I get ReferenceError: $ is not defined.

A few changes were made. Your target file (which should return new image) I added:

<?php
$imagesDir = 'img/random-dice-6-sides/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
echo $images[array_rand($images)];

And your index file:

<?php
$imagesDir = 'img/random-dice-6-sides/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$randomImage = $images[array_rand($images)];
// Display initial image
?>

<section class="text-center page-title bg--dark">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<h1>Welcome to Randomster.com</h1>
<p class="lead"> Blah </p>
<form name="imageForm">
<table border=0>
<tr>
<td>
<!-- Result displayed here -->
<img id="canvas" src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>                                                        </td>
</tr>
<tr>
<td>
<br>
<!--PHP Call-->
<form method="post">
    <input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/>
</form>
<!--Javascript Call-->
<a onclick="displayImage();" class="btn btn--lg type--uppercase" href="#random"><span class="btn__text">Random Dice Roll
</span>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</section>

<script>
$(document).ready(function(){
    // AJAX to target file (in this case, index2.php)
    $("#randomImage").click(function(e) {
        e.preventDefault();

        $.ajax({
            method: "POST",
            url: "index2.php",
        })
        .done(function(results) {
            $("#canvas").attr('src', results);
        })
    });
});
</script>

The PHP part to show initial image. The image element has an ID now because jQuery needs it (in my case) and AJAX was added.

Answer 2

Since you have already attached an event handler onclick="displayImage();" with the anchor tag, your jQuery/AJAX code should be like this:

<script>
    function displayImage(){
        $.ajax({
            url: "YOUR_PAGE.php",
            success: function(data){
                $('img[name="canvas"]').attr('src', data);
            }
        });
        return false;
    }
</script>

Don't forget to replace YOUR_PAGE.php with your actual page i.e. the page where you want to send the AJAX request.

And in the backend PHP code, you just have to echo the $randomImage,

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>