Basic PHP : Handling Form Submission 3

Jan 10, 2020 The Village Geek Build Site, HTML, PHP Comment(s)

Hi There ...

Please note that this tutorial is part of the Build Your Own Site series of tutorials. Feel free to restart the series.

"Alright, alright, alright ..." - Matthew McConaughey ...

In our Basic PHP journey, we've looked at declaring variables and the wonders that are functions. We also looked at variable scope at a glance and discussed this in our lessons on both declaring variables and PHP functions.

In this tutorial we'll be looking at all we've done so far, and combining it in a lesson on handling form submissions.

Yes Maam ... We're about to handle form submission data, clean it and push it back up the chain. Now this is gonna be a bit long, so buckle up and get ready to code like a Nun! Yes Nuns code on Tuesday after beading.

First; we are gonna start by modifying the form we built in the first part of our Basic PHP lessons. Yes this one:

<!DOCTYPE HTML>
<html>
<head>
<title>The First Site | Yeaaahhh Boooiiiiiyy!!</title>
</head>

<body>
    <form action="/action_page.php" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
    </form>
</body>

</html>

We are gonna add a variation of HTML form fields to give you a feel for what a real form would need in the back-end.

Alright we're gonna add check boxes, radio buttons, text fields, number fields, range fields, text areas, password fields, hidden fields, and even a file upload field.

Please have a look at both the first two parts of this lesson. Refering to Basic HTML 1 and 2 ... Remind yourself of how to put together the HTML forms and how to get them to submit. Once you feel comfortable let's get cooddiiinngg!!

We'll start by adding all the fields to our form, our HTML will look like this:

<!DOCTYPE HTML>
<html>
<head>
<title>The First Site | Yeaaahhh Boooiiiiiyy!!</title>
</head>

<body>
    <form action="/action_page.php" method="get">
      text: <input type="text" name="fname"><br>
      text: <input type="text" name="lname"><br>
      checkbox: <input type="checkbox" name="lcheck"><br>
      radio: <input type="radio" name="lradio"><br>
      number: <input type="number" name="lnumber"><br>
      textarea: <textarea name="ltextarea"></textarea><br>
      password: <input type="password" name="lpassword"><br>
      hidden: <input type="hidden" name="lhidden"><br>
      file: <input type="file" name="lfile"><br>
      <input type="submit" value="Submit">
    </form>
</body>

</html>

Reload the page and see how this page looks like now.

Yeh most of it doesn't look pretty but we'll get to that as this Build Site Series continues.

Please take a bit of time to look at the inputs and their corresponding HTML attributes. In particular look at the name attribute, and how we've named each field differently. We do this because when we submit the form each field gets submitted by name ... so each field has to have its own unique name attribute.

It's okay. Don't get worried when you can't see the hidden field, that's how it's supposed to be, hidden! Later on we'll teach you how to inspect the HTML and you'll be able to see the hidden field. And if you've been nice this year, we'll also show you how to change its value dynamically. We'll show this when building, loading, and remembering the page as well.

"Alright, alright, alright ..." - Denzel Washington

The next phase of this is ensuring that we get values when we submit the form.

Open the PHP file we build to handle our form submission. Yes this "action_page.php" file :

<?php
    echo "we're in here fool!!";
?>

If you don't recall this file and it's significance, please refer to the second Your First Site tutorial for a little recap.

Make the following changes to the code:

<?php
    echo "we're in here fool!!";
    print_r($_POST);
?>

All this does is help us to see what the submitted data looks like. Now reload your HTML page, fill all the form and submit it ... Printed out on the form submission page will be whatever input has filled out from the form ... Neat right?!

Now we'll need to handle this data and try to clean it up a bit. We'll only be doing a little of the change. We will not be going deep into this.

First we'll need to escape all strings. This means cleaning out any appendages from the inputs submitted. We do this because we want only clean data stored in our database.

<?php
    $cleanName = htmlspecialchars($_POST['lname'], ENT_QUOTES);
?>

This will espace any special characters on the submitted lname submitted value. This means if the lname value had some html characters in it, they'd be convereted to html entities and thus not saved as pure html data. That way the data won't be executed as html when served back to users on the page.

After cleaning up we'll dump the processed data out so you can see what it looks like. This is what your code should look like at this stage.

<?php
    $cleanName = htmlspecialchars($_POST['lname'], ENT_QUOTES);
    print_r($cleanName);
?>

Voila! You've just done some cool and clean stuff with forms and Phil. In the next lesson we'll be saving all that processed data into a DB that you'll be setting up ...

"We'll handle form submissions data, clean it and push it back up the chain"
The Village Geek

"Alright, alright, alright ..." - Matthew McConaughey

O shale gabotse wesho ...

I will never talk to you again ...

Cape Town, South Africa

Tutorials

Categories

TUTORIAL Basic PHP : Handling Form Submission 3

Basic PHP : Handling Form Submission 3

Reply to this discussion