Replace HTML Button with Executed PHP

Question

This is my first post here so thanks in advance for your help.

I have a piece of PHP code for getting an airport METAR and displaying it. The code 'metar.php' is as follows:

<?php

$location = "EGLL";

get_metar($location);

function get_metar($location) {
$fileName = "http://weather.noaa.gov/pub/data/observations/metar/stations/$location.TXT";
    $metar = '';
    $fileData = @file($fileName) or die('METAR not available');
    if ($fileData != false) {
            list($i, $date) = each($fileData); 

            $utc = strtotime(trim($date));
            $time = date("D, F jS Y g:i A",$utc);

            while (list($i, $line) = each($fileData)) {
                    $metar .= ' ' . trim($line);
                    }
            $metar = trim(str_replace('  ', ' ', $metar));
            }

    echo "<div style=\"color: white;\">METAR FOR $location (Issued: $time UTC):<br>$metar</div>";
    }
 ?>

Currently, there are buttons on the frontpage of my website that redirect to website.com/metar.php when the button is clicked. The code is as follows:

 <li><button type="submit" style="height: 40px;" class="btn btn-primary" onclick="window.location.href = '/heathrow.php'"/>METAR At London Heathrow</button></li>

I would appreciate it if someone can tell me how to change this code so that the button is replaced by the output of metar.php when it is clicked rather than having to redirect to website.com/metar.php when the button is clicked.

I hope that made sense
Thank you very much again in advance!

Answer 1

This can be done using AJAX. Code bellow shows how it can be done using jQuery.

<div id="dectinationDivId" style="color: white;"></div>

<button id="buttonId" style="height: 40px;" class="btn btn-primary">METAR At London Heathrow</button>

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#buttonId').click(function(){
        $.ajax({
            url: "/heathrow.php",
            success: function(data) {
                $('#dectinationDivId').html(data);
                $('#buttonId').hide();
            },
            error: function(jqXHR) {
                alert(jqXHR.responseText);
            }
        });
    });
</script>

---

For multiple buttons there is a better, more generic, approach which makes it easier to maintain code (add and remove buttons, in this case).

HTML/JS:

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var metarButtons = $('.getMetarButtons');
        metarButtons.click(function(){
            var clickedButton = $(this);
            $.ajax({
                type: "POST",
                url: "/metarData.php",
                data: { location: clickedButton.attr('data-location') },
                dataType: 'html',
                success: function(data) {

                    $('#outputDiv').hide('slow', function() {
                        $(this).remove();
                    });

                    metarButtons.show('slow');

                    var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
                    outputElement.hide();
                    outputElement.insertAfter(clickedButton);

                    clickedButton.hide('slow', function() {
                        outputElement.show('slow');
                    });
                },
                error: function(jqXHR) {
                    alert(jqXHR.responseText);
                }
            });
        });
    });
</script>

<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "LLBG">METAR At Tel Aviv Ben Gurion</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "EGLL">METAR At London Heathrow</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "EGGW">METAR At London Luton</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "KJFK">METAR At New York John F. Kennedy</button>

PHP (metarData.php):

<?php
    $location = $_POST["location"];

    get_metar($location);

    function get_metar($location) {
    $fileName = "http://weather.noaa.gov/pub/data/observations/metar/stations/$location.TXT";
        $metar = '';
        $fileData = @file($fileName) or die('METAR not available');
        if ($fileData != false) {
            list($i, $date) = each($fileData); 

                $utc = strtotime(trim($date));
                $time = date("D, F jS Y g:i A",$utc);

                while (list($i, $line) = each($fileData)) {
                    $metar .= ' ' . trim($line);
                }
            $metar = trim(str_replace('  ', ' ', $metar));
        }

        echo "METAR FOR $location (Issued: $time UTC):<br>$metar";
    }
?>