...

View Full Version : conditional form.value = ""; not working properly



canadianjameson
09-02-2006, 07:16 PM
Hey, the following bolded code is not working anymore and I can't figure out why.



<script type="text/javascript">
var arrPrevDiv = [null, null];

function toggle(id, linkGroup) {
if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") {
alert("Please stop the slideshow before continuing.");
return false;
}
if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}

var s = document.getElementById(id);
if (s == 'contact')
{
setTimeout("document.fvjonesContact.senderName.focus();",1);
document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";
}
s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
window.location.href='#'+ id;
window.status=''

}

window.onload = function(){
arrPrevDiv[1] = document.getElementById("startShow");
}
</script>

What this is supposed to do is when the user opens the div/link called 'contact', it is supposed to a) set the focus to the first field, and b) clear all fields of previously entered data.

I remember this working before but now it wont seem to do it

any ideas why? you can see it here: www.fvjones.ca/enter.html --> contact

here's the pages code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Francine V. Jones</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
A:link, A:visited, A:active {
text-decoration: none; color: white;
}
A:hover {
text-decoration: underline; color: white;
}
#pageContainer {
background-image: url(images/background.jpg);
min-height: 100%;
}
* html #pageContainer {
height:100%;
}
.picLink {
border: 0
}
#topBar {
height: 75px;
}
#header {
background: #FFFFFF;
text-align: center;
border-bottom: solid 1px black;
}
#topMenu {
height: 175px;
border-bottom: solid 1px white;
border-top: solid 1px white;
text-align: center;
}
#jonesArt {
position: relative;
margin-left: 60px;
margin-top: 15px;
float: left;
display: inline;
text-align: left;
width: 130px
}
#jonesArt p {
margin-top: 15px;
}
#fvjdesign {
position: relative;
margin: 15px 190px 0 190px;
}
#fvjdesign p {
margin-top: 5px;
}
#efviCollections {
position: relative;
margin-top: 15px;
margin-right: 60px;
float: right;
display: inline;
text-align: right;
width: 150px;
}
#efviCollections p {
margin-top: 40px;
}
#infoLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
#galleryLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
#contactLinks {
float: left;
t
ext-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
.spacer {
height: 100px;
}
br.heading {
font-size: 20px
}
#biographicalNotes{
display: none;
margin-left: 250px;
padding-bottom: 100px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
#artistStatement {
display: none;
margin-left: 250px;
padding-bottom: 50px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#productSpectrum {
display: none;
margin-top: 25px;
padding-bottom: 25px;
text-align: left;
color: #FFFFFF;
font-size: 13px;
}
#productSpectrum ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#Landscape, #Floral, #Jewelry, #artGallery{
display: none;
padding-top: 25px;
padding-bottom: 30px;
font-size: 13px;
}
#landscapeLink {
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-left: 125px;
padding-bottom: 25px;
}
#floralLink {
float: right;
text-align: center;
padding-right: 125px;
margin-left: auto;
margin-right: auto;
}
#floralGallerySwitcher {
clear: left;
margin-left: 81px;
padding-top: 25px;
padding-bottom: 25px;
}
#landscapeGallerySwitcher {
clear: left;
margin-left: 96px;
padding-top: 25px;
padding-bottom: 25px;
}
#contact {
display: none;
margin-top: 40px;
margin-bottom: 30px;
margin-left: 150px;
font-size: 13px;
color: white;
text-align: left;
}
.formTitles {
clear: left;
display: inline;
float: left;
width: 200px
}
.field {
position: relative;
display: inline;
}
#asRight {
padding-left: 225px;
padding-top: 15px
}
#psLeft {
float: left;
width: 125px;
margin-left: 75px;
}
#psLeft p {
margin-bottom: 100px;
}
#psLeft a {
text-decoration: underline
}
#psMid {
float: left;
width: 175px;
height: 150px;
margin-left: 100px;
}
#psRight {
float: left;
height: 150px;
margin-left: 100px;

}
#psRight p {
margin-bottom: 100px;
}
.heading {
font-size: 20px
}
.indent {
margin-left: 20px;
}
.thumbs {
float: left;
width: 180px;
padding-left: 75px
}
.thumbs div {
width: 77px;
height: 77px;
float: left;
margin: 5px 5px 5px 5px;
text-align: center;
}
.thumbnails {
border: 1px solid white;
}
.materials {
float: left;
padding: 5px 5px 5px 5px;
margin-left: 50px;
color: white
}
.materials ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
</style>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
var arrPrevDiv = [null, null];

