Javascript, XML, XSLT, and HTML dynamic form framework example

1. File description

TPL. xml: form field and content data file, which references TPL. XSL

TPL. XSLT: Form Field Rendering Control script, reference TPL. js

TPL. JS: form field rendering Auxiliary Control Specimen

Tpl.html: client HTML page.

2. Running Effect

Continue.

3. File Content

TPL. xml

Bytes -----------------------------------------------------------------------------------------------------

<? XML version = "1.0" encoding = "UTF-8"?>
<? XML-stylesheet href = "TPL. XSLT" type = "text/XSL"?>
<TPL id = "guid">
<Table>
<Cell index = "1" name = "C1" datasource = "yes/no" value = "no"/>
<Cell index = "2" name = "C2" datasource = "" value = "333"/>
<Cell index = "3" name = "C3" datasource = "" value = "444"/>
<Cell index = "4" name = "C4" datasource = "" value = "555"/>
<Cell index = "5" name = "C5" datasource = "EN1/EN2/en3" value = "EN2"/>
</Table>
</TPL>

Bytes -----------------------------------------------------------------------------------------------------

TPL. XSLT

Bytes -----------------------------------------------------------------------------------------------------

<? XML version = "1.0" encoding = "UTF-8"?>
<XSL: stylesheet version = "1.0" xmlns: XSL = "http://www.w3.org/1999/XSL/Transform" xmlns: fo = "http://www.w3.org/1999/XSL/Format">
<XSL: output method = "html"/>
<XSL: template match = "/">
<SCRIPT src = "TPL. js" type = "text/JavaScript"> </SCRIPT>
<Input type = "hidden" id = "h_text" value = ''/>
<Input type = "hidden" id = "h_select" value = ''/>
<Input type = "hidden" id = "h_tpl" value = ''/>
<SCRIPT type = "text/JavaScript"> pushvalue ('H _ TPL ',' <XSL: value-of select = "TPL/@ ID"/> '); </SCRIPT>
<Table width = "151" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<XSL: For-each select = "TPL/table/cell">
<XSL: Apply-templates select = "." mode = "cell"/>
</XSL: For-each>
</Table>
</XSL: Template>
<XSL: template match = "cell" mode = "cell">
<XSL: variable name = "p_datasource">
<XSL: value-of select = "@ datasource"/>
</XSL: Variable>
<XSL: variable name = "p_type">
<XSL: value-of select = "@ Type"/>
</XSL: Variable>
<Tr>
<TD> <XSL: value-of select = "@ name"/> </TD>
<XSL: Choose>
<XSL: When test = "string-length ($ p_datasource) = 0">
<TD>
<Input type = "text" width = "40">
<XSL: attribute name = "ID">
<XSL: value-of select = "Concat ('cell _ ', @ index)"/>
</XSL: attribute>
<XSL: attribute name = "value">
<XSL: value-of select = "@ value"/>
</XSL: attribute>
</Input>
<SCRIPT type = "text/JavaScript">
VaR sendvalue = '';
Sendvalue + = '<XSL: value-of select = "Concat ('cell _', @ index)"/> '+' | ';
Sendvalue + = '<XSL: value-of select = "@ Index"/>' + '| ';
Sendvalue + = '<XSL: value-of select = "@ name"/>' + '| ';
Sendvalue + = '<XSL: value-of select = "@ datasource"/> ';
Pushvalue ('H _ text', sendvalue );
</SCRIPT>
</TD>
</XSL: When>
<XSL: When test = "string-length ($ p_datasource)> 0">
<TD>
<SELECT>
<XSL: attribute name = "ID">
<XSL: value-of select = "Concat ('cell _ ', @ index)"/>
</XSL: attribute>
</SELECT>
<SCRIPT type = "text/JavaScript"> prepareselect ('<XSL: value-of select = "Concat ('cell _', @ index)"/> ', '<XSL: value-of select = "$ p_datasource"/>', '<XSL: value-of select = "@ value"/>'); </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR sendvalue = '';
Sendvalue + = '<XSL: value-of select = "Concat ('cell _', @ index)"/> '+' | ';
Sendvalue + = '<XSL: value-of select = "@ Index"/>' + '| ';
Sendvalue + = '<XSL: value-of select = "@ name"/>' + '| ';
Sendvalue + = '<XSL: value-of select = "@ datasource"/> ';
Pushvalue ('H _ select', sendvalue );
</SCRIPT>
</TD>
</XSL: When>
</XSL: Choose>
</Tr>
</XSL: Template>
</XSL: stylesheet>

Bytes -----------------------------------------------------------------------------------------------------

TPL. js

Bytes -----------------------------------------------------------------------------------------------------

Function prepareselect (ID, datasource, value)
{
VaR selectobj = Document. getelementbyid (ID );
VaR array = datasource. Split ('/');
VaR selectindex =-1;
For (VAR I = 0; I <array. length; I ++)
{
VaR itemname = array [I];
VaR itemvalue = array [I];
VaR item = New Option (itemname, itemvalue );
Selectobj. Options. Add (item );
If (itemvalue = value)
Selectindex = I;

}
Selectobj. selectedindex = selectindex;
}
Function pushvalue (ID, value)
{
VaR hiddenobj = Document. getelementbyid (ID );
If (hiddenobj. value = '')
Hiddenobj. value = value;
Else
Hiddenobj. value = hiddenobj. Value + "^" + value;
}

Bytes -----------------------------------------------------------------------------------------------------

Tpl.html

Bytes -----------------------------------------------------------------------------------------------------

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head>
<Title> demo </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<SCRIPT type = "text/JavaScript">
Function loaddata ()
{
VaR OBJ = Document. getelementbyid ('ifr ');
// Get data from server
OBJ. src = 'tpl. xml ';
}
Function savedata ()
{
VaR OBJ = Document. getelementbyid ('ifr ');
VaR refdoc = obj.content##doc ument;
If (! Refdoc. getelementbyid ('H _ text '))
{
Alert ('Press load-button please .');
Return;
}
VaR txtarray = refdoc. getelementbyid ('H _ text'). value. Split ('^ ');
VaR selectarray = refdoc. getelementbyid ('H _ select'). value. Split ('^ ');
VaR tplid = refdoc. getelementbyid ('H _ TPL '). value;
VaR savexml = '';
Savexml + = "<? XML version = '1. 0' encoding = 'utf-8'?> ";
Savexml + = "<? XML-stylesheet href = 'tpl. XSLT 'Type = 'text/XSL '?> ";
Savexml + = "<TPL id = '" + tplid + "'> ";
Savexml + = "<Table> ";
For (VAR I = 0; I <txtarray. length; I ++)
{
VaR id = txtarray [I]. Split ('|') [0];
VaR Index = txtarray [I]. Split ('|') [1];
VaR value = refdoc. getelementbyid (ID). value;
VaR name = txtarray [I]. Split ('|') [2];
VaR datasource = txtarray [I]. Split ('|') [3];
Savexml + = "<cell index = '" + index + "'name ='" + name + "'datasource = '" + datasource + "'value ='" + value + "'/> ";
}
For (VAR I = 0; I <selectarray. length; I ++)
{
VaR id = selectarray [I]. Split ('|') [0];
VaR Index = selectarray [I]. Split ('|') [1];
VaR value = refdoc. getelementbyid (ID). value;
VaR name = selectarray [I]. Split ('|') [2];
VaR datasource = selectarray [I]. Split ('|') [3];
Savexml + = "<cell index = '" + index + "'name ='" + name + "'datasource = '" + datasource + "'value ='" + value + "'/> ";
}
Savexml + = "</table> ";
Savexml + = "</TPL> ";
Alert (savexml );
// Post to server then save
}
</SCRIPT>
</Head>
<Body>
<Input type = "button" value = "LOAD" onclick = "loaddata ();"/>
<Input type = "button" value = "save" onclick = "savedata ();"/>
<Br/>
<IFRAME id = "IFR" src = ""/>
<Br/>
</Body>
</Html>

Bytes -----------------------------------------------------------------------------------------------------