Use ajax to run php script with button click

Question

I am a hobbyist with limited knowledge of html, javascript, php. I set up a Raspberry Pi microcomputer as a Web server. As a starting point I want to turn on a LED that is connected to the Pi with a button on a Web page. I have the following code that works (name of html file is min.php):

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LED Control</title>
</head>
    <body>
    LED Control:
    <form method="get" action="min.php">
        <input type="submit" value="ON" name="on">
    </form>
    <?php
    $setmode7 = system("gpio mode 7 out");
    if(isset($_GET['on'])){
        $gpio_on = system("gpio write 7 1");
        echo "LED is on";
    }
    else {
        echo "LED is off";
    }
    ?>
    </body>
</html>

Now I want to rewrite the code with an ajax function so that the page does not reload when the button is clicked and here I have problems. I looked at a lot of the posted examples but I just can't get over the hump. I changed the html code as follows:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LED Control</title>
</head>
<body>
<button type="button" onclick="LED_On()">LED On</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><?script>
<script>
function LED_On(){
    $.ajax({
        url:"LED_On.php",
        type:"GET",
        data:"on"
    });
}
</script>
</body>
</html>

The LED_On.php file has the following code and is stored in the same directory as the html file:

<?php
if(isset($_GET['on'])){
     $setmode7 = system("gpio mode 7 out");
     $gpio_on = system("gpio write 7 1");
     echo "LED is on";
     }
     else {
        echo "LED is off";
    }
?>

Clicking the button does not turn on the LED. Any help is appreciated.

done any basic debugging, like checkin if the ajax code actually sent an HTTP request to the server? checked if it invoked your script? checked if the system() calls did anything? — Marc B
– Marc B, Commented Aug 23, 2016 at 21:25
might be <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><?script> needs to be <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> — ewizard
– ewizard, Commented Aug 23, 2016 at 21:29

MindGamer · Accepted Answer · 2016-08-23 21:29:05Z

2

Check your code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><?script>

<?script> should be changed to </script>

answered Aug 23, 2016 at 21:29

MindGamer

1361 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arthur Over a year ago

That was it. Thank you.

Collectives™ on Stack Overflow

Use ajax to run php script with button click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related