function toggle(id, linkGroup) {
if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") {
alert("Please stop the slideshow before continuing.");
return false;
}
if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}

var s = document.getElementById(id);
if (s == 'contact')
{
setTimeout("document.fvjonesContact.senderName.focus();",1);
document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";
}
s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
window.location.href='#'+ id;
window.status=''

}

window.onload = function(){
arrPrevDiv[1] = document.getElementById("startShow");
}
</script>

<script language="javascript" type="text/javascript">
function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
if (!evt) return true;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 13 && node && node.type=="text") {
evt.keyCode = 9; //tab
return true;
}
}
document.onkeydown = checkCR;
</script>

<script type="text/javascript">
function validate(oForm)
{
var name = oForm['name'];
var email = oForm['email'];
var subject = oForm['subject'];
var body = oForm['body'];
var errors = [];
var messages = [];
var nums = /[0-9]/;
var mail = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;


/* you could trim down these if statements, but I figured you might have different
* conditions for each one, so meh
*/
if(name.value == "" || nums.test(name.value))
{
errors[errors.length] = name;
messages[messages.length] = "Please enter a valid name";
}
if(email.value == "" || !mail.test(email.value))
{
errors[errors.length] = email;
messages[messages.length] = "Please enter a valid email";
}
if(subject.value == "")
{
errors[errors.length] = subject;
messages[messages.length] = "Please enter a valid subject";
}

// use length property to validate how many chars you want
if(body.value == "" || body.value.length < 5)
{
errors[errors.length] = body;
messages[messages.length] = "Please enter a valid message";
}

if(errors.length > 0)
{
var err = 'The following modifications are required:' + "\n" ;
for(var i = 0; i < errors.length; i++)
{
err += '~ ' + messages[i] + "\n";
errors[0].select();
}
alert(err);
return false;
}
return true;
}
//
/*
<!--
var name = "francine";
var domain = "fvjones.ca";
document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">Contact</a>');
// -->
*/
</script>
</head>

<body>
<div id="pageContainer">
<div id="topBar"></div>
<div id="topMenu">
<div id="jonesArt"><a href="#artGallery" onclick="toggle('artGallery', 0);"><img src="images/jonesArt.jpg" width="80" height="80" alt="" class="picLink"></a></div>
<div id="efviCollections"><a href="#Jewelry" onclick="toggle('Jewelry', 0);"><img src="images/efviCollections.jpg" alt="" class="picLink"></a></div>
<div id="fvjdesign"><img src="images/fvdesign.jpg" alt=""></div>
</div>
<div id="infoLinks">
<a href="#artistStatement" onclick="return toggle('artistStatement', 0);">Artist's Statement</a><br>
<a href="#biographicalNotes" onclick="return toggle('biographicalNotes', 0);">Biographical Notes</a><br>
<a href="#productSpectrum" onclick="return toggle('productSpectrum', 0);">Product Spectrum</a><br>
</div>
<div id="galleryLinks">
<a href="#artGallery" onclick="toggle('artGallery', 0);">Art Gallery</a><br>
<a href="#Jewelry" onclick="toggle('Jewelry', 0);">Jewelry Gallery</a><br>
</div>
<div id="contactLinks">
<a href="#contact" onclick="return toggle('contact', 0);">Contact</a>
</div>
<div class="spacer"></div>
<div id="artistStatement">
<span class="heading">artist's statement ...</span>
<br>
<br>"In a world of checks and balances
<br>where two + two predictably equal four
<br>how delicious it is to savour
<br>a state
<br>of mind and heart where
<br>the bottom line need never
<br>run straight."
<br>___________
<div id="asRight">
francine v. jones
</div>
</div>
<div id="biographicalNotes">
<span class="heading">francine v. jones
<br>a few biographical notes...</span>
<br>
<br>a native montr&#233;aler
<br>francine v. jones revisited art, her first love, in the late 1990's
<br>choosing watercolour as her primary medium
<br>for its independent nature, unpredictability and fluid grace.
<br>
<br>Her works includes paintings, monoprints and collages . . .
<br>recently complemented by a selection of
<br>unique gold and silver jewellery created in the spirit of wearable sculpture.
</div>
<div id="productSpectrum">
<div id="psLeft">
<p><a href="#artGallery" onclick="toggle('artGallery', 0)">JONES art</a></p>
<p>FV design</p>
<p><p><a href="#Jewelry" onclick="toggle('Jewelry', 0)">EFVI collections</a></p>
</div>
<div id="psMid">
Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul>

Decorative Accessories<ul><li>frames</li><li>trays</li><li>platters</li><li>plus ...</li></ul>

