External Data

Arclab® Web Form Builder

External Data

Under "External Data" data can be passed to the form. This can be useful if some data is already known and the user should not have to re-enter it.
Add a new form element and go to "External Data":

 

External Data

URL Parameter: Import Value from URL

Allows to set the value of a field or input element from the browser URL.
To do this, the value of the URL parameter is taken from the browser URL and set as the default value.

 

Please note that you must first create a (hidden) field or input element for which the value should be set.

Important: The parameter is taken from the browser URL, not from the code used to insert the form.

 

This means that the link leading to the hostpage of the form must already contain the corresponding parameters or data.

 

Note: Create an extra element for each URL parameter.
Multiple parameters can be strung together in the browser URL by a "&".
Sample: https://www.yourdomain.tld/form.html?name=John&country=US

 

See also: External Data Samples

Javascript Parameter: Import Value from Hostpage

Allows to set the value of a field or input element from a Javascript variable defined in the host page.
To do this, the value of the Javascript variable is taken from the host page and set as default value.

 

Please note that you must first create a (hidden) field or input element for which the value should be set.

Important: The javascript variable must be defined in your host page and initialized before the form is loaded.

 

Add a separate element for each parameter or javascript variable !!

 

The element "Javascript Parameter" can also be used to transfer values from a database, which are read from a php hostpage and transferred into the Javascript variables, into the form. In this case, the php hostpage would have to populate the Javascript variables with the values from the database. The element serves as a universal interface for transferring external data into the form.

 

 

Sample:

In the following example, the name from the Javascript variable "Name" should be transferred to the field {Name}.

 

Add the following Javascript code to the "<head>" or "<body>" of the HTML or php page in your host page.

<script>
var Name='John Smith';
</script>

 

Add a new form item "Javascript Parameter" and select the Javascript variable name and the field name.
Now the value of the field {Name} is defined with the value of the javascript variable "Name" when loading the form.

 

If you want to transfer the value of a database query in the PHP host page to the form, you can use the following PHP example code:

...
<?php
...
// database query result (store the name in $n)
$n = $row["Name"];
...
// assign the query result to the javascript variable
echo "<script>var Name='$n';</script>";
...
?>

External Data Samples

The following examples show how to set the default value of a (hidden) field or input element.
In principle, this works the same for all input elements and fields.

With a dropdown, radio button or checkbox, however, there is a small difference.
Here you have to pass the item "Value" of the element as a parameter and not the text displayed in the form.

 

For this sample we use a Dropdown List with the field name: "Product", which contains 5 Elements: Product A-E.
Please note, that the item value is different from the text ... it's A-E

 

External Data Dropdown

 

The default selection is "Product A" (Value: A) and we want to change it using an parameter (external data) to "Product C" (Value: C).
In this sample we will show both ways, using "URL Parameter" and "Javascript Parameter".
Please note, either use "URL Parameter" OR "Javascript Parameter".

 

Sample: URL Parameter

 

Add "Special Elements > External Data > URL Parameter".

 

Type in the "Parameter Name", e.g. "p"
and select the field "{Product}": (we want to set the value for "Product")

URL Parameter Sample

 

Now open the hostpage/form in your browser
and add the parameter to the URL:

https://www.yourdomain.tld/hostpage.html?p=C

 

Please note, that "p" is just a sample. You can use any parameter name, you just need to enter the varname as "Parameter Name" in the dialog above!

 

Sample: Javascript Parameter

 

Add "Special Elements > External Data > Javascript Parameter".

 

Type in the Javascript Variable Name, e.g. "p"
and select the field "{Product}": (we want to set the value for "Product")

Javascript Sample

 

Now edit your hostpage and assign a value for the javascript variable "p":

...
<body>
<script>var p='C';</script>
...

 

Please note, that "p" is just a sample. You can use any varname, you just need to enter the varname as "Javascript Variable Name" in the dialog above!

Sample: Passing Values from a PHP Database Query

In the following example, the input fields for first name and last name are to be filled with values from a database query.

 

First add the input fields to your form.
You can also use hidden fields instead, if the user should not be able to edit the values.

 

PHP DB Sample Form

 

The form now contains 2 fields: {First_Name} and {Last_Name}.
We now have to establish the connection from the form fields to the Javascript variables.

 

The form element "Javascript Parameter" (in "External Data") is used for this.

 

Connect Field to Javascript variable

 

Insert two "Javascript Parameter":
fname for: {First_Name}
lname for: {Last_Name}

 

The form should now look like this:
(The position of the "Javascript Parameter" does not matter here)

 

Form with Javascript Parameters

 

Now the result of the PHP database query has to be transferred to the Javascript variables.
To do this, edit the PHP host page that executes the database query.

 

The transfer can be done using a simple PHP echo statement:

...
<?php
...
// query database (basic sample code without error checking!)
$conn = mysqli_connect($servername, $username, $password, $dbname);
$sql = "SELECT * FROM Sample WHERE id=15";
$result = mysqli_query($conn, $sql);
// the query result should be a single row!
$row = mysqli_fetch_assoc($result);
...
// database query result is in $row
// use temporary PHP variables ($firstname and $lastname) to avoid a "quote" error in the echo statement
$firstname = $row["FirstName"];
$lastname = $row["LastName"];
...
// assign the query result to the javascript variables
echo "<script>var fname='$firstname'; var lname='$lastname';</script>";
...
?>
...

 

The result of the PHP database query is first transferred to the Javascript variables using the "echo" statement. The Javascript variables are linked to the form fields via the "Javascript Parameter" form element. If you now open the host page, the PHP database query is executed and the fields are filled with the values from the database.