[Javascript] Creating dynamic form using javascript

Yenan Visram yvisram at iders.ca
Fri Aug 29 12:55:25 CDT 2003 

I am having truoble with the forms.

My problem is as follows:

I want to have forms in html that change dynamically as the user enters selections. For example in a drop down menu I have text. and encode. If the user chooses fonts I want the page to refresh and ask for the fonts, coordinates and text to be sent. However if the user chooses image the page should ask for name of image and position etc. Within each of the selection I have the transfer and accept menu which change the form again according to what was selected. 

My problem is as follows:

The refreshing part is working fine. I am getting the correct form changes. However if trasfer "source" is selected together with any accpet value I cannot enter anything in the Source ID field even though it shows in the form. 

I am attaching both the html code and javascript:


Please help. Thanks

"font.js"
========================================
var transfer=0;
var accept=0;

function showSection(aValue)
{

var fontDiv;
var encodeDiv;
var OffDiv;
var SourceDiv;
var DestinationDiv; 
var FixedDiv;
var HostDiv;
var barDiv;

fontDiv = document.getElementById('font');
encodeDiv = document.getElementById('encode');

OffDiv = document.getElementById('Off');
SourceDiv = document.getElementById('Source');
DestinationDiv = document.getElementById('Destination');
FixedDiv = document.getElementById('Fixed');
HostDiv = document.getElementById('Host');

if (aValue == 'font')
{
fontDiv.style.visibility = 'visible';
encodeDiv.style.visibility = 'hidden';
OffDiv.style.visibility = 'visible';
DestinationDiv.style.visibility = 'hidden';

if (transfer=='Destination')
{
DestinationDiv.style.visibility = 'visible';
OffDiv.style.visibility = 'hidden';
}
if (transfer=='Source')
{


SourceDiv.style.visibility = 'visible';

}

if (transfer=='Off')
{

if (accept=="Fixed")
FixedDiv.style.visibility = 'visible'; 
if (accept=="Host")
HostDiv.style.visibility = 'visible'; 
}
if ((transfer==0)||(accept==0) && (transfer!='Destination'))
FixedDiv.style.visibility = 'visible'; 
}


if (aValue == 'encode')
{
fontDiv.style.visibility = 'hidden';
encodeDiv.style.visibility = 'visible';
OffDiv.style.visibility = 'hidden';
SourceDiv.style.visibility = 'hidden';
DestinationDiv.style.visibility = 'hidden'
FixedDiv.style.visibility = 'hidden';
HostDiv.style.visibility = 'hidden'; 
barDiv.style.visibility = 'hidden';


}

}

function showTransfer(aValue)
{
var OffDiv;
var SourceDiv;
var DestinationDiv;
var FixedDiv;
var HostDiv;

OffDiv = document.getElementById('Off');
SourceDiv = document.getElementById('Source');
DestinationDiv = document.getElementById('Destination');
FixedDiv = document.getElementById('Fixed');
HostDiv = document.getElementById('Host');

identify_transfer(aValue); 
if (aValue == 'Off')
{
OffDiv.style.visibility = 'visible';
SourceDiv.style.visibility = 'hidden';
DestinationDiv.style.visibility = 'hidden';

if((accept=="Fixed")||(accept==0))
FixedDiv.style.visibility = 'visible';

}
if (aValue == 'Source')
{
OffDiv.style.visibility = 'visible';
SourceDiv.style.visibility = 'visible';
DestinationDiv.style.visibility = 'hidden';
FixedDiv.style.visibility = 'hidden';

if((accept=="Fixed")||(accept==0))
FixedDiv.style.visibility = 'visible';
}

if (aValue == 'Destination')
{
OffDiv.style.visibility = 'hidden';
SourceDiv.style.visibility = 'hidden';
DestinationDiv.style.visibility = 'visible';
FixedDiv.style.visibility = 'hidden';
HostDiv.style.visibility = 'hidden';
}
}


function showAccept(aValue)
{
var FixedDiv,HostDiv;
FixedDiv = document.getElementById('Fixed');
HostDiv = document.getElementById('Host');

identify_accept(aValue);

if (aValue == 'Fixed')
{
FixedDiv.style.visibility = 'visible';
HostDiv.style.visibility = 'hidden'; 
}

if (aValue == 'Host')
{
FixedDiv.style.visibility = 'hidden';
HostDiv.style.visibility = 'visible'; 
}
} 



function identify_transfer(value)
{
transfer=value;
}


function identify_accept(value)
{
accept=value;
}

=========================================
"index.html"
=========================================
<HTML> 
<HEAD> 
<TITLE>This is on Linux!!!</TITLE>
<SCRIPT LANGUAGE="JavaScript" src="font.js">
</SCRIPT> 



</HEAD> 
<BODY> 
<FORM NAME="form1" ACTION="http://200.123.101.203/Javelin/javascript/server.cgi"
METHOD="GET"> 
Edit Layout:

<SELECT NAME="card_tools" 
ONCHANGE="showSection(this.value);" > 
<OPTION VALUE="font">Font</OPTION> 
<OPTION VALUE="encode">Encode</OPTION> 
</SELECT> 
<BR>


<DIV ID="font" 
STYLE="position: absolute; visibility: visible"> 
Font name:

<SELECT NAME="font_type">
<option>SWS060R
<option> SWS080R 
<option> SWS100R
<option> SWS140R 
<option> SWS180R 
<option> SWS240R </SELECT>
<BR>
X coordinate:
<INPUT NAME="X" TYPE="TEXT" SIZE="3">
<BR> 
Y coordinate:

<INPUT NAME="Y" TYPE="TEXT" SIZE="3">
<BR>
Justify:
<SELECT NAME="justify">
<option> Left
<option> Centre 
<option> Right</SELECT>
<BR>

Rotation:
<SELECT NAME="rotation">
<option> Horizontal
<option> Vertical
<option> Reverse Horizontal
<option> Reverse Vertical </SELECT>
<BR>

Transfer:
<SELECT NAME="transfer" 
ONCHANGE="showTransfer(this.value);" > 
<OPTION VALUE="Off">Off</OPTION> 
<OPTION VALUE="Source">Source</OPTION>
<OPTION VALUE="Destination">Destination</OPTION>
</SELECT> 
<BR>


<DIV ID="Off" 
STYLE="visibility: visible"> 

Accept:
<SELECT NAME="accept"
ONCHANGE="showAccept(this.value);">
<OPTION VALUE="Fixed">Fixed</OPTION>
<OPTION VALUE="Host">Host</OPTION> 
</SELECT>

</DIV> 

<DIV ID="Source" 
STYLE="position: absolute; visibility: hidden"> 
<BR>
Source ID:
<INPUT NAME="source_id" TYPE="TEXT" SIZE="20"> 

</DIV> 

<DIV ID="Destination" 
STYLE="position: absolute; visibility: hidden"> 

Destination ID:<INPUT NAME="destination_id" TYPE="TEXT" SIZE="20"> 

</DIV>


<DIV ID="Fixed" 
STYLE="position: absolute; visibility: visible"> 
<BR>
<BR>
<BR>
Fixed Text:

<INPUT NAME="fixed" TYPE="TEXT" SIZE="20">

</DIV> 

<DIV ID="Host" 
STYLE="position: absolute; visibility: hidden"> 
<BR>
<BR>
<BR>
Maximum Characters:

<INPUT NAME="host" TYPE="TEXT" SIZE="20">

</DIV> 
</DIV> 

<DIV ID="encode" 
STYLE="position: absolute; visibility: hidden"> 


Field Name:
<SELECT NAME="encode_name">
<OPTION> IATA
<OPTION> ABA
<OPTION> MINTS </SELECT>
<BR>

Strarting Position: 
<INPUT NAME="Positon" TYPE="TEXT" SIZE="3">
<BR>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><INPUT TYPE="SUBMIT">
</DIV> 
</FORM>
</BODY>
</HTML>


---

Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.504 / Virus Database: 302 - Release Date: 7/24/03

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20030829/667c78ed/attachment.htm>

More information about the Javascript mailing list