Jewellery<ul><li>rings</li><li>bracelets</li><li>necklaces</li><li>plus ...</li></ul>
</div>
<div id="psRight">
<p>Watercolour & Mixed Media</p>
<p>Silver & Mixed Media</p>
<p>Silver & Gold</p>
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="artGallery">
<div id="landscapeLink">
<a href="#Landscape" onclick="toggle('Landscape', 0)">Landscapes</a>
<br>
<br>
<a href="#Landscape" onclick="toggle('Landscape', 0)" title="Indian Summer - Dimensions: 65 x 50 cm"><img class="picLink" src="images/paintings/landscapes/thumbnails/IndianSummerLink.jpg"></a>
</div>
<div id="floralLink">
<a href="#Floral" onclick="toggle('Floral', 0)">Florals</a>
<br>
<br>
<a href="#Floral" onclick="toggle('Floral', 0)" title="Feather Foliage - Dimensions: 57 x 76 cm"><img class="picLink" src="images/paintings/florals/thumbnails/FeatherFoliageLink.jpg"></a>
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="Landscape">
<div class="thumbs">
<div><a href="images/paintings/landscapes/InletCove.jpg" rel="lightbox[landscapes]" title="Inlet Cove - Dimensions: 38 x 58 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/InletCove.jpg"></a></div>
<div><a href="images/paintings/landscapes/Grasslands.jpg" rel="lightbox[landscapes]" title="Grasslands - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/Grasslands.jpg"></a></div>
<div><a href="images/paintings/landscapes/NorthernLight.jpg" rel="lightbox[landscapes]" title="Northern Light - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/NorthernLight.jpg"></a></div>
<div><a href="images/paintings/landscapes/SpringThaw.jpg" rel="lightbox[landscapes]" title="Spring Thaw - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/SpringThaw.jpg"></a></div>
<div><a href="images/paintings/landscapes/NewDawn.jpg" rel="lightbox[landscapes]" title="New Dawn - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/NewDawn.jpg"></a></div>
<div><a href="images/paintings/landscapes/GraniteGorge.jpg" rel="lightbox[landscapes]" title="Granite Gorge - Dimensions: 50 x 65"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/GraniteGorge.jpg"></a></div>
<div><a href="images/paintings/landscapes/GlacierLake.jpg" rel="lightbox[landscapes]" title="Glacier Lake - Dimensions: 57 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/GlacierLake.jpg"></a></div>
<div><a href="images/paintings/landscapes/ChasmVista.jpg" rel="lightbox[landscapes]" title="Chasm Vista - Dimensions: 55 x 55 cm "><img class="thumbnails" src="images/paintings/landscapes/thumbnails/ChasmVista.jpg"></a></div>
</div>
<div class="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="landscapeGallerySwitcher"><a href="#Floral" onclick="toggle('Floral', 0)">View Floral Gallery</a></div>
<div class="clear">&nbsp;</div>
</div>
<div id="Floral">
<div class="thumbs">
<div><a href="images/paintings/florals/BowledOver.jpg" rel="lightbox[florals]" title="Bowled Over - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/BowledOver.jpg"></a></div>
<div><a href="images/paintings/florals/Fresh.jpg" rel="lightbox[florals]" title="Fresh - Dimensions: 56 x 38 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Fresh.jpg"></a></div>
<div><a href="images/paintings/florals/HarvestOffering.jpg" rel="lightbox[florals]" title="Harvest Offering - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/HarvestOffering.jpg"></a></div>
<div><a href="images/paintings/florals/Splash!.jpg" rel="lightbox[florals]" title="Splash! - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Splash!.jpg"></a></div>
<div><a href="images/paintings/florals/FlashFlower.jpg" rel="lightbox[florals]" title="Flash Flower - Dimensions: 28 x 22 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/FlashFlower.jpg"></a></div>
<div><a href="images/paintings/florals/Spring_is_Sprung.jpg" rel="lightbox[florals]" title="Spring is Sprung - Dimensions: 65 x 50 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Spring_is_Sprung.jpg"></a></div>
<div><a href="images/paintings/florals/FlightOfFancy.jpg" rel="lightbox[florals]" title="Flight of Fancy - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/FlightOfFancy.jpg"></a></div>
<div><a href="images/paintings/florals/Zenith.jpg" rel="lightbox[florals]" title="Zenith - Dimensions: 75 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Zenith.jpg"></a></div>
</div>
<div class="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="floralGallerySwitcher"><a href="#Landscape" onclick="toggle('Landscape', 0)">View Landscape Gallery</a></div>
<div class="clear">&nbsp;</div>
</div>
<div id="Jewelry">
<div class="thumbs">
<div><a href="images/jewelry/CrazyForYou.jpg" rel="lightbox[jewelry]" title="Crazy for You"><img class="thumbnails" src="images/jewelry/thumbnails/CrazyForYou.jpg"></a></div>
<div><a href="images/jewelry/PearlAbacus.jpg" rel="lightbox[jewelry]" title="Pearl Abacus"><img class="thumbnails" src="images/jewelry/thumbnails/PearlAbacus.jpg"></a></div>
<div><a href="images/jewelry/OrientExpress.jpg" rel="lightbox[jewelry]" title="Orient Express"><img class="thumbnails" src="images/jewelry/thumbnails/OrientExpress.jpg"></a></div>
<div><a href="images/jewelry/Trapeze.jpg" rel="lightbox[jewelry]" title="Trapeze"><img class="thumbnails" src="images/jewelry/thumbnails/Trapeze.jpg"></a></div>
<div><a href="images/jewelry/UpBeat.jpg" rel="lightbox[jewelry]" title="Up Beat"><img class="thumbnails" src="images/jewelry/thumbnails/UpBeat.jpg"></a></div>
<div><a href="images/jewelry/Seascape.jpg" rel="lightbox[jewelry]" title="Seascape"><img class="thumbnails" src="images/jewelry/thumbnails/Seascape.jpg"></a></div>
<div><a href="images/jewelry/Contempo.jpg" rel="lightbox[jewelry]" title="Contempo"><img class="thumbnails" src="images/jewelry/thumbnails/Contempo.jpg"></a></div>
<div><a href="images/jewelry/CelticSpirit.jpg" rel="lightbox[jewelry]" title="Celtic Spirit"><img class="thumbnails" src="images/jewelry/thumbnails/CelticSpirit.jpg"></a></div>
</div>
<div class="materials">Jewellery<ul><li>rings</li><li>bracelets</li><li>necklaces</li><li>plus ...</li></ul></div>
<div class="clear">&nbsp;</div>
</div>
<div id="contact">
<form action="../cgi-bin/fvjones.pl" name="fvjonesContact" method="post" ID="Form1" onsubmit="return validate(this);">
<input type="hidden" name="_config" value="formatConfig" ID="Hidden1"/>
Please enter the following information:<br><br>
<div class="formTitles">Name</div><input type=text class="field" name="name" size="40" tabindex="1" ID="senderName">
<br>
<div class="formTitles">E-mail Address</div><input type=text class="field" name="email" size="40" tabindex="2" id="senderEmail">
<br>
<div class="formTitles">Subject</div><input type=text class="field" name="subject" size="40" tabindex="3" id="emailSubject">
<br>
<div class="formTitles">Message</div>
<textarea name="body" cols="80" rows="12" wrap="HARD" id="emailBody" tabindex="4"></textarea>
<br><br>
<input type="submit" name="Submitbtn" value="Submit" tabindex="5" ID="Submit1">
</form>
</div>
</div>

