Ajax request to show contents of my bash script echo using PHP

Question

I am trying to output my bash script on my webpage when I click submit on my form. Currently, I can see my script execute successfully on click, but this takes me to another page. I want it to return the output on the same page.

HTML:

<form action="testexec.php" method="post">
<label class="col">Up/down</label>
<span class="col">
  <input type="radio" name="option" id="r1" value="1" />
  <label for="r1">Up</label>
  <input type="radio" name="option" id="r2" value="2" />
  <label for="r2">Down</label>
</span>
<span class="col">
  <input type="submit" class="button"/>
</span>
</form>

testexec.php:

 <?php
 if ( $_SERVER['REQUEST_METHOD'] == 'POST'){

 if(isset($_POST['option']) && $_POST['option'] == 1)
 { $output = shell_exec("/var/www/html/testscripts/up.sh");}


 if(isset($_POST['option'])  && $_POST['option'] == 2)
 { $output = shell_exec("/var/www/html/testscripts/down.sh");}

 //header('Location: http:/mydirectory/systemTest.php?success=true');

 echo "<pre>$output</pre>";
}
?>

up.sh

#!/bin/bash

touch /tmp/testfile
ls -ltr /tmp
echo "I am Up"

I'm trying to do something like the following but it isn't working:

<script type="text/javascript">
    $(document).ready(function() {
            $("button").click(function(){
    $.ajax({
            url:"testexec.php",
            type: "POST", 
            success:function(result){
            alert(result);
    }
    });
    });
    })
</script>

Answer 1

Edit your <script> as following (and I presume you are using jQuery, based on your sample code):

<script type="text/javascript">
        // Removed $(document).ready(), as this is a deprecated method as of jQuery 3.0 and is not the best practice. Especially for this script, it is not needed at all - AJAX is triggered upon button press, not upon loading
        // Changed "button" to ".button" to correctly select the pressed input button
        $(".button").click(function(event){
            // Prevent the default HTML form submission from going ahead - for our purposes, this stops the page from navigating away
            event.preventDefault();
            $.ajax({
                url:"testexec.php",
                type: "POST", 
                // Have to send the option number with the POST request - the backend is expecting a $_POST['option'] number. In AJAX, this is done with 'data'
                data: {option: $('input[type=radio]:checked').val()},
                dataType: "text",
                success:function(result){
                    alert(result);
                }
            });
        });
</script>

More info on the above:

• Why $(document).ready() is deprecated and should be avoided: https://api.jquery.com/ready/
• How jQuery .class selectors work: https://api.jquery.com/class-selector/
• Suppressing the default behaviour with event.preventDefault() : https://api.jquery.com/event.preventdefault/
• Sending data together with the AJAX POST request (with the examples further down the page for more clarification): http://api.jquery.com/jquery.ajax/#data-types

Answer 2

Can I suggest that you change your HTML file (named as .php, not .html) as following and not need the AJAX script. This will reload the current page and spit out the $output after the <form> :

<?php
 if ( $_SERVER['REQUEST_METHOD'] == 'POST'){

 if(isset($_POST['option']) && $_POST['option'] == 1)
 { $output = shell_exec("/var/www/html/testscripts/up.sh");}


 if(isset($_POST['option'])  && $_POST['option'] == 2)
 { $output = shell_exec("/var/www/html/testscripts/down.sh");}
}
?>
<form action="" method="post">
<label class="col">Up/down</label>
<span class="col">
  <input type="radio" name="option" id="r1" value="1" />
  <label for="r1">Up</label>
  <input type="radio" name="option" id="r2" value="2" />
  <label for="r2">Down</label>
</span>
<span class="col">
  <input type="submit" class="button"/>
</span>
</form>
<?php
     echo "<pre>" . ( ($output) ?: '' ) . "</pre>";
?>