Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Reference dynamically created variable using JavaScript from ColdFusion 8 form.

Posted on 2010-08-31
8
Medium Priority
?
461 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 53

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
Configuration Guide and Best Practices

Read the guide to learn how to orchestrate Data ONTAP, create application-consistent backups and enable fast recovery from NetApp storage snapshots. Version 9.5 also contains performance and scalability enhancements to meet the needs of the largest enterprise 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 53

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 53

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 53

Expert Comment

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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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 manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
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…
Suggested Courses

579 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