</body>
</html>

mic2100
09-02-2006, 11:21 PM
try this...



var s = document.getElementById(id);
if (s == 'contact')
{

document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";

setTimeout("document.fvjonesContact.senderName.focus();",1);
}


i don't think you can have the document.fvjonesContact.senderEmail.value = "" before the timeout function is called since this calls another function after the alloted time.

canadianjameson
09-03-2006, 06:45 PM
Hey,

I tried :( but unfortunately it didn't work. (the logic was right though :D)

Any other ideas. its aggravating because i know its something small

edit:

i trimmed the code down because two parts of it were obsolete.
this might make it easier to help me


<script type="text/javascript">
var arrPrevDiv = [null, null];

function toggle(id, linkGroup) {

if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}

var s = document.getElementById(id);

s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
window.location.href='#'+ id;
window.status=''

if (s == 'contact')
{
document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";
setTimeout("document.fvjonesContact.senderName.focus();",1);
}

}

/* if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") {
alert("Please stop the slideshow before continuing.");
return false;
}

window.onload = function(){
arrPrevDiv[1] = document.getElementById("startShow");
}
*/
</script>

Kravvitz
09-04-2006, 05:31 AM
document.getElementById() returns an element reference, yet you're testing if it's equal to a string?

Perhaps you want this:

if (id == 'contact')
P.S. I suggest you learn how semantics apply to X/HTML. (http://www.dynamicsitesolutions.com/html/semantics/)

canadianjameson
09-04-2006, 07:11 AM
perfect! works like a charm.

I'm reading about sematics now :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum