Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    201
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Need help with spry validation select menu

    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:


    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>
    Last edited by MaDmiX; 03-01-2012 at 02:53 PM.

  • #2
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    201
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Solved

    Fixed this by specifying the item number for each option in my select as follows:

    Code:
    <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/s...iew/index.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •