Sending parameters to another web page

How to pass parameters to a web page?

For this purpose a form is created whose values will be transmitted automatically, and in the target page, a script retrieves the values sent.

We have seen how to create a form, we will detail here how to extract the transmitted data.

1) Understanding the format of URL's parameters

Three symbols are used to define a string of parameters to pass:

  ?   concatenates the URL and the string of parameters.
  &   separates multiple parameters.
  =   assigns a value to the variable.

Example:

https://www.xul.fr/demo.html?login="me"&password="1234"

In this example, we have two parameters, login and password, which are assigned the values "me" and "1234".

2) Values are sent from the form, to the server

You have nothing to do to send the values: all variables and values in a form are sent automatically providing the action of the form is a page to load.

The attribute "name" of each form item will provide the name of the variable and the attribute "value" its value.

<form action="param-received.html" method="GET">
...various widgets...
</form>

See at the source of the form at bottom.

The GET method appends the data to the URL, while the POST method would transmit them directly.

Sending data without form

To pass parameters to another page or a script without displaying a form (but with a form tag), we use the "hidden" field:

<form action="otherpage.html">
  <input type="hidden" name="varname" value="12345" />
  <input type="submit" value="Send data">
</form>

This invisible form will pass to otherpage.html the parameter: varname=12345.

3) Extracting data received from the URL in the page

The location.search attribute contains the chain of parameters, it remains to be analyzed.

Here is the complete code to process data sent:

<script language="JavaScript">
  function processUser()
  {
    var parameters = location.search.substring(1).split("&");

    var temp = parameters[0].split("=");
    l = unescape(temp[1]);
    temp = parameters[1].split("=");
    p = unescape(temp[1]);
    document.getElementById("log").innerHTML = l;
    document.getElementById("pass").innerHTML = p;
  }
</script>

Explanation:

location.search is the property that holds the list of parameters.
substring(1) skips the ? symbol and returns the string minus this sign.
split("&") splits the string and returns an array whose elements are the parameters.
this array is assigned to the "parameters" variable. We can now access individual elements by subscripting the array. Parameters[0] is the first element.
we have to split again the parameter into another small array that holds the name of the variable and the value.
in this example, we need only for the value, so we subscript the small array to second item, temp[1].
the unescape function convert special characters.
we have assigned the l variable with the login value and the p variable with the password.
the login is written in the log field thanks to the getElementById method.
and password to the pass field.

4) Updating the page with data received

In this example, I suppose we want to write the data into the page that is loaded with the parameters.
The login variable has been assigned in the previous code.
Two fields have been defined in the page:

<div id="log"></div>
<div id="pass"></div>

The fields are identified by the id property. To fill them with data we have to use the DOM's method getElementById("") and the innerHTML property.

getElementById("log").innerHTML = login;

5) Now, testing the script

Fill the fields below and click on the button.

See also