| |
 |
 | '
Using data input of one form page as input for another page of the same form (in Joomla).
In a (multipage) form, it may be useful to display the data given by the user as input in a form field on some other form page (or another location of the same page). This issue is discussed on several webpages, but in most cases incompletely or somewhat obscure. Here I have tried to give a clear description of a possible solution.
Three different cases with increasing complexity will be distinghuised:
- The information has to be displayed in exactly the same format as the input data.
- The input data have to be re-arranged for the output, and all input data are collected in the same page of the form.
- The input data have to be re-arranged for the output, and the input data are collected in different pages of the form.
1. Input has to be transfered to another page and displayed there in the same format.
Lets assume that we have an input text field with
id="fieldname"
After the user has put some text in that input field (for instance the text: my rubbish text) you want to catch that text.
You can put this text into a variable, xxx, by the command:
xxx = document.getElementById('fieldname').value;
To call this command in the form, several methods can be used, linking the command to an event. For instance, the input field can be given the (additional) attribute:
onblur = "xxx = document.getElementById('fieldname').value;"
Or you can catch the field value by something called innerHTML, that is by an innerHTML object with an ID. This object exists throughout the complete form, and can be displayed in one place in that form where a <span> is defined with the same ID as the innerHTML ID.
An innerHTML object with ID id='my_object' can be given a value, for instance xxx, by the command
document.getElementById('my_object').innerHTML = xxx;
The creation of this innerHTML object can be performed in a call linked to an event which is declared in the attribute of the input function, for instance as
onblur = "document.getElementById('my_object').innerHTML = document.getElementById('fieldname').value;"
or as attribute of the "NEXT" button, as
onfocus = "document.getElementById('my_object').innerHTML = document.getElementById
('fieldname').value;"
Note that the browser Safari does not fire the onfocus event if the NEXT button is focused. To call the assignment to the innerHTML attribute, an additional onmousedown event can be added as attribute to the NEXT button,
onmoudedown = "document.getElementById('my_object').innerHTML = document.getElementById
('fieldname').value;"
Then, the innerHTLM object has to be displayed in a text field. Let the innerHTML object have ID my_object. Then it can be displayed in a running (HTML) text including a <span> tag with the same ID, like in the text:
In my HTML text I will now show the content of the innerHTML object my_object, that is <span id='my_object'>.</span> in my sentence.
In this example, the dot within the span tag is replace by the content of the innerHTML object with the same ID as the span. Since an ID is unique, only one span tag can exist with that ID, so the innerHTML object can only be shown at one place! If you want the text twice, just define a second innerHTML object with the same content but another ID.
The nice thing about the innerHTML object is that each time the object is given another value, the display of the innerHTML object will be adapted.
|
If the input field is a radio or a checkbox field, getting the input value is slightly more complicated.Each radio/checkbox consists out of several elements, the checkboxes/radio buttons. If the ID of such a field is given as 'id_field', the checkboxes have ID 'id_field0', 'id_field1', .... These fields have a value (the text shown next to the checkbox) and a condition (checked or not). To get the numbers of the checked checkboxes and the value of the checked boxes, the following javascript code can be used:
var j; var ind_checked = new Array(); var name_checked="";
for(j=0;j<document.getElementsByName('form[id_field][]').length;j++)
if (document.getElementById('id_field'+j).checked)
{ind_checked.push(j);
name_checked = name_checked + ";" + getElementById('id_field'+j).value
}
For radioboxes, this function can be slightly simplyfied because only one radio button can be checked.
Note that for a date field (a field with separate scroll-down menus for the day, month and year) the ID of each of these three indication is also formed by the ID of the complete field (for instance 'id_date') followed by some extra marker (in some Joomla version, these markers are 'd', 'm' and 'y', resp., giving, for instance, as ID for the month field 'id_datem').
| |
2. The input has to be manipulated before display, all input from the same form page.
innerHTML objects can only be displayed in HTML texts. The content of the element (for instance the text string my rubbish text) cannot be manipulated.
If you want to manipulate the input data before display (for instance pasting the first name, second name and family name, but not showing an extra space if the second name is absent, or adding and substracting input numbers), you have to gather all relevant information in a javascript function, perform the manipulations in that function, and at the end of the function, write the result you want to display to an innerHTML object. That function has to be called within the form page with the input data!
An easy example of such a function, pasting first, second and family name without extra space if second name is missing:
function makeinnerHTML()
{
var fn=document.getElementById("firstname").value;
var sn=document.getElementById("secondname").value;
var Fn=document.getElementById("familyname").value;
if (sn == "") {name = fn + " " + Fn}
else {name = fn + " " + sn + " " + Fn}
// schrijven tabel naar innerHTML
nr = "</td></tr><tr><td>";
nc = "</td><td>";
tabS = "<table><tr><td>";
tabE = "</td></tr></table>";
tt = "<div class='head'>The given name is:</div>";
tt = tt + tabS + "Name: " + nc + name + nr;
tt = tt + tabE + "<br>";
document.getElementById('Pdata').innerHTML = tt;
} // Einde maakinnerHTML
Note that putting the result in a table might also be done in the (text) field where the innerHTML object will be displayed.
The function can be called for instance by an onfocus event for the "NEXT" button. In that case, add as attribute to that button:
onfocus = "makeinnerHTML();"
3. The input has to be manipulated before display, the input is given on different pages.
In the previous text, I have described how to get the input value from a text field. However, as soon as you go on to the next page of the form, the value of the element is set back to the default value. That is, the page is refreshed and the input is lost to the element (somewhere it has to be saved, but I could not find how to read the given input).
If you want to combine data collected in different pages of the form, the javascript function to manipulate the data should be placed in the last of the form pages collecting the data. Two methods can be used to save the data from the earlier pages for usage in a later page:
- Write the data to a cookie and read that cookie in the javascript function manipulating the input data.
- Make a hidden field, that is a text field which is not shown to the users of the form, but to which data can be written, for instance in a javascript function with the command:
document.getElementById("NameOfHiddenField").value = inputvalue;
and read the data from the hidden field in the javascript function manipulating the input data, for instance with the command:
var valuename = document.getElementById("NameOfHiddenField").value;
Surprisingly, going to the next page of the form, data written to a hidden field are saved, whereas data written (or given as input by the user) to the normal fields is lost to the getElementById method.
Close software information
Free software and computer tips by ECOSTAT
List of the free available software developed by ECOSTAT and some computer tips from ECOSTAT
| |
|
