PHP SPA very basic form handling

Final product: /tutorials/spa-php-basic-form/

This is a tutorial on very basic form handling in PHP. Checkbox handling is included for reference.

We're going to put everything into one file, so we don't need any Active CSS initialization except having the script tag telling the browser where to find the Active CSS core file.

In your PHP file, copy this in:

<?php
$acss = (isset($_POST['_ACSS']) && $_POST['_ACSS'] == 1) ? true : false;
$isHTML = (isset($_POST['_ACSSTYPE']) && $_POST['_ACSSTYPE'] == 'HTML') ? true : false;

if ($acss && $isHTML) {
    // Send back the results to the browser to show in the div.
    echo('<p>Received on the server:</p>');

    // Handle the variables received from the ajax form submit.
    $nameString = (!empty($_POST['name']) ? htmlentities($_POST['name']) : '<em>no name</em>');

    $countryString = '<em>none selected</em>';
    if (!empty($_POST['countries']) && is_array($_POST['countries'])) {
        // Remove empty elements with array_filter().
        $countries = array_filter($_POST['countries']);
        if (count($countries) > 0) {
            // Turn the array into a string and make safe for display with htmlentities().
            $countryString = htmlentities(implode(', ', $countries));
        }
    }

    $fileName = (!empty($_FILES['uploadFile']['name']) ? htmlentities($_FILES['uploadFile']['name']) : '<em>no file uploaded</em>');

    echo('<p>Name: '.$nameString.'<br>Countries: '.$countryString.'<br>File uploaded: '.$fileName.'</p><hr>');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo($pageTitle); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="/icons/favicon-32x32.png">
<script defer src="/activecss/activecss-2-13-0.min.js"></script>
</head>
<body onclick="void(0);">

<div id="myDiv"></div>
<form id="myForm" method="POST">
    <p>Name: <input type="text" name="name" value=""></p>
    <p>Select a country:<br>
        England <input type="checkbox" name="countries[]" value="England"><br>
        France <input type="checkbox" name="countries[]" value="France"><br>
        Spain <input type="checkbox" name="countries[]" value="Spain"><br>
        United States <input type="checkbox" name="countries[]" value="United States">
    </p>
    <p>File: <input type="file" name="uploadFile"></p>
    <input type="submit" value="submit">
</form>

<style type="text/acss">
#myForm:submit {
    prevent-default: true;
    ajax-form-submit: html post;
}

#myForm:afterAjaxFormSubmit {
    #myDiv {
        render: {$STRING};
    }
}
</style>

</body>
</html>

This isn't a tutorial on PHP or HTML, so we'll concentrate on the Active CSS declarations.

Let's look at this first:

#myForm:submit {
    prevent-default: true;
    ajax-form-submit: html post;
}

#myForm:submit sets up a submit event on the form. The form HTML tag has an attribute ID of "myForm".

The prevent-default command stops the page from doing a regular form submit, which would by default refresh the page. We don't want that in an SPA, so we use prevent-default to stop the form from doing its normal thing when it is submitted.

The ajax-form-submit command sends the form contents to the server. Because we have an html option, we are telling Active CSS to handle the response coming back from the server as a regular string. An echo from PHP will always return a string. And we want Active CSS to put the whole response string into the variable {$STRING} so we can use it later on, so we specify "html" instead of "json". It isn't a JSON string being returned in the echo, it's just regular html. If we had used the json option, the server would need to send back a JSON string, which would then be converted to variables in the browser for use and rendering, but for this tutorial we are not interested in that. We just return a string, so we use the option "html".

The post option says we want to send the form data as POST data, as opposed to GET.

So in summary, that declaration is responsible for sending the form data to the server.

Let's now look at the second declaration:

#myForm:afterAjaxFormSubmit {
    #myDiv {
        render: "{$STRING}";
    }
}

The #myForm:afterAjaxFormSubmit is setting up an event for something to happen after the ajax form submit command has run. This is called an "after" event (have a look in the Events section of the docs to get more information on those kind of events. They are special Active CSS events that are available after any action command has run.

The #myDiv target selector sets the target to be the div HTML tag.

The render command outputs the response from the server, now available in the {$STRING} variable, into the div tag. All ajax response strings go into the {$STRING} variable - it's a special variable. See the Variables section of the docs for more info on special variables.

That's it for the basics. You can do other stuff, like returning a JSON string for showing form errors and things like that, but that's the basic concept.

For a more advanced scenario - building a navigable SPA, check out the other PHP SPA tutorial.

Debugging Technical articles: PHP SPA tutorial part 1