...

View Full Version : Need help with spry validation select menu



MaDmiX
02-29-2012, 08:21 PM
Hi All,


I searched for an answer but didn't find anything that matched my issue. I am using Dreamweaver CS5 and have a few spry validation select boxes on my page. All but one are working correctly. The one in question is spryselect1 ("spryEquipLoc"). For some reason (which I cannot figure out) this field will display the selectRequiredState even after a selection has been made. Thanks in advance for any help. Here is the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="javascripts/Calendar.js" type="text/javascript"></script>
<!--<script src="javascripts/datetimepicker_css.js"></script>-->

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Equipment issue","Log issue","Operator error","Media issue","Satellite issue","Program issue","Playlist issue","Promo issue"]
categories["Equipment issue"] = ["Digibeta deck","XDCAM deck","Video monitor","Chyron","Switcher","Media port","Downstream keyer","Asset base PC","Device server","Rapid Play X PC","Satellite receiver","Video server","Miranda wall","Crispen automation","Vertigo X-Play"];
categories["Log issue"] = ["Log/Playlist mismatch","Log timing light","Log timing heavy","Incorrect duration","Wrong start time","Events deleted"];
categories["Operator error"] = ["Operator Name1","Operator Name2","Operator name3"];
categories["Media issue"] = ["Damaged tape","Missing media","Dublist not received","Bad media file","Snipe Issue","Bug Issue","Missing audio","Audio out of sync","Audio clipping/distorted","Audio level too low","Embedded credits"];
categories["Satellite issue"] = ["Black on air", "Signal outage", "Sun outage", "Closed captions","Audio issue","Transmitter related"];
categories["Program issue"] = ["Program light","Program heavy","Incorrect program","Incorrect material ID","Program replaced","Incorrect segment lengths","Embedded credits"];
categories["Playlist issue"] = ["Playlist light","Playlist heavy", "Incorrect playlist loaded", "Wrong playback source"];
categories["Promo issue"] = ["Incorrect material ID","Incorrect duration","Incorrect snipe","Incorrect snipe duration","Promo replaced"];

var nLists = 2; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['frmOnAirActivity']['List'+i].length = 1;
document.forms['frmOnAirActivity']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function init() {
fillSelect('startList',document.forms['frmOnAirActivity']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Air Activity Form</title>

<style type="text/css">
body,td,th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #052F47;
}
body {
background-color: #8E8E8E;
background-image: url();
background-repeat: no-repeat;
}
#form {
behavior: url(PIE.htc);
font-family: Verdana, Geneva, sans-serif;
background-repeat: repeat;
font-size: 14px;
padding: 10px;
width: 660px;
border-radius: 0px 0px 20px 20px;
box-shadow: #666 10px 10px 10px;
border-top-style: none;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: none;
background-color: #589DC6;
float: right;
}
#wrapper {
margin: auto;
width: 860px;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="css/Calendar.css" rel="stylesheet" type="text/css" />
</head>

<body>
<script type="text/javascript">
// show and hide sections of a form
function preparePage() {
document.getElementById("List1").onclick = function() {
if (document.getElementById("List1").value=="Equipment issue") {
// use CSS style to show it
document.getElementById("Equipment").style.display = "block";
document.getElementById("Satellites").style.display = "none";
} else if (document.getElementById("List1").value=="Satellite issue") {
// use CSS style to show it
document.getElementById("Satellites").style.display = "block";
document.getElementById("Equipment").style.display = "none";
} else {
// hide the div
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
};
// now hide it on the initial page load.
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}

window.onload = function() {
preparePage();
};
</script>
<div id="wrapper"> <img src="Graphics/banner.png" alt="Banner" width="860" height="84" />
<div id="form">
<form id="frmOnAirActivity" name="frmOnAirActivity" method="post" action="">
<span id="spryAirdate">
<label for="Airdate">Airdate</label><br/>
<input type="Text" id="Airdate" tabindex="1" />
<img src="graphics/cal.gif" onclick="javascript:showCalendar('Airdate')" style="cursor:pointer" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<span id="spryDiscrepType">
<label for="List1">Event Category</label><br />
<select name="List1" id="List1" tabindex="2" onchange="fillSelect(this.value,this.form['List2'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</p>
<span id="spryDiscrepSubType">
<label for="List2">Detail</label><br />
<select name="List2" id="List2" tabindex="3" onchange="fillSelect(this.value,this.form['List3'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<div id="Equipment">
<span id="spryEquipLoc">
<label for="EquipLoc">Equipment Location</label><br/>
<select name="EquipLoc" id="EquipLoc" tabindex="4">
<option selected></option>
<option>Master Control</option>
<option>Media Services</option>
<option>Central Tape</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<span id="spryEquipID">
<label for="EquipID">Equipment ID</label><br />
<input type="text" name="EquipID" id="EquipID" tabindex="5" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
</div>
<p>
<div id="Satellites">
<fieldset><legend>Affected Satellites:</legend>
<table width="424">
<tr>
<td width="152"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_12" />
NET Sat1</label></td>
<td width="119"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_16" />
Net Sat2</label></td>
<td width="137"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_20" />
Net Sat3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_13" />
Net Sat4</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_17" />
Net Sat5</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_21" />
Net Sat6</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_14" />
Net Sat7</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_18" />
Net Sat8</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_22" />
Net Sat9</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_15" />
Net Sat10</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_19" />
Net Sat11</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_23" />
Net Sat12</label></td>
</tr>
</table>
</fieldset>
</div>
<fieldset>
<legend>Network:</legend>
<table width="424">
<tr>
<td width="152">
<label>
<input type="checkbox" name="Network_1" value="checkbox" id="Network_1" />
Networl_1</label>
</td>
<td width="119">
<label>
<input type="checkbox" name="Network_2" value="checkbox" id="Network_2" />
Network_2</label>
</td>
<td width="137">
<label>
<input type="checkbox" name="Network_3" value="checkbox" id="Network_3" />
Network_3</label>
</td>
</tr>
</table>
</fieldset>
<p>
<label for="OnAirVariance">On Air Variance</label>
<input name="OnAirVariance" type="checkbox" value="" />
<p>
<span id="spryDescription">
<label for="Description">Description</label><br />
<textarea name="Description" id="Description" cols="45" rows="5" tabindex="6"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span>
<p>
<span id="spryResolution">
<label for="Resolution">Action Taken</label><br />
<textarea name="Resolution" id="Resolution" cols="45" rows="5" tabindex="7"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></p>
</form>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryAirdate", "date", {validateOn:["blur"], useCharacterMasking:true, format:"mm/dd/yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryDiscrepType", {validateOn:["blur"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryDiscrepSubType", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spryDescription", {validateOn:["blur"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("spryResolution", {validateOn:["blur"]});
</script>
</body>
</html>

MaDmiX
03-02-2012, 03:59 PM
Fixed this by specifying the item number for each option in my select as follows:


<span id="spryEquipLoc">
<label for="EquipLoc">Equipment Location</label><br/>
<select name="EquipLoc" id="EquipLoc" tabindex="4">
<option selected></option>
<option value="item1">Master Control</option>
<option value="item2">Media Services</option>
<option value="item3">Central Tape</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>

Found the info here:

http://labs.adobe.com/technologies/spry/articles/select_overview/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum