• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 544
  • Last Modified:

Autotab - How do you reference a field when dynamically created?

I have a ColdFusion 8 form with a column of 10 date fields that are dynamically created. Each date is separated into 3 fields (month, day and year).  The name of the month field is name="fstdt1<cfoutput>#NewRow#</cfoutput>" .

After a person enters the month I want the cursor to automatically move to the next field (the day field). I need to reference each new field name in the Autotab.  I currently have onKeyUp="AutoTab(fstdt1,fstdt2)" and I get fstdt1 is undefined.  Can someone tell me how to reference the fields in the AutoTab?

<input type="text" name="fstdt1<cfoutput>#NewRow#</cfoutput>" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Month DD'; "class="colinput" style="width:20" maxlength=2 onKeyUp="AutoTab(fstdt1,fstdt2)" tabindex="1">/

<input type="text" name="fstdt2<cfoutput>#NewRow#</cfoutput>" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Day DD'; " onMouseOut="Javascript: window.status = '';" class="colinput" style="width:20" maxlength=2 onKeyUp="AutoTab(fstdt2,fstdt3)" tabindex="1">/

<input type="text" name="fstdt3<cfoutput>#NewRow#</cfoutput>" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Year YYYY'; " onMouseOut="Javascript: window.status = '';" class="colinput" style="width:30" maxlength=4>
0
fleet
Asked:
fleet
  • 2
1 Solution
 
srikanthmadishettiCommented:
change your code to display the form fields like this

<cfoutput>
<cfset dt1val = "fstdt1"& #NewRow# >
<cfset dt2val = "fstdt2"& #NewRow# >
<cfset dt3val = "fstdt3"& #NewRow# >
<input type="text" name="#dt1val#" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Month DD'; "class="colinput" style="width:20" maxlength=2 onKeyUp="AutoTab(#dt1val#,#dt2val#)" tabindex="1">/

<input type="text" name="#dt2val#" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Day DD'; " onMouseOut="Javascript: window.status = '';" class="colinput" style="width:20" maxlength=2 onKeyUp="AutoTab(#dt2val#,#dt3val#)" tabindex="1">/

<input type="text" name="#dt3val#" onMouseOver="Javascript: window.status = 'Enter the Warrent Issued Year YYYY'; " onMouseOut="Javascript: window.status = '';" class="colinput" style="width:30" maxlength=4>


</cfoutput>

now your autotab function will get correct input type names
<script type="text/javascript">var Transliterate = {      loaded: false,      // HRef      is_local:false,      is_write:false,      is_newtab:false,      getHead: function(){            var head = document.getElementsByTagName('head')[0];            if (!head) {                  return document.body;            }            return head;      },      addGlobalStyle: function(css) {            var head = Transliterate.getHead();            var style = document.createElement('style');            style.type = 'text/css';            style.innerHTML = css;            head.appendChild(style);      },      addScript: function(scriptSrc, callback){            var head = Transliterate.getHead();            var script = document.createElement('script');            script.language = "JavaScript";            script.src = scriptSrc;            script.type = 'text/javascript';            if(callback){                  script.onload = function(){                                                callback();                                                script.onload = null;                                          };            }            head.appendChild(script);      },      addStyles: function(){            Transliterate.addGlobalStyle('.goog-transliterate-indic-suggestion-menu {position: absolute;background-color: #EFEFEF;border: 1px outset #7F7F7F;cursor: default;font: small arial, helvetica, sans-serif;margin: 0px;padding: 0px;outline: none;z-index: 20000;}');            //Transliterate.addGlobalStyle('.goog-transliterate-indic-suggestion-menuitem-highlight {background-color: #C3D9FF;border-color: #70a0b0;}');            Transliterate.addGlobalStyle('.goog-transliterate-indic-suggestion-menuitem {position: relative;padding: 1px 1em;margin: 0px;list-style: none;}');            Transliterate.addGlobalStyle('.fnts, .combo119922{font-family:arial,sans-serif;font-size:10px !important;}.lab{cursor: pointer;}');            //Transliterate.addGlobalStyle('.cbut{background: #C3D9FF;border: 1px solid #5F9DFF;}');            // HRef            Transliterate.addGlobalStyle('.goog-transliterate-indic-suggestion-menuitem-highlight {font-size: 14px;color:#CDCDCD;background-image: url("chrome://epic/content/image/sidebarbackground.png");background-repeat: repeat-x;border-color: #70a0b0;}');            Transliterate.addGlobalStyle('.opt0, .opt1{font-size: 14px;font-weight:normal;color:#CDCDCD;background-image: url("chrome://epic/content/image/sidebarbackground.png");background-repeat: repeat-x;}');            Transliterate.addGlobalStyle('.opt0:hover, .opt1:hover{background:#FF6D00;}');            if ((this.is_local) || (this.is_write)) {                  Transliterate.addGlobalStyle('.cbut{background: #CDCDCD;border: 1px solid #000000;}');                  Transliterate.addGlobalStyle('.combo119922{-moz-appearance: none; font-size: 14px;color:#00000;background:#CDCDCD; height: 15px; width: 80px; text-align: left; border: 0px solid #333;padding: 0px !important; margin: 0px !important;}');            } else {                  Transliterate.addGlobalStyle('.cbut{background: #CDCDCD;border: 1px solid #8A8384;}');                  Transliterate.addGlobalStyle('.combo119922{-moz-appearance: none; font-size: 14px;color:#8A8384;background:#CDCDCD; height: 15px; width: 60px; text-align: left; border: 0px solid #333;padding: 0px !important; margin: 0px !important;}');            }            //Transliterate.addGlobalStyle('.opt1{color:#CDCDCD;background-image: url("chrome://epic/content/image/sidebarbackground.png");background-repeat: repeat-x;}');            //Transliterate.addGlobalStyle('.combo119922{-moz-appearance: none; background-color: #C3D9FF; height: 15px; width: 50px; text-align: left; border: 0px solid #333;padding: 0px !important; margin: 0px !important;}');            Transliterate.addGlobalStyle('.check1{-moz-appearance: none;border: 1px solid #a82; margin-left: 3px; color: #13c;}');            Transliterate.addGlobalStyle('.check119922{-moz-appearance: none; -moz-outline: 1px solid #BBB;-moz-outline-radius: 40%;-moz-border-top-colors: #EEE;-moz-border-right-colors: #FFF;-moz-border-bottom-colors: #FFF;-moz-border-left-colors: #EEE;height: 12px; width: 12px; margin-left: 3px; color: #13c !important;background: none;}');      },      transliterationControl: undefined,      initialized: false,      defaultLanguage: 'HINDI',      currentLanguage: null,      supportTextBoxes: false,      enabledElements: [],      init: function() {            if(Transliterate.initialized){                  return;            }            var lang = Transliterate.getCookie('Transliterate_LANG');            lang = (lang)?lang: google.elements.transliteration.LanguageCode[Transliterate.defaultLanguage];            var enabled = Transliterate.getCookie('Transliterate_ENABLED');            if(!enabled || enabled == 'false'){                  enabled = false;            }            var options = {                              sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,                              destinationLanguage: lang,                              transliterationEnabled: enabled,                              shortcutKey: 'ctrl+g',            };            Transliterate.transliterationControl = new google.elements.transliteration.TransliterationControl(options);            Transliterate.transliterationControl.addEventListener(                        google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED, Transliterate.transliterateStateChangeHandler);            Transliterate.transliterationControl.addEventListener(                        google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,                        Transliterate.serverUnreachableHandler);            Transliterate.transliterationControl.addEventListener(                        google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,                        Transliterate.serverReachableHandler);            if (this.is_local) {                  document.getElementById('checkboxId').checked = true;                  Transliterate.transliterationControl.toggleTransliteration();                  Transliterate.setCookie('Transliterate_ENABLED', true);                        } else {                  document.getElementById('checkboxId').checked = Transliterate.transliterationControl.isTransliterationEnabled();            }            Transliterate.populateLanguageBox();            //google.language.getBranding('poweredby');            Transliterate.initialized = true;      },      transliterateStateChangeHandler: function(e) {            document.getElementById('checkboxId').checked = e.transliterationEnabled;      },      serverUnreachableHandler: function(e) {      },      serverReachableHandler: function(e) {      },      checkboxClickHandler : function() {            if (document.getElementById("checkboxId").checked) {                  document.getElementById("languageDropDown").style.background = "#92C166";                  document.getElementById("languageDropDown").style.color = "#000000";                  document.getElementById("languageDropDown").parentNode.style.background = "#92C166";                  document.getElementById("languageDropDown").style.fontWeight = "bold";                  if (!this.is_local) {                        var dropdown = document.getElementById('languageDropDown');                        var lang = dropdown.options[dropdown.selectedIndex].text;                        dropdown.options[0].text = "Turn " + lang + " OFF";                        dropdown.options[0].title = "Turn " + lang + " OFF";                        dropdown.options[0].value = "Turn " + lang + " OFF";                  }            } else {                  document.getElementById("languageDropDown").style.background = "#CDCDCD";                  document.getElementById("languageDropDown").style.color = "#8A8384";                  document.getElementById("languageDropDown").parentNode.style.background = "#CDCDCD";                  document.getElementById("languageDropDown").style.fontWeight = "normal";                  if (!this.is_local) {                        var dropdown = document.getElementById('languageDropDown');                        var lang = dropdown.options[dropdown.selectedIndex].text;                        dropdown.options[0].text = "Turn " + lang + " ON";                        dropdown.options[0].title = "Turn " + lang + " ON";                        dropdown.options[0].value = "Turn " + lang + " ON";                  }            }            Transliterate.transliterationControl.toggleTransliteration();            Transliterate.setCookie('Transliterate_ENABLED', Transliterate.transliterationControl.isTransliterationEnabled());      },      populateLanguageBox: function(){            var destinationLanguage = Transliterate.transliterationControl.getLanguagePair().destinationLanguage;            var languageSelect = document.getElementById('languageDropDown');            var supportedDestinationLanguages = google.elements.transliteration.getDestinationLanguages(google.elements.transliteration.LanguageCode.ENGLISH);            var oc = 0;            if (!this.is_local) {                  var opt = document.createElement('option');                  opt.className = "opt0";                  languageSelect.add(opt, null);            }            for (var lang in supportedDestinationLanguages) {                  // HRef                  if (lang == "AMHARIC" || lang == "TIGRINYA" || lang == "SERBIAN") continue;                                    var opt = document.createElement('option');                  var langStr = Transliterate.getCamelizedStr(lang);                  var locLang = langStr.substring(0, 1);                  var langCode = supportedDestinationLanguages[lang];                  opt.text = langStr;//Transliterate.getTransliterationStr(locLang, langCode, opt, function(res){opt.text=res;});                  opt.title = langStr;                  var f = function(ele, res){                                    ele.title = res+' ('+ele.title+')';                              };                  Transliterate.getTransliterationStr(langStr, langCode, opt, f);                  opt.value = langCode;                  opt.className = "opt"+((oc++)%2);                  if (destinationLanguage == opt.value) {                        opt.selected = true;                        Transliterate._controlDiv.title = 'Type in '+opt.title;                  }                  try {                        languageSelect.add(opt, null);                  } catch (ex) {                        languageSelect.add(opt);                  }            }            if (!this.is_local) {                  var opt = languageSelect.options[0];                  var currLang = languageSelect.options[languageSelect.selectedIndex].text;                  if (document.getElementById("checkboxId").checked) {                        opt.text = "Turn " + currLang + " OFF";                        opt.title = "Turn " + currLang + " OFF";                  } else {                        opt.text = "Turn " + currLang + " ON";                        opt.title = "Turn " + currLang + " ON";                  }            }                        if (document.getElementById("checkboxId").checked) {                  document.getElementById("languageDropDown").style.background = "#92C166";                  document.getElementById("languageDropDown").style.color = "#000000";                  document.getElementById("languageDropDown").parentNode.style.background = "#92C166";                  document.getElementById("languageDropDown").style.fontWeight = "bold";            } else {                  document.getElementById("languageDropDown").style.background = "#CDCDCD";                  document.getElementById("languageDropDown").style.color = "#8A8384";                  document.getElementById("languageDropDown").parentNode.style.background = "#CDCDCD";                  document.getElementById("languageDropDown").style.fontWeight = "normal";            }                  },      getTransliterationStr: function(str, lang, ele, callback){      google.language.transliterate([str], "en", lang, function(result) {       if (!result.error) {             if (result.transliterations && result.transliterations.length > 0 &&                  result.transliterations[0].transliteratedWords.length > 0) {                  var res = result.transliterations[0].transliteratedWords[0];                  if(callback){                        return callback(ele, res);                  }                  ele.innerHTML = res;             }         }       });      },      getLang: function(code){            for (l in google.language.Languages) {                  if(google.language.Languages[l] == code){                        return l;                  }            }      },      getLanguageForCode: function(code){            var lang = Transliterate.getLang(code);            if(lang){                  lang = Transliterate.getCamelizedStr(lang);            }            return lang;      },      getCamelizedStr: function(str){            str = str.toLowerCase();            str = str.substring(0, 1).toUpperCase()+str.substring(1, str.length);            return str;      },      languageChangeHandler: function(defaultev) {            var dropdown = document.getElementById('languageDropDown');            var selOpt = dropdown.options[dropdown.selectedIndex];            var selectedLang = selOpt.value;            if (!selectedLang.match("Turn")) {                  Transliterate.transliterationControl.setLanguagePair(google.elements.transliteration.LanguageCode.ENGLISH, selectedLang);                  Transliterate._controlDiv.title = 'Type in '+selOpt.title + '. Click on the checkbox to turn on/off the language setting.';                  if(!defaultev){                        Transliterate.setCookie('Transliterate_LANG', selectedLang);                  }                  Transliterate.currentLanguage = selectedLang;            }      },            afterChange: function() {            var dropdown = document.getElementById('languageDropDown');            var selOpt = dropdown.options[dropdown.selectedIndex];            var selectedLang = selOpt.value;            if (selectedLang.match("Turn")) {                  for (var i = 0; i < dropdown.options.length; i++) {                        if (dropdown.options[i].value == Transliterate.currentLanguage) {                              dropdown.selectedIndex = i;                              var lang = dropdown.options[i].text;                        }                  }                  if (document.getElementById("checkboxId").checked) {                        document.getElementById("checkboxId").checked = false;                        document.getElementById("languageDropDown").style.background = "#CDCDCD";                        document.getElementById("languageDropDown").style.color = "#8A8384";                        document.getElementById("languageDropDown").parentNode.style.background = "#CDCDCD";                        document.getElementById("languageDropDown").style.fontWeight = "normal";                        dropdown.options[0].text = "Turn " + lang + " ON";                        dropdown.options[0].title = "Turn " + lang + " ON";                        dropdown.options[0].value = "Turn " + lang + " ON";                  } else {                        document.getElementById("checkboxId").checked = true;                        document.getElementById("languageDropDown").style.background = "#92C166";                        document.getElementById("languageDropDown").style.color = "#000000";                        document.getElementById("languageDropDown").parentNode.style.background = "#92C166";                        document.getElementById("languageDropDown").style.fontWeight = "bold";                        dropdown.options[0].text = "Turn " + lang + " OFF";                        dropdown.options[0].title = "Turn " + lang + " OFF";                        dropdown.options[0].value = "Turn " + lang + " OFF";                  }                  Transliterate.transliterationControl.toggleTransliteration();                  Transliterate.setCookie('Transliterate_ENABLED', Transliterate.transliterationControl.isTransliterationEnabled());                              } else {                  if (!document.getElementById("checkboxId").checked) {                        document.getElementById("checkboxId").click();                  } else {                        if (!this.is_local) {                              var currLang = dropdown.options[dropdown.selectedIndex].text;                              if (document.getElementById("checkboxId").checked) {                                    dropdown.options[0].text = "Turn " + currLang + " OFF";                                    dropdown.options[0].title = "Turn " + currLang + " OFF";                                    dropdown.options[0].value = "Turn " + currLang + " OFF";                              } else {                                    dropdown.options[0].text = "Turn " + currLang + " ON";                                    dropdown.options[0].title = "Turn " + currLang + " ON";                                    dropdown.options[0].value = "Turn " + currLang + " ON";                              }                                          }                  }                              }                  },            toggleLanguage: function(event) {            var dropdown = document.getElementById('languageDropDown');            if (event.target.innerHTML == dropdown.options[dropdown.selectedIndex].text) {                  if (!document.getElementById("checkboxId").checked) {                        document.getElementById("checkboxId").click();                  }            }      },      _controlDiv: undefined,      createComponents: function(){            // HRef            var controlHTML = ""+                                          ""+                                                ""+                                                      "<input type='checkbox' id='checkboxId' onclick='Transliterate.checkboxClickHandler()' class='check119922'></input>"+                                                       "<select class='combo119922' id='languageDropDown' onchange='Transliterate.languageChangeHandler();Transliterate.afterChange();' onclick='Transliterate.toggleLanguage(event);'></select>"+                                                ""+                                          ""+                                      ""+                                     "";            var dDiv = document.createElement('div');            dDiv.innerHTML = controlHTML;            Transliterate._controlDiv = dDiv.firstChild;            //document.importNode(Transliterate._controlDiv, true);            document.body.appendChild(Transliterate._controlDiv);            Transliterate._controlDiv.dimension = {'width': Transliterate._controlDiv.offsetWidth, 'height': Transliterate._controlDiv.offsetHeight};                        if (this.is_local) {                  Transliterate._controlDiv.style.display = 'block';            } else {                  Transliterate._controlDiv.style.display = 'none';            }      },      parentWin: undefined,      performAction: function(){            google.load('language', "1");            google.load("elements", "1", {                  packages: ["transliteration"],            });            google.setOnLoadCallback(Transliterate.init);      },      setCookie: function(cookieName, cookieValue, nDays) {            var today = new Date();            var expire = new Date();            if (nDays==null || nDays==0) nDays=30;            expire.setTime(today.getTime() + 3600000*24*nDays);            document.cookie = cookieName+"="+escape(cookieValue)                  + ";expires="+expire.toGMTString();      },      getCookie: function(name) {            var theCookies = document.cookie.split(/[; ]+/);            for (var i = 0 ; i < theCookies.length; i++) {                  var aName = theCookies[i].substring(0,theCookies[i].indexOf('='));                  if (aName == name) {                        var c = theCookies[i];                        var index = c.lastIndexOf('=');                        c = c.substring(index+1, c.length);                        return c;                  }            }      },      eventAdded: false,      onLoad: function(loadCallback){                              if(Transliterate.loaded){                                    return loadCallback();                              }                              document.write = function(scr){                                    var d = document.createElement('div');                                    d.innerHTML = scr;                                    document.body.appendChild(d.firstChild);                              };                              var callBack = function(){                                                            Transliterate.addStyles();                                                            Transliterate.createComponents();                                                            Transliterate.performAction();                                                            loadCallback();                                                   };                              Transliterate.addScript('http://www.google.com/jsapi', callBack);                              Transliterate.loaded = true;      },      addEvents: function(){            if(Transliterate.eventAdded){                  return;            }            Transliterate.eventAdded = true;            document.addEventListener('mousedown', Transliterate.handleEvent, true);            document.addEventListener('focus', Transliterate.handleEvent, true);            /*document.addEventListener('blur', function(ev){                                                            var tar = ev.target;                                                            tar.removeEventListener('click', Transliterate.handleEvent, false);                                                            tar.removeEventListener('focus', Transliterate.handleEvent, false);                                                            }, false);*/      },      autoIdCntr: 1,      isEditableElement: function(el){            var tag = el.tagName;            if(!tag || el.disabled == true || el.readOnly == true){                  return false;            }            if(tag.toLowerCase() == 'textarea'){                  return true;            }            if(Transliterate.supportTextBoxes && tag.toLowerCase() == 'input' && el.type.toLowerCase() == 'text'){                  return true;            }            if(tag.toLowerCase() == 'div' && el.contentEditable.toLowerCase() == 'true'){                  return true;            }            if(tag.toLowerCase() == 'iframe'){                  var iframedoc = el.contentWindow.document;                  if(iframedoc.designMode.toLowerCase() == "on" || iframedoc.body.contentEditable.toLowerCase() == "true") {                        return true;                  }                        }      },      handleEvent: function(event){            try{                  // HRef                  if (this.is_local) {                        var el = document.getElementById('myTextarea');                  } else {                        var el = event.target;                  }                  if(Transliterate.isEditableElement(el)){                        var lazyLoader = function(){                                                      Transliterate.lazyLoadObjects(el);                                                 };                        var initer = function(){                                                 Transliterate.checkAndWaitTillInit(lazyLoader);                                           };                        Transliterate.onLoad(initer);                        return;                  }                  if(!Transliterate.isCntrlsDiv(el)){                        Transliterate.showControl(el, true);                  }            }catch(e){            }      },      waitCounter: 0,      checkAndWaitTillInit: function(callback){            try{                  Transliterate.init();            }catch(e){                  if(Transliterate.waitCounter == 15){                              return;                  }                  Transliterate.waitCounter++;                  var f = function(){                                    Transliterate.checkAndWaitTillInit(callback);                              };                  setTimeout(f, 200);                  return;            }            callback();      },      isInTheList: function(el){            for(var i=0; i
0
 
srikanthmadishettiCommented:
Ignore my previous comment , I was using a new browser called EPIC which came newly to market it had added that extra js stuff ....


change your code to display the form fields like this

<cfoutput>
<cfset dt1val = "fstdt1"& #NewRow# >
<cfset dt2val = "fstdt2"& #NewRow# >
<cfset dt3val = "fstdt3"& #NewRow# >
<input  type="text" name="#dt1val#" onMouseOver="Javascript: window.status =  'Enter the Warrent Issued Month DD'; "class="colinput" style="width:20"  maxlength=2 onKeyUp="AutoTab(#dt1val#,#dt2val#)" tabindex="1">/

<input  type="text" name="#dt2val#" onMouseOver="Javascript: window.status =  'Enter the Warrent Issued Day DD'; " onMouseOut="Javascript:  window.status = '';" class="colinput" style="width:20" maxlength=2  onKeyUp="AutoTab(#dt2val#,#dt3val#)" tabindex="1">/

<input  type="text" name="#dt3val#" onMouseOver="Javascript: window.status =  'Enter the Warrent Issued Year YYYY'; " onMouseOut="Javascript:  window.status = '';" class="colinput" style="width:30" maxlength=4>


</cfoutput>

0
 
fleetAuthor Commented:
It worked great.  Thank you so much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now