autofill a variable value 2

Extras · Oct 20, 2003

Hello I am using coldfusion to create a field that will allow one to pick a date from a calendar.

However, on this form, I am going to have fields for two dates, so, it would be nice if, after a person entered a value for one field, automatically this value got entered into another field..

This is what the test page looks like...

http://www.northwestcollege.edu/test/index.cfm

I was wondering if I could use javascript somehow to insert a value into the Date field 2 that matched the value selected in Date 1?

I am attaching the code that is one the page...the initial value portion of Date 2:
initialvalue="#DateFormat(now(),"mm/dd/yy&quot

#"
is what I need to populate based on the selection from Date 1

I guess the answer that I am looking for is how can I insert a variable whose value is dependent on what is picked in Date1 into the value for Date 2...

I look forward to your insight! I am enclosing the code for the test page below..

<head>
<title>Adding A Calendar Event</title>
<link href="../Includes/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<table>
<tr>
<td width="150">
<form action="test.cfm" name="frm1" id="frm1">

<div align="center">Date 1</div>
<br>
<cf_datepicker textboxname="txtcolor1"
formname="frm1"
image="Images/PickDate.gif"
font="arial"
fontcolor="gray"
dayheadercolor="990000"
monthcolor="EAC6BF"
othermonthscolor="white"
backcolor="EFEFEF"
first_use_on_page="yes"
dateorder="mm/dd/yy"
language="english"
hidedivname="div1"
displayorientation="right">

</td>
<td width="150">
<div align="center">Date 2</div>
<br>
<cf_datepicker textboxname="txtcolor2"
formname="frm1"
image="Images/PickDate.gif"
font="arial"
fontcolor="gray"
dayheadercolor="990000"
monthcolor="EAC6BF"
othermonthscolor="white"
backcolor="EFEFEF"
dateorder="mm/dd/yy"
initialvalue="#DateFormat(now(),"mm/dd/yy&quot

#"
language="english"
hidedivname="div1"
displayorientation="right">

</td>
</tr>
<tr>
<td colspan="2">
<div id="div1" style="position: relative; top: 0px; left: 0px; visibility: show;">
test
</div>
</td>
</tr>
</form>

</table>

SnaveBelac · Oct 21, 2003

I would use a javascript 'onChange' event handler to modify the contents of the date in text field 2. A function like this should work ::

function copyDate() {
var curDate = document.forms['formName'].elements['textBoxName'].value;
document.forms['formName'].elements['textBoxName'].value = curDate;
return true;
}

Get the function to fire within the text boxes onChange event handler ::

<input name="textBoxName" onChange="copyDate()">

Hope what you were asking was this simple. I am not too familiar with Coldfusion so this may not fit in with what you want.

SnaveBelac - Adventurer

Extras · Oct 24, 2003

Thanks for responding. I will give that a whirl and send a response.

I actually ended up using another script...

http://www.dynamicdrive.com/dynamicindex6/popcalendar.htm

But still need the autofill function...

Thanks again!

Lrnmore · Oct 24, 2003

Look for this section of code:
(dynamicdrive script)

Code:

function selectDate(param) {
 var arr   = param.split(&quot;|&quot;);
 var year  = arr[0];
 var month = arr[1];
 var date  = arr[2];
 var ptr = parseInt(date);
 ppcPtr.setDate(ptr);
 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {
ppcSV.value = dateFormat(year,month,date);hideCalendar();

urotherfield.value = ppcSV.value;} //*** add this ****

Code:

  else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}}
 else {
  showError(ppcER[1]);
  hideCalendar();}}

2b||!2b

Extras · Oct 24, 2003

Hello I tried that..inserting..

urotherfield.value = ppcSV.value;}

into the form.. but now I get a syntax error alert .

Any idea what could be the problem with that..

http://www.northwestcollege.edu/test/popup.cfm

Extras · Oct 24, 2003

I went back to the previous version of the javascript and tried using the copyDate option and that also did not work..

no error this time - just did not fill the value..

Lrnmore · Oct 24, 2003

OH NOOOOO!!!

You did it just like I toll ya..

I was expecting that you would make subs like:

ummm let's say your second form field value
you want filled is

Code:

<input type=&quot;text&quot; name=&quot;dt2&quot;>

then the line you would add would be:

Code:

 document.formname.dt2.value = ppcSV.value;}

and be sure not to add a "}" you just want to
move the existing one...

2b||!2b

SnaveBelac · Oct 24, 2003

When I used the copyDate code on a page I had setup with two text boxes it worked fine.

Am I right in thinking that you just want to copy the contents of one form field to another form field?

This function does work it may just need to be implemetned slightly differently in line with your calendar code.

-----------------------
SnaveBelac - Adventurer
-----------------------

Lrnmore · Oct 24, 2003

Be sure to substitute your real form name for

document.formname.dt2.value

Let us know if you don't get this worked out or
if you don't have a handle on the form stuff.

2b||!2b

Extras · Oct 24, 2003

Thanks for all your input - am headed off to a meeting - will promise to respond after i return and test it out!

SnaveBelac · Oct 24, 2003

You function and code should look like this - I had a look at the source code through your link and got the names for your form and text fields...

function copyDate() {
var curDate = document.forms['EventAdd'].elements['CalEvent_StartDate'].value;
document.forms['EventAdd'].elements['CalEvent_EndDate'].value = curDate;
return true;
}

<input type="text" name="CalEvent_StartDate" class="textfieldReq" onChange="copyDate()">

This should have the desired effect. remeber that Javascript is case sensitive and make sure that all you variable names are correct...

-----------------------
SnaveBelac - Adventurer
-----------------------

Lrnmore · Oct 24, 2003

SnaveBelac,

Will onChange work when the change is made by a script??
I also tried onChange before I started messing with the
calendar script???

Extras,
Went to the site and for some reason it won't except
the usage of "= ppcSV.value" so try these new lines..

Code:

 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();
  document.EventAdd.CalEvent_EndDate.value = dateFormat(year,month,date);}

2b||!2b

Lrnmore · Oct 24, 2003

Extras,

You will also want to include a nested "if"
without it the script will change the end
date everytime someone changes the start date,

With these lines if there is a value in the end
date no change is made.

Code:

 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();
         if(document.EventAdd.CalEvent_EndDate.value.length == 0) {
  document.EventAdd.CalEvent_EndDate.value = dateFormat(year,month,date);}}

2b||!2b

SnaveBelac · Oct 25, 2003

Extras,

This code should now cause the StartDate value to be entered into the EndDate field. Change you pupdate.js script file as follows - IT WILL ONLY WORK FOR THIS PAGE AND THESE TWO FIELDS...

function selectDate(param) {
var arr = param.split("|"
var year = arr[0];
var month = arr[1];
var date = arr[2];
var ptr = parseInt(date);
ppcPtr.setDate(ptr);
if ((ppcSV != null)&&(ppcSV)) {
if (validDate(date)) {
ppcSV.value = dateFormat(year,month,date);
document.EventAdd.CalEvent_EndDate.value = dateFormat(year,month,date);
hideCalendar();
}
else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}}
else {
showError(ppcER[1]);
hideCalendar();}}

Lrnmore,

I did not realise that the onChange event does not fire when the contents are modified through a script. Thanks.

Do you have any idea how to cause an event to fire through a script. Can you force an onChange event with a javascript function of any kind??

-----------------------
SnaveBelac - Adventurer
-----------------------

SnaveBelac · Oct 25, 2003

Sorry. I have just re-read this thread and noticed that The post before my last one is basically the same as mine.

Take Lrnmore's advice and add the nested if statement.

-----------------------
SnaveBelac - Adventurer
-----------------------

Extras · Oct 28, 2003

Sorry for the delay in getting back...I could not revisit this project until today..

This is just awesome! It works like a charm!

Really-Really appreciate your sticking with a novice through this!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

autofill a variable value 2

Extras

Technical User

SnaveBelac

Programmer

Extras

Technical User

Lrnmore

Technical User

Extras

Technical User

Extras

Technical User

Lrnmore

Technical User

SnaveBelac

Programmer

Lrnmore

Technical User

Extras

Technical User

SnaveBelac

Programmer

Lrnmore

Technical User

Lrnmore

Technical User

SnaveBelac

Programmer

SnaveBelac

Programmer

Extras

Technical User

Similar threads

Part and Inventory Search

Sponsor