Solved

Reference dynamically created variable using JavaScript from ColdFusion 8 form.

Posted on 2010-08-31
8
452 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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 

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 250 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

733 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