How do I execute a php switch case with ajax onclick and have it print the result in an H tag?

Question

I have a page called beslutning.php with a random generator first followed by a switch case.

That page is included in the index file like so:

 <h1 class="cover-heading">Vores beslutning: <?php include "beslutning.php" ?></h1>

On a page load it runs the script, match a case and echoes out the result as it's intended.

Here's what I need

A button on the index page which when clicked requests the beslutning.php to be run again so I get a new result.

All my searches on phrases such as execute php script with ajax, run a php script with ajax onclick and a bunch of other alternatives has lead me to no result.

I have tried to fiddle with blocks of codes like the one below but to no luck.

<script>
$(document).ready(function(){
    $("#NyBeslutning").click(function() {
        $.ajax({
            type: "POST",
            url: "beslutning.php", //Your required php page
            data: "$beslutning", //pass your required data here
            success: function(response){
                $('$beslutning').html(response);
            }
        });
    return false;
    });
</script>

<a id="NyBeslutning" class="btn btn-lg btn-default" type="button" onClick="$beslutning()">Ny beslutning</a>

Here's how my beslutning.php looks like:

<?php
$beslutning = mt_rand(0, 1000);

switch($beslutning)
{
case 1:
    echo "something";
    break;

case 2:
    echo "something";
    break;
?>

Someone who can help? Explain it to me like I'm a baby :)

Thanks in advance.

Just a hint . You can't execute PHP by Javascript, It'is JUST IMPOSSIBLE — beta-developper, Feb 22 '17 at 17:14
I assume that's mentioned because of the javascript (probably jQuery too) tags. I went by the suggestions on that, but definitely nice to know anyway, thanks :) — JJFDK, Feb 22 '17 at 17:19
This should help you trace the issue better: http://stackoverflow.com/a/21617685/2191572 — MonkeyZeus, Feb 22 '17 at 17:19
Check this out as well: http://stackoverflow.com/a/20150474/2191572 — MonkeyZeus, Feb 22 '17 at 17:20

miken32 · Accepted Answer · 2017-09-13T18:50:21.300

You're close, but you have some big problems with your jQuery code. Try to read up on documentation for these things before using them!

You aren't sending any data, so don't need to POST and can just do a simple GET request. In your success function you were referring to $('$beslutning') which isn't anything. Instead you want to refer to your H1 element. And, you'd forgotten closing braces around some code.

On the HTML side, you don't need an onclick attribute, since you're already declaring the click listener in the script. Give this a try, and if it doesn't work, check your browser's error console.

<script>
$(document).ready(function(){
    $("#NyBeslutning").click(function() {
        $.get("beslutning.php", function(response) {
            $('h1.cover-heading').html(response);
        });
    });
});
</script>

<h1 class="cover-heading">Vores beslutning: <?php include "beslutning.php" ?></h1>
<button id="NyBeslutning" class="btn btn-lg btn-default">Ny beslutning</button>

Awesome man! That did the trick, thanks :D I am a world-class noob with jQuery, not that that's a suitable excuse. — JJFDK, Feb 22 '17 at 17:36
No problem, just keep reading and learning! Make sure you understand how jQuery selectors work, they're important if you're working with this framework. — miken32, Feb 22 '17 at 17:36

score 0 · Answer 2 · answered Mar 20 '21 at 14:15

You must run onto virtual server (laragon etc.).

localhost/index.php <

PHP as select file: index.php

   <form class="selected">
      <select name="category" id="categories">
        <option value="">vyberte si...</option>
        <option value="cuba">Rum</option>
        <option value="cola">Cola</option>
        <option value="saris">Beer</option>
        <option value="moto">Oil</option>
        <option value="barique">Wine</option>
      </select>
   </form>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="app.js"></script>

PHP Switch Case file: ajax.php

<?php
    $category = $_POST['category'];

    switch ($category) {
        case "cuba":
            print "You must read Dickens."; 
            break;
        case "cola":
            print "Don't touche me!";
            break;
        case "moto":
            print "You will not move without me.";
            break;
        default:
            print "Great, relax it.";
    }
?>

jQuery AJAX: file: app.js

(function($){
    var comment = $('<div/>', { id: 'comment' }); // create new element
    var categories = $('#categories');

        comment.appendTo( $('.selected') );

        categories.change( function() {
        
           var req = $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        data: categories.serialize()
                     });

           req.done( function(data){
               //console.log( data);
               comment.text( data );
           })
    });
})(jQuery);

I appreciate the answer, but there's 2 problems in your post. a) The problem has been solved. b) It got solved 4 years ago. — JJFDK, Mar 21 '21 at 17:13

score -1 · Answer 3 · answered Feb 22 '17 at 17:42

You can just pass a parameter when you click something in the index.php

<button onmousedown=someFunction()>Click ME</button>
<script>
     someFunction(){
   set href value here based on your condition example one,two, three
   window.location = localhost/main.php?switchVariable = one;
}
</script>

in main.php

 <h1 class="cover-heading">Vores beslutning: <?php include "beslutning.php" </h1>

write in beslutning.php file write this

<?php

$beslutning= $_GET['switchVariable '];
switch($beslutning)
{
case one:
echo something;
break;

case two:
echo something;
break;

?>

How do I execute a php switch case with ajax onclick and have it print the result in an H tag?

3 Answers3