Sending and receiving data depending of form objects

Data from a form can be processed by a script in the same page, or they may be sent to another page when the values are used to define the content of this page.

In a previous article we saw how to pass data from one HTML page to another. This article will explain in more detail the use of form to submit data to a page or a script on the server.

Form data are used in the page, or another one

When the values are processed by a script in the same page that contains the form (or an included file), the action attribute of the object form has no value.

<form action="" >

To button that sends the data, is associated in this case an onClick event that calls the JavaScript function defined to process the values of the form.

<script type="text/javascript">
  function processForm() { ... }
</script><input type="button" onClick="processForm()" >

The form may also be sent bu an image field.

To access the elements locally, they are identified by a string made of the word document, the name of the form, name of the object, and the attribute value.

If a form has for name attribute "myform", a text field named "mytext", the value is accessed as follows:

var x = document.myform.mytext.value;

Action is assigned the name of a file to send data

When, on the contrary we want to transmit values to another page or a script, we assign the file name to the attribute action:

<form method="GET" action="myfiler.php">

That file is an HTML or PHP page or a script in another language, it makes no difference at sending, it is only the processing of the values that is different.
However it remains to define how values are extracted from elements of the form according to the type of object.

Name and values of form objects are transmitted

The transmission of values has a single general form, but the operating principles can depend on the object.

In most cases, the attributes name and value are used to build a string that is transmitted ar parameter to the target.

<input type="text" name="mytext" value="some texte">

gives the string:

mytext=some+texte

The variables are separated by the & symbol and the whole is separated from the file name by the ? symbol.

Example:

myfile.php?mytext=some+text&checkbox=cb1

This string of parameters is built automatically, you have just to assign the file name to the action attribute of the form.

Special case are:

Text boxes.
It is the content of the tag which is the value
```
<input type="textarea">Content</>
```
Checkboxes.
The name and the value are transmitted when the box is checked, or if checked was added to the definition and that the user does not unchecks the case.
Otherwise the item is ignored, nothing is transmitted.
Radio buttons groups.
Radio buttons in a group have the same name, such as "Radio" and a specific value, such as "Radio1", "Radio2", etc..
The name "Radio" is transmitted with the value of the selected button, for example:
```
radio=radio2
```
if the second button is selected.
Menus and lists.
They contain several option tags. It is the content of the selected option tag which forms the value associated with the name of the list.
Image field.
When you click on a image field, it sends form data. For the the image field, two values x and y are created for the the position where you clicked in the image.
For example, if the name is "image", and that you click into position x = 10 and y = 20, the following string will be transmitted:
```
image.x=10&image.y=20
```

The demonstration allows for interactive tests on all case of transmission of values.

Case of checkboxes

The checkbox is an issue when it is not checked, if the script that receives the values needs for all the elements of the form, since nothing is transmitted in this case. One can easily circumvent this problem by assigning the value field with the onClick event.

We want the checkbox "cb" has a value "yes" when it is checked and "no" when it is not. We initialize the value which corresponds to the initial state, if it is checked, with "yes".

<input type="checkbox" name="cb" value="yes" checked onClick="cbChange(this)" >

A function updates the value when the state of the checkbox changes:

function cbChange(element)
{
    if(element.checked) 
      element.value="yes";
    else
      element.value="no";
}

That is detailed in the article: Checkbox: Sending the state to another page.

We'll see now how the values sent are retrieved by the page that receives them.

Receiving the values

The parameters associated with the URL of a page is assigned to the search attribute of the location object. The string may be viewed with the following JavaScript script, which is used in our demonstration.

function receive()
{
    var parameters = location.search;
    document.getElementById("string").innerHTML = parameters;
}

window.onload=receive;

The "string" name is the ID of the tag where we will store the parameter string to view it.

To isolate the elements of this string of parameterd, we proceed in 3 steps:

The symbol ? is skipped by a call to substring method.
```
location.search.substring(1)
```
The string is cutted in elements on the & separator and the split method.
```
location.search.substring(1).split("&");
```
Each name and value of component are separated in the same way.

The complete script becomes:

var parameters = location.search.substring(1).split("&");
var data = "";
for (x in parameters)
{
    var temp = parameters[x].split("=");
    thevar = unescape(temp[0]);
    thevalue = unescape(temp[1]);
    thevalue = thevalue.replace("+", " ");
    data += thevar + "=" + thevalue + "<br>";
}
document.getElementById("data").innerHTML = data;

The elements of the parameters string become elements of where the index is x. This gives the names and values, in the example, they are concatenated in the data variable to be displayed.

If the data are sent to a PHP script on the server, or a page with PHP code, they will be available in the global variables $_GET or $_POST depending on the method used. There are associative arrays.

Data are recovered by the keys. For example, from this HTML code:

<form method="POST" action="xxx.php">
<input type="text" name="login" value="xxx" />
</form>

The PHP code is:

$login = $_POST['login'];

The sending of data may be cancelled by assigning false to onSubmit

Before sending the data we must verify that all the useful fields have been filled. When it is not the case, the sending must be canceled.
To do this we add the onSubmit event handler to the form tag:

<form method="post" action="sendmail.php" onSubmit="return test()">

The test function returns true if the data can be sent or false if the action is canceled.

See also

GET or POST. What method to choose?
Form objects and test page.
Build a registration page.
How to retrieve the login and password entered by the user.

External link

W3C specification for a JSON format to form data. Ease JavaScript processing with a standard storage format. We can exchange items with the server without going through POST. But the standard is being defined.