Getting Variables From Forms

HTML forms contain at least the following elements:

A method
An action
A submit button

In your HTML code, the first line of a form looks something like this:

<FORM METHOD="post" ACTION="yourscript.php">

When you click on a submit button in an HTML form, variables are sent to the script specified by the ACTION via the specified METHOD. The method can be either POST or GET. Variables passed from a form to a PHP script are placed in the superglobal called $_POST or $_GET, depending on the form method. In the next section, you see how this works, by creating an HTML form and accompanying PHP script that performs calculations depending on the form input.

Creating a Calculation Form

In this section, you'll create the front end to a calculation script. This form will contain two input fields and a radio button to select the calculation type.

Open a new file in your text editor.

Type the following HTML:

<HTML>
<HEAD>
<TITLE>Calculation Form</TITLE>
</HEAD>
<BODY>

Begin your form. Assume that the method is POST and the action is a script called calculate.php:
```
<FORM METHOD="post" ACTION="calculate.php">
```
Create an input field for the first value, with a text label:
```
<P>Value 1: <INPUT TYPE="text" NAME="val1" SIZE=10></P>
```
Create an input field for the second value, with a text label:
```
<P>Value 2: <INPUT TYPE="text" NAME="val2" SIZE=10></P>
```

Add a submit button:

<P><INPUT TYPE="submit" NAME="submit" VALUE="Calculate"></P>

Close your form and add more HTML so that the document is valid:
```
</FORM>
</BODY>
</HTML>
```
Save the file with the name calculate_form.html, and place this file in the document root of your web server.
Open your web browser and type http://127.0.0.1/calculate_form.html.

You will see a form containing the Value 1 and Value 2 fields, along with a Calculate button. Take a moment to examine the HTML form, to understand just how variables will get their names.

When submitted, this form will send two variables to your script, $_POST[val1] and $_POST[val2], because those are the NAMEs used in each text field. The values for those variables are the values typed in the form fields by the user.

There's one more item to add: a series of radio buttons to determine the type of calculation to perform on the two values.

Open calculate_form.html in your text editor.

Add this block before the submit button:

<P>Calculation:<br>
<INPUT TYPE="radio" NAME="calc" VALUE="add"> add<br>
<INPUT TYPE="radio" NAME="calc" VALUE="subtract"> subtract<br>
<INPUT TYPE="radio" NAME="calc" VALUE="multiply"> multiply<br>
<INPUT TYPE="radio" NAME="calc" VALUE="divide"> divide</P>

Save the file and place it in the document root of your web server.
Open your web browser and type http://127.0.0.1/calculate_form.html.

Your form will now contain the Value 1 and Value 2 fields, a set of radio buttons, and a Calculate button. Now, in addition to the two values ($_POST[val1] and $_POST[val2]), a variable called $_POST[calc] will be sent to your script. Move on to the next section and create the calculation script.

Creating the Calculation Script

According to the form action in calculate_form.html, you need a script called calculate.php. The goal of this script is to accept the two values ($_POST[val1] and $_POST[val2]) and perform a calculation depending on the value of $_POST[calc].

Open a new file in your text editor.
Start a PHP block and prepare an if statement that checks for the presence of the three values:
```
<?
if (($_POST[val1] == "") || ($_POST[val2] == "") || ($_POST[calc] =="")) {
    // more code goes here
}
```
This statement says, "If any of these three variables do not have a value, do something else."
Replace the "more code goes here" with the following two lines:
```
header("Location: calculate_form.html");
exit;
```
The first of these two lines outputs a header statement—in this case, one that sends the browser back to the calculation form. The second line causes the script to exit. So, if any of the three required variables do not have a value, this action will occur.

Note
Be sure that there are no line breaks, spaces, or any other text before your PHP block starts. You cannot use the header() function if output has already been sent to the browser.
Begin an if…else statement to perform the correct calculation, based on the value of $_POST[calc], starting with a value of "add":
```
if ($_POST[calc] == "add") {
    $result = $_POST[val1] + $_POST[val2];
```

Continue the statement for the remaining three calculation types, and then close your PHP block:

} else if ($_POST[calc] == "subtract") {
    $result = $_POST[val1] - $_POST[val2];
} else if ($_POST[calc] == "multiply") {
    $result = $_POST[val1] * $_POST[val2];
} else if ($_POST[calc] == "divide") {
    $result = $_POST[val1] / $_POST[val2];
}
?>

Start the HTML output:

<HTML>
<HEAD>
<TITLE>Calculation Result</TITLE>
</HEAD>
<BODY>

Using HTML mingled with PHP code, display the value of $result:

<P>The result of the calculation is: <? echo "$result"; ?></P>

Add some more HTML so that the document is valid:
```
</BODY>
</HTML>
```
Save the file with the name calculate.php, and place this file in the document root of your web server.

In the next section, you submit the form and even try to break it, which is just a bit of good, healthy debugging.

Submitting Your Form and Getting Results

Now that you've created both the front end (form) and the back end (script), it's time to hold your breath and test it.

To access the calculation form, open your web browser and type http://127.0.0.1/calculate_form.html.
Click on the Calculate button without typing anything in the form fields. Your web browser will reload the page because you didn't enter any values for the three required fields.
Enter a value for Value 1, but not for Value 2, and do not select a calculation option. After you click on Calculate, the page should reload.
Enter a value for Value 2, but not for Value 1, and do not select a calculation option. After you click on Calculate, the page should reload.
Enter a value for Value 1 and for Value 2, but do not select a calculation option. After you click on Calculate, the page should reload.
Select a calculation option, but do not enter any values for Value 1 or Value 2. After you click on Calculate, the page should reload.

Now that you've debugged the script by attempting to bypass your validation routine, try some calculations, such as the following:

Enter 9732 for Value 1 and 27 for Value 2.
Select add, and click on the Calculate button.

The result of the addition calculation is printed to the screen.

Knock yourself out by trying all sorts of number calculations to prove that it works.