A
A. Name
Please view the code below. Run it. Please tell me why the contents
of the div isn't rewriting correctly. Thanks
--------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Photo Application Service</title>
<style type="text/css">
body, p, td
{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.title
{
font-size: 18px;
color: white;
font-weight: bold;
padding-bottom: 10px;
padding-top: 10px;
}
.subtitle
{
font-size: 14px;
color: black;
font-weight: bold;
padding-bottom: 2px;
padding-top: 2px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
/****************************************************
* functions for div rewriting *
*****************************************************/
// initialize global values for first time loading
var myText = ""
var displayText = new Array()
var arrPhotoURL = new Array()
var arrPhotoCaption = new Array()
// this function rewrites to an element based on browser
function rewriteDiv(ID,parentID,sText)
{
if (document.layers)
{
var oLayer;
if(parentID)
{
oLayer = eval('document.' + parentID + '.document.' + ID +
'.document');
} else
{
oLayer = document.layers[ID].document;
}
oLayer.open();
oLayer.write(sText);
oLayer.close();
} else if (parseInt(navigator.appVersion)>=5&&navigator.appName=="Netscape")
{
document.getElementById(ID).innerHTML = sText;
} else if (document.all)
{
document.all[ID].innerHTML = sText
}
}
// this function contains the content to rewrite the element
function addNewVal()
{
// check for vaild value
if (document.forms[0].photoCaption.value == "" ||
document.forms[0].photoURL.value == "")
{
alert("You must fill in both field in order to add a photo.")
} else
{
// assign temporary values
var displayPhotoURL = document.forms[0].photoURL.value
var displayPhotoCaption = document.forms[0].photoCaption.value
// find lengths, use same for all three
arrPhotoURL[arrPhotoURL.length] = displayPhotoURL
arrPhotoCaption[arrPhotoCaption.length] = displayPhotoCaption
displayText[displayText.length] = "<tr><td valign='top'>[<a
href='#' onclick='removeFromArray(" + displayText.length + "); return
false;'>remove</a>]</td><td valign='top'><a href='" + displayPhotoURL
+ "' target='_blank'>" + displayPhotoURL + "</a></td><td
valign='top'>" + displayPhotoCaption + "</td></tr>"
// loop through display array and then rewrite element
for (var x = 0; x < displayText.length; x++)
{
if (displayText[x] != "") // only write if value at array is not
blank
{
myText += displayText[x]
}
}
// update hidden form array values
newPhotoURLval = ""
for (var i = 0; i < arrPhotoURL.length; i++)
{
if (arrPhotoURL != "") // only write to form if has value
{
newPhotoURLval += arrPhotoURL
if ( i != arrPhotoURL.length ) // don't trail with comma
{
newPhotoURLval += ", "
}
}
}
document.forms[0].realPhotoURL.value = newPhotoURLval
newPhotoCaptionval = ""
for (var i = 0; i < arrPhotoCaption.length; i++)
{
if (arrPhotoCaption != "") // only write to form if has value
{
newPhotoCaptionval += arrPhotoCaption
if ( i != arrPhotoCaption.length ) // don't trail with comma
{
newPhotoCaptionval += ", "
}
}
}
document.forms[0].realPhotoCaption.value = newPhotoCaptionval
rewriteDiv('myLayer',null, myText)
}
}
function removeFromArray(number)
{
// erase values from arrays
arrPhotoURL[number] = ""
arrPhotoCaption[number] = ""
displayText[number] = ""
// update hidden form array values
newPhotoURLval = ""
for (var i = 0; i < arrPhotoURL.length; i++)
{
if (arrPhotoURL != "") // only write to form if has value
{
newPhotoURLval += arrPhotoURL
if ( i != arrPhotoURL.length ) // don't trail with comma
{
newPhotoURLval += ", "
}
}
}
document.forms[0].realPhotoURL.value = newPhotoURLval
newPhotoCaptionval = ""
for (var i = 0; i < arrPhotoCaption.length; i++)
{
if (arrPhotoCaption != "") // only write to form if has value
{
newPhotoCaptionval += arrPhotoCaption
if ( i != arrPhotoCaption.length ) // don't trail with comma
{
newPhotoCaptionval += ", "
}
}
}
document.forms[0].realPhotoCaption.value = newPhotoCaptionval
// redisplay text
}
//-->
</script>
</head>
<body>
<div align="center">
<form action="#" name="pwasEntry" id="pwasEntry">
<table width="95%" border="0" cellspacing="0" cellpadding="10"
bgcolor="#f5f5f5">
<!--- title of app page --->
<tr bgcolor="#4682b4">
<td align="center" valign="middle" class="title">
Photo Personal Web Application Service
</td>
</tr>
<tr>
<td>
<strong>Application description and instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore. Nulla vel, laoreet lobortis te commodo adipiscing qui magna
enim aliquip iriure commodo ullamcorper quis facilisi, lorem ut eu ex.
Praesent vel in luptatum ut quis consequat in autem praesent
dignissim, sit autem. Dolore facilisis te, eros dolor.
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Photographic Collection
</td>
</tr>
<tr>
<td>
<strong>Section Description and Instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="540">
<tr>
<td align="right" nowrap width="100">Collection Name:</td>
<td> </td>
<td align="left">
<input type="text" name="collectionName" size="50"
maxlength="250" title="Use this input field to input a title for your
collection of photographs.">
</td>
</tr>
<tr>
<td align="right" valign="top">Description:</td>
<td> </td>
<td align="left">
<textarea cols="50" rows="3" name="collectionDescription"
title="Use this form to describe the overall collection of photographs
that your are entering."></textarea>
</td>
</tr>
<tr>
<td align="right" nowrap>Background Color:</td>
<td> </td>
<td align="left">
<select name="backgroundColor" size="1" title="Use this form to
input what color you wish to have represented for the background
throughout your collection of photographs.">
<option value="0" SELECTED>Choos a color from the
dropdown</option>
<option value="#000000">Black</option>
<option value="#0000ff">Blue</option>
<option value="#008000">Green</option>
<option value="#ff0000">Red</option>
<option value="#708090">Slate Gray</option>
<option value="#d2b48c">Tan</option>
<option value="#ffff00">Yellow</option>
<option value="#ffffff">White</option>
</select>
</td>
</tr>
<tr>
<td align="right" nowrap width="100">Index Image:</td>
<td> </td>
<td align="left">
<input type="text" name="indexImage" size="50" maxlength="250"
title="Use this form to place an index image on the entrance page of
your photographic collection.">
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Individual Photos
</td>
</tr>
<tr>
<td>
<strong>Section Description and Instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="540">
<tr>
<td align="right" nowrap width="100">Photo Location:</td>
<td> </td>
<td align="left">
<input type="text" name="photoURL" size="50" maxlength="250"
title="Use this form to input the location of your photo.">
</td>
</tr>
<tr>
<td align="right" valign="top">Photo Caption:</td>
<td> </td>
<td align="left">
<textarea cols="50" rows="3" name="photoCaption" title="Use
this form to enter the catption information for your
photo."></textarea>
</td>
</tr>
<tr>
<td align="right" valign="top"><input type="button" name="Add"
value="Add" onclick="addNewVal(); document.forms[0].photoURL.value='';
document.forms[0].photoCaption.value='';"></td>
<td> </td>
<td align="left">
Click the "Add" button to add new photos to your repository.
The list in your current repository will list below with each
photograph's information. <span style="color: SteelBlue;">You may
continue to add photos to your "<strong>Current Repository</strong>"
until you are ready to create your collection.</span>
</td>
</tr>
</table>
</td>
</tr>
<!--- This is where the element that is rewritten
with Javascript is displayed and the hidden field kept --->
<input type="hidden" name="realPhotoURL">
<input type="hidden" name="realPhotoCaption">
<tr bgcolor="#b0c4de">
<td class="subtitle">Current Repository</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="95%" cellpadding="5">
<tr>
<td> </td>
<td width="49%"><strong>Photo Location</strong></td>
<td width="49%"><strong>Photo Caption</strong></td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<div id="myLayer">
There are currently no photos in your repository.
</div>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Finish Process and Create Collection
</td>
</tr>
<tr>
<td align="center">
<table width="95%">
<tr>
<td>Once you are satisfied with the number of photo in your
repository, then click on the upload collection button below to upload
your selections and create your photographic collection.</td>
<td> </td>
<td><input type="submit" name="Submit" value="Create
Photographic Collection"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
of the div isn't rewriting correctly. Thanks
--------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Photo Application Service</title>
<style type="text/css">
body, p, td
{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.title
{
font-size: 18px;
color: white;
font-weight: bold;
padding-bottom: 10px;
padding-top: 10px;
}
.subtitle
{
font-size: 14px;
color: black;
font-weight: bold;
padding-bottom: 2px;
padding-top: 2px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
/****************************************************
* functions for div rewriting *
*****************************************************/
// initialize global values for first time loading
var myText = ""
var displayText = new Array()
var arrPhotoURL = new Array()
var arrPhotoCaption = new Array()
// this function rewrites to an element based on browser
function rewriteDiv(ID,parentID,sText)
{
if (document.layers)
{
var oLayer;
if(parentID)
{
oLayer = eval('document.' + parentID + '.document.' + ID +
'.document');
} else
{
oLayer = document.layers[ID].document;
}
oLayer.open();
oLayer.write(sText);
oLayer.close();
} else if (parseInt(navigator.appVersion)>=5&&navigator.appName=="Netscape")
{
document.getElementById(ID).innerHTML = sText;
} else if (document.all)
{
document.all[ID].innerHTML = sText
}
}
// this function contains the content to rewrite the element
function addNewVal()
{
// check for vaild value
if (document.forms[0].photoCaption.value == "" ||
document.forms[0].photoURL.value == "")
{
alert("You must fill in both field in order to add a photo.")
} else
{
// assign temporary values
var displayPhotoURL = document.forms[0].photoURL.value
var displayPhotoCaption = document.forms[0].photoCaption.value
// find lengths, use same for all three
arrPhotoURL[arrPhotoURL.length] = displayPhotoURL
arrPhotoCaption[arrPhotoCaption.length] = displayPhotoCaption
displayText[displayText.length] = "<tr><td valign='top'>[<a
href='#' onclick='removeFromArray(" + displayText.length + "); return
false;'>remove</a>]</td><td valign='top'><a href='" + displayPhotoURL
+ "' target='_blank'>" + displayPhotoURL + "</a></td><td
valign='top'>" + displayPhotoCaption + "</td></tr>"
// loop through display array and then rewrite element
for (var x = 0; x < displayText.length; x++)
{
if (displayText[x] != "") // only write if value at array is not
blank
{
myText += displayText[x]
}
}
// update hidden form array values
newPhotoURLval = ""
for (var i = 0; i < arrPhotoURL.length; i++)
{
if (arrPhotoURL != "") // only write to form if has value
{
newPhotoURLval += arrPhotoURL
if ( i != arrPhotoURL.length ) // don't trail with comma
{
newPhotoURLval += ", "
}
}
}
document.forms[0].realPhotoURL.value = newPhotoURLval
newPhotoCaptionval = ""
for (var i = 0; i < arrPhotoCaption.length; i++)
{
if (arrPhotoCaption != "") // only write to form if has value
{
newPhotoCaptionval += arrPhotoCaption
if ( i != arrPhotoCaption.length ) // don't trail with comma
{
newPhotoCaptionval += ", "
}
}
}
document.forms[0].realPhotoCaption.value = newPhotoCaptionval
rewriteDiv('myLayer',null, myText)
}
}
function removeFromArray(number)
{
// erase values from arrays
arrPhotoURL[number] = ""
arrPhotoCaption[number] = ""
displayText[number] = ""
// update hidden form array values
newPhotoURLval = ""
for (var i = 0; i < arrPhotoURL.length; i++)
{
if (arrPhotoURL != "") // only write to form if has value
{
newPhotoURLval += arrPhotoURL
if ( i != arrPhotoURL.length ) // don't trail with comma
{
newPhotoURLval += ", "
}
}
}
document.forms[0].realPhotoURL.value = newPhotoURLval
newPhotoCaptionval = ""
for (var i = 0; i < arrPhotoCaption.length; i++)
{
if (arrPhotoCaption != "") // only write to form if has value
{
newPhotoCaptionval += arrPhotoCaption
if ( i != arrPhotoCaption.length ) // don't trail with comma
{
newPhotoCaptionval += ", "
}
}
}
document.forms[0].realPhotoCaption.value = newPhotoCaptionval
// redisplay text
}
//-->
</script>
</head>
<body>
<div align="center">
<form action="#" name="pwasEntry" id="pwasEntry">
<table width="95%" border="0" cellspacing="0" cellpadding="10"
bgcolor="#f5f5f5">
<!--- title of app page --->
<tr bgcolor="#4682b4">
<td align="center" valign="middle" class="title">
Photo Personal Web Application Service
</td>
</tr>
<tr>
<td>
<strong>Application description and instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore. Nulla vel, laoreet lobortis te commodo adipiscing qui magna
enim aliquip iriure commodo ullamcorper quis facilisi, lorem ut eu ex.
Praesent vel in luptatum ut quis consequat in autem praesent
dignissim, sit autem. Dolore facilisis te, eros dolor.
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Photographic Collection
</td>
</tr>
<tr>
<td>
<strong>Section Description and Instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="540">
<tr>
<td align="right" nowrap width="100">Collection Name:</td>
<td> </td>
<td align="left">
<input type="text" name="collectionName" size="50"
maxlength="250" title="Use this input field to input a title for your
collection of photographs.">
</td>
</tr>
<tr>
<td align="right" valign="top">Description:</td>
<td> </td>
<td align="left">
<textarea cols="50" rows="3" name="collectionDescription"
title="Use this form to describe the overall collection of photographs
that your are entering."></textarea>
</td>
</tr>
<tr>
<td align="right" nowrap>Background Color:</td>
<td> </td>
<td align="left">
<select name="backgroundColor" size="1" title="Use this form to
input what color you wish to have represented for the background
throughout your collection of photographs.">
<option value="0" SELECTED>Choos a color from the
dropdown</option>
<option value="#000000">Black</option>
<option value="#0000ff">Blue</option>
<option value="#008000">Green</option>
<option value="#ff0000">Red</option>
<option value="#708090">Slate Gray</option>
<option value="#d2b48c">Tan</option>
<option value="#ffff00">Yellow</option>
<option value="#ffffff">White</option>
</select>
</td>
</tr>
<tr>
<td align="right" nowrap width="100">Index Image:</td>
<td> </td>
<td align="left">
<input type="text" name="indexImage" size="50" maxlength="250"
title="Use this form to place an index image on the entrance page of
your photographic collection.">
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Individual Photos
</td>
</tr>
<tr>
<td>
<strong>Section Description and Instructions</strong><br>
These next few lines of text are used as filler until accurate
instructions can be included. Ut tation consequat iriure, feugiat
iusto facilisis molestie vulputate wisi facilisis. Minim te feugiat
nulla, volutpat qui praesent. Eum vel augue autem feugiat, quis ad
dolore.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="540">
<tr>
<td align="right" nowrap width="100">Photo Location:</td>
<td> </td>
<td align="left">
<input type="text" name="photoURL" size="50" maxlength="250"
title="Use this form to input the location of your photo.">
</td>
</tr>
<tr>
<td align="right" valign="top">Photo Caption:</td>
<td> </td>
<td align="left">
<textarea cols="50" rows="3" name="photoCaption" title="Use
this form to enter the catption information for your
photo."></textarea>
</td>
</tr>
<tr>
<td align="right" valign="top"><input type="button" name="Add"
value="Add" onclick="addNewVal(); document.forms[0].photoURL.value='';
document.forms[0].photoCaption.value='';"></td>
<td> </td>
<td align="left">
Click the "Add" button to add new photos to your repository.
The list in your current repository will list below with each
photograph's information. <span style="color: SteelBlue;">You may
continue to add photos to your "<strong>Current Repository</strong>"
until you are ready to create your collection.</span>
</td>
</tr>
</table>
</td>
</tr>
<!--- This is where the element that is rewritten
with Javascript is displayed and the hidden field kept --->
<input type="hidden" name="realPhotoURL">
<input type="hidden" name="realPhotoCaption">
<tr bgcolor="#b0c4de">
<td class="subtitle">Current Repository</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="95%" cellpadding="5">
<tr>
<td> </td>
<td width="49%"><strong>Photo Location</strong></td>
<td width="49%"><strong>Photo Caption</strong></td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<div id="myLayer">
There are currently no photos in your repository.
</div>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#b0c4de">
<td class="subtitle">
Finish Process and Create Collection
</td>
</tr>
<tr>
<td align="center">
<table width="95%">
<tr>
<td>Once you are satisfied with the number of photo in your
repository, then click on the upload collection button below to upload
your selections and create your photographic collection.</td>
<td> </td>
<td><input type="submit" name="Submit" value="Create
Photographic Collection"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>