Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2010-08-25
3
Medium Priority
?
536 Views
Last Modified: 2013-12-16
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
Comment
Question by:fleet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 33530320
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
 
LVL 13

Accepted Solution

by:
srikanthmadishetti earned 1000 total points
ID: 33530338
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
 

Author Closing Comment

by:fleet
ID: 33531726
It worked great.  Thank you so much.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Geo-targeting is the practice of distributing content based on a person’s location, as best as you can determine it. Let’s look at some ways you could successfully use this tactic. The following tips and case studies could lead to meaningful results.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question