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

x
?
Solved

Reference dynamically created variable using JavaScript from ColdFusion 8 form.

Posted on 2010-08-31
8
Medium Priority
?
458 Views
Last Modified: 2013-12-16
I have a date field broken down into month, day and year fields in a ColdFusion 8 form.  There are 10 rows of month, day and year fields. They are dynamically created when the form is displayed in the browser.  

For example:
Row 1 - Month: dt1val   Day dt2val   Year dt3val
Row 2 - Month: dt1val   Day dt2val   Year dt3val
Row 3 - Month: dt1val   Day dt2val   Year dt3val

A User doesn’t have to enter dates in all 10 rows.

I need to call each month, day and year in each row (if the user has entered a date) using JavaScript to validate the date. I don’t know how to reference the fields using JavaScript. Can someone tell me how to call the fields in row 1 them then the next row and so on until all the rows have been called?

<script language="JavaScript">
function validation()
{
if(document.form_parrepparams. dt1val && document.form_parrepparams. dt2val && document.form_parrepparams. dt3val)
      {
            if(!checkdate())
            {
                  alert("Please enter valid date");
                  document.form_parrepparams. dt1val.focus();
                  return false;
            }
      }
return true;
}
</script>

Coldfusion 8 code:
<cfparam name="fstotalrow" default="10">
<cfset J = #fstotalrow#>
<cfloop index="NewRow" from="1" to="#fstotalrow#">
<cfset J = J - 1>
               
 <cfoutput>
<cfset ffscdcnum = "cdcnumtval"& #NewRow#>
      <cfset dt1val = "fstdt1"& #NewRow# >
      <cfset dt2val = "fstdt2"& #NewRow# >
      <cfset dt3val = "fstdt3"& #NewRow# >
      <tr>      
      <td>
             <input type="text" name="ffscdc_num<cfoutput>#NewRow#</cfoutput>"  onMouseOver="Javascript: window.status = 'Enter the CDC '; " size="6" maxlength="6" class="colinput" style="width:50" onBlur="if(this.value != '' && !checkCDC(this.value)){this.focus(); this.select(); alert('Please enter a CDC.');}"  tabindex="1">
 <td>
               
<input  type="text" name="#dt1val#" onMouseOver="Javascript: window.status =  'Enter the Month MM'; "class="colinput" style="width:20"  maxlength=2 onKeyUp="AutoTab(#dt1val#,#dt2val#)" onBlur="if(this.value != '' && !checkMM(this.value)){this.focus(); this.select(); alert('Please enter Month from 1 to 12');}" tabindex="1">/

<input  type="text" name="#dt2val#" onMouseOver="Javascript: window.status =  'Enter the Warrant Issued Day DD'; " onMouseOut="Javascript:  window.status = '';" class="colinput" style="width:20" maxlength=2  onKeyUp="AutoTab(#dt2val#,#dt3val#)" onBlur="if(this.value != '' && !checkDD(this.value)){this.focus(); this.select(); alert('Please enter a valid Day.');}" tabindex="1">/

<input  type="text" name="#dt3val#" onMouseOver="Javascript: window.status =  'Enter the Warrant Issued Year YYYY'; " onMouseOut="Javascript:  window.status = '';" class="colinput" style="width:30" maxlength=4 onBlur="if(this.value != '' && !checkYY(this.value)){this.focus(); this.select(); alert('Please enter a numeric Year');}" tabindex="1">

</tr></cfoutput>
</cfloop>
<input type="hidden" name="ffstotalrows" value="<cfif isDefined('fstotalrow')><cfoutput>#fstotalrow#</cfoutput></cfif>">
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
  • 4
  • 3
8 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 33569134
0
 

Author Comment

by:fleet
ID: 33569217
Plusone3055,
The link you refered to is not the same question I asked. This person wants to pass a Javascript variable to ColdFusion.  I want to reference a ColdFusion variable that's in a CFlist in Javascript.

0
 
LVL 52

Expert Comment

by:_agx_
ID: 33572627
I notice there's already some validation called onBlur().  Are you trying to replace it and validate all of the fields at once?

BTW: Not to ignore your question, but is there a reason you're using text boxes instead of select lists? Month + Day + Year lists can often provide better a better user experience. Plus they're also easier to validate.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:fleet
ID: 33576964
Yes, I need to replace the onBlur() in the Year field.  I need to use a JavaScript to validate the month, day and year fields.  When the User clicks on the submit button a JavaScript will validate all three fields. My problem is the field names are created dynamically and I don’t know how to have them passed to the JavaScript.

I went with the text boxes because other parts of the application format the date fields this way. I’m adding a new function to an application and I wanted to keep everything consistent.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 1000 total points
ID: 33578139
Okay.  Just use the "ffstotalrows" to determine how many rows there are. Then loop and get the values from each row.  See simplified example below.

>> function checkdate(m, d, y) {

    BTW: that's just a place-holder function in the example below.  Replace it
    with whatever date handling code you want.




<script language="JavaScript">
function validation()
{
   // determine the number of rows
   var totalRows = document.getElementById('ffstotalrows').value;
   for (var row = 1; row <= totalRows; row++) {
      // get the month, day and year values for each row
      var m = document.getElementById('month'+ row);
      var d = document.getElementById('day'+ row);
      var y = document.getElementById('year'+ row);
      // validate the date
      if(!checkdate(m, d, y))
      {
         alert("Please enter valid date");
         // if error, focus on "month" box in this row
         document.getElementById('month'+ row).focus();
         return false;
      }
    }
   return true;
}

// *** REPLACE this with your current logic ....
function checkdate(m, d, y) {

   // do validation. if okay, return true
   // otherwise return false

   return false 
}
</script>

<form>
   <cfoutput>
      <!--- loop and generate Mon-Day-Year fields --->
      <cfloop index="NewRow" from="1" to="#fstotalrow#">
         <input  type="text" id="month#NewRow#" name="fstdt1#NewRow#">/
         <input  type="text" id="day#NewRow#" name="fstdt2#NewRow#">/
         <input  type="text" id="year#NewRow#" name="fstdt3#NewRow#"> <br/>
      </cfloop>

      <!--- store total rows ONCE only --->
       <input type="hidden" id="ffstotalrows" name="ffstotalrows" value="#val(fstotalrow)#">
   </cfoutput>
   
   <!--- just for testing ... --->
   <input type="button" value="Test Validation" onClick="validation()">
</form>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 33578591
Small copy n paste correction.  I left out the 1st line ie CFPARAM

<cfparam name="fstotalrow" default="10">
0
 

Author Closing Comment

by:fleet
ID: 33579222
It works great.  I really appreciate your help.

Thanks
0
 
LVL 52

Expert Comment

by:_agx_
ID: 33579882
You're welcome :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
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…
Suggested Courses

618 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