Solved

Reference dynamically created variable using JavaScript from ColdFusion 8 form.

Posted on 2010-08-31
8
447 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now