Solved

Reference dynamically created variable using JavaScript from ColdFusion 8 form.

Posted on 2010-08-31
8
451 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
  • 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 

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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

808 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