1

Hello guys I'm new to internet languages and I would like your help explained with apples!

I'm trying to make a webserver controlled robot with a raspberry pi 3b+. I already got that working with some HTML calling some PHP code and then executing Python scripts in order to move the robot. The thing is, when I press a button to move the robot the page refreshes then loads everything again making it really annoying. (HTML and PHP are in the same document)

I've read some post where people say to use <button> tags with type="button", but when I do that nothing happens. Let me share with you the code. Other people say to use AJAX, but I don't really know how to.

HTML:

<form action="" method="post">
    <div>
        <div>
            <button type="button" name="boton7"><img src="imagenes/up.png"></button>
            </div>
            <div>
            <button type="button" name="boton8"><img src="imagenes/left.png"></button><!--
            --><button type="button" name="boton10"><img src="imagenes/stop.png"></button><!--
            --><button type="button" name="boton9"><img src="imagenes/right.png"></button><!--
            -->
            </div>
            <div>
            <button type="button" name="boton6"><img src="imagenes/down.png"></button>
            </div>
    </div>
</form>

PHP:

<?php
    //Primera fila || mover_arriba.py
    if(isset($_POST['boton6'])){
            exec('python /var/www/html/mover_arriba.py');
    }

    //Primera fila || mover_abajo.py
    if(isset($_POST['boton7'])){
            exec('python /var/www/html/mover_abajo.py');
    }
?>

I would like to know if it can done without using AJAX or JS (interpreted languages are confusing to me) or if I can modify something on this code to achieve what I want. As you can see I used a form, I don't really understand if a button can do something without a form, why sometimes people use input="submit", I've also seen "onclick=". Please use as clear as possible answers.

If you need anything else please let me know!

EDIT: I forgot to mention that if I remove type="button" from this <button type="button" it works.

Carlos Pérez
  • 35
  • 1
  • 8

2 Answers2

0

One possible solution could be that you could have your PHP code return a 'false' value back to the form. This would prevent the page from refreshing. This way the PHP code will call the python code but the form will not refresh since it has received a false value back from the PHP function.

HellHammer
  • 85
  • 7
0

The bad news is that you will have to use JavaScript and AJAX to accomplish this. There's simply no (reasonable) way around it.

The good news is that what you want to do is actually quite simple. Since there is no conditional data and no return data to handle, the bar is already pretty low. I also assume that you are not worried about bad actors abusing vulnerabilities in your code, so let's dive in.

First off, let's get a library that can do AJAX calls. While not necessary, this makes everything a lot easier.

Inside your <head> element, put the following line:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Next, add an ID to your <form> element so it is easier for us to access with jQuery.

<form id="robotform" action="" method="post">

Now let's add some JS below the form to handle the form submissions. It has to be placed after because the html elements need to exist before this code is called. Code below is mostly adapted from the answer to this question: Submitting HTML form using Jquery AJAX

<script type='text/javascript'>
    /* Get the name of the button that was pressed */
    var buttonpressed;
    $('button').click(function() {
      buttonpressed = $(this).attr('name');
    })

    /* attach a submit handler to the form */
    $("#robotform").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* target url is the current page */
      var url = window.location.href;

      /* Create the data as a string so the button name is sent properly */
      var data = buttonpressed + '=true';

      /* Send the data using post with element id name and name2*/
      var posting = $.post( url, data );

      /* Alerts the results if unsuccessful */
      posting.fail(function( xhr, status, error ) {
        alert('Error sending the command: ' + error);
      });
    });
</script>
FabianGillenius
  • 571
  • 1
  • 5
  • 13