How to submit form when using javascript calendar popup

Posted on 2007-10-10
Medium Priority
Last Modified: 2013-12-24
I am using coldfusion 7 and javascript
I am trying to submit a form when the javascript popup has closed and the date has been entered into the following input field:

td<cfinput type="Text" name= "InvDateRecd#CurrentRow#" id="InvDateRecd#CurrentRow#" value="#TTPayDate#" size="22"  onchange="this.form.submit"><a href="javascript:NewCal('InvDateRecd#CurrentRow#','ddmmmyyyy',false,24)"><img src="../Images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a

The javascript value 'onchange="this.form.submit' is being ignored whenever a change has been made.

Any help would be appreciated.
Question by:Carid
LVL 14

Expert Comment

by:Jai S
ID: 20054066
specify the following script...intead of jst this.form.submit...

LVL 23

Expert Comment

ID: 20054070
try this:

LVL 33

Expert Comment

ID: 20054075
I don't know if this is your problem, but the correct syntax is:


There is a quote problem, and you left off the parens
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 20054175
I'm sorry I did have onchange="this.form.submit();" in the cfinput field and it does not work if the change is made by selecting the popup calendar.

If I go into the field and manually change the value then the form submits ok??

Does anyone know if I could submit the form once the popup closes. ie maybe somehow including it into the href="javascript:NewCal('InvDateRecd#CurrentRow#','ddmmmyyyy',false,24)"><img src="../Images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a

Sorry about the error
thank you
LVL 14

Expert Comment

by:Jai S
ID: 20054191
you can write in your popup calendar...during ONLOAD

Author Comment

ID: 20054233
I am a real beginner with javascript so you will have to bear with me.

Where would the window.opener.forms[0].submit() go??

I've looked at the code in the javascript function and tried submitting the form from there to no avail.
I've included the javascript function and hopefully someone can help me.

//Javascript name: My Date Time Picker
//Date created: 16-Nov-2003 23:19
//Scripter: TengYong Ng
//Website: http://www.rainforestnet.com
//Copyright (c) 2003 TengYong Ng
//FileName: DateTimePicker.js
//Version: 0.8
//Contact: contact@rainforestnet.com
// Note: Permission given to use this script in ANY kind of applications if
//       header lines are left unchanged.

//Global variables
var winCal;
var dtToday=new Date();
var Cal;
var docCal;
var MonthName=["January", "February", "March", "April", "May", "June","July",
      "August", "September", "October", "November", "December"];
var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];      
var exDateTime;//Existing Date and Time

//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator=" ";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
//end Global variable

function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
      Cal=new Calendar(dtToday);
      if ((pShowTime!=null) && (pShowTime))
            if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
      if (pCtrl!=null)
      if (pFormat!=null)
      if (exDateTime!="")//Parse Date String
            var Sp1;//Index of Date Separator 1
            var Sp2;//Index of Date Separator 2
            var tSp1;//Index of Time Separator 1
            var tSp1;//Index of Time Separator 2
            var strMonth;
            var strDate;
            var strYear;
            var intMonth;
            var YearPattern;
            var strHour;
            var strMinute;
            var strSecond;
            //parse month
            if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
            else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
            if (isNaN(strMonth))
            if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
            //end parse month
            //parse Date
            if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
            //end parse Date
            //parse year
            if (YearPattern.test(strYear))
            //end parse year
            //parse time
            if (Cal.ShowTime==true)

function RenderCal()
      var vCalHeader;
      var vCalData;
      var vCalTime;
      var i;
      var j;
      var SelectStr;
      var vDayCount=0;
      var vFirstDay;

      docCal.writeln("<script>var winMain=window.opener;</script>");
      docCal.writeln("</head><body background='../JS_Calendar_1/"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

      vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";
      //Month Selector
      vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
      vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
      for (i=0;i<12;i++)
            if (i==Cal.Month)
            vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
      //Year selector
      vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n";      
      //Calendar header shows Month and Year
      if (ShowMonthYear)
            vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";
      //Week day header
      vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
      for (i=0;i<7;i++)
            vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
      //Calendar detail
      CalDate=new Date(Cal.Year,Cal.Month);
      for (i=0;i<vFirstDay;i++)
      for (j=1;j<=Cal.GetMonDays();j++)
            var strCell;
            if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
                  strCell=GenCell(j,true,TodayColor);//Highlight today's date
                  if (j==Cal.Date)
                        if (vDayCount%7==0)
                        else if ((vDayCount+6)%7==0)

      //Time picker
      if (Cal.ShowTime)
            var showHour;
            vCalTime="<tr>\n<td colspan='7' align='center'>";
            vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
            vCalTime+=" : ";
            vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
            vCalTime+=" : ";
            vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
            if (TimeMode==12)
                  var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
                  var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";

                  vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
                  vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
                  vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
      //end time picker

function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
      var PValue;
      var PCellStr;
      var vColor;
      var vHLstr1;//HighLight string
      var vHlstr2;
      var vTimeStr;
      if (pValue==null)
      if (pColor!=null)
      if ((pHighLight!=null)&&(pHighLight))
      if (Cal.ShowTime)
            vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
            if (TimeMode==12)
                  vTimeStr+="+' '+winMain.Cal.AMorPM";
      PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
      return PCellStr;

function Calendar(pDate,pCtrl)
      this.Date=pDate.getDate();//selected date
      this.Month=pDate.getMonth();//selected month number
      this.Year=pDate.getFullYear();//selected year in 4 digits
      if (pDate.getMinutes()<10)
      if (pDate.getSeconds()<10)
      if (pDate.getHours()<12)

function GetMonthIndex(shortMonthName)
      for (i=0;i<12;i++)
            if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
            {      return i;}

function IncYear()
{      Cal.Year++;}

function DecYear()
{      Cal.Year--;}
function SwitchMth(intMth)
{      Cal.Month=intMth;}

function SetHour(intHour)
      var MaxHour;
      var MinHour;
      if (TimeMode==24)
      {      MaxHour=23;MinHour=0}
      else if (TimeMode==12)
      {      MaxHour=12;MinHour=1}
            alert("TimeMode can only be 12 or 24");            
      var HourExp=new RegExp("^\\d\\d$");
      if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
            if ((TimeMode==12) && (Cal.AMorPM=="PM"))
                  if (parseInt(intHour,10)==12)
            else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
                  if (intHour==12)
            else if (TimeMode==24)

function SetMinute(intMin)
      var MinExp=new RegExp("^\\d\\d$");
      if (MinExp.test(intMin) && (intMin<60))

function SetSecond(intSec)
      var SecExp=new RegExp("^\\d\\d$");
      if (SecExp.test(intSec) && (intSec<60))

function SetAmPm(pvalue)
      if (pvalue=="PM")
            if (this.Hours==24)
      else if (pvalue=="AM")

function getShowHour()
      var finalHour;
    if (TimeMode==12)
          if (parseInt(this.Hours,10)==0)
            else if (parseInt(this.Hours,10)==12)
            else if (this.Hours>12)
                  if ((this.Hours-12)<10)
                  if (this.Hours<10)
      else if (TimeMode==24)
            if (this.Hours<10)
      return finalHour;      

function GetMonthName(IsLong)
      var Month=MonthName[this.Month];
      if (IsLong)
            return Month;
            return Month.substr(0,3);

function GetMonDays()//Get number of days in a month
      var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (this.IsLeapYear())
      return DaysInMonth[this.Month];      

function IsLeapYear()
      if ((this.Year%4)==0)
            if ((this.Year%100==0) && (this.Year%400)!=0)
                  return false;
                  return true;
            return false;

function FormatDate(pDate)
      if (this.Format.toUpperCase()=="DDMMYYYY")
            return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
      else if (this.Format.toUpperCase()=="DDMMMYYYY")
            return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
      else if (this.Format.toUpperCase()=="MMDDYYYY")
            return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
      else if (this.Format.toUpperCase()=="MMMDDYYYY")
            return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);                  
LVL 14

Expert Comment

by:Jai S
ID: 20054269
in your javascript change this
docCal.writeln("</head><body background='../JS_Calendar_1/"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

docCal.writeln("</head><body onUnload="javascript:window.opener.forms[0].submit();"  background='../JS_Calendar_1/"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

Author Comment

ID: 20054436
I tried changing the docCal.writin function but now the calendar doesn't popup anymore.
I can't see why this should happen. Any ideas
LVL 14

Expert Comment

by:Jai S
ID: 20054443
oops...sorry ...typo again
we should not use double quotes"" ...try this

docCal.writeln("</head><body onUnload='javascript:window.opener.forms[0].submit();'  background='../JS_Calendar_1/"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");


Author Comment

ID: 20054461
The calendar is poping up again but the form is still not submitting.
LVL 14

Accepted Solution

Jai S earned 2000 total points
ID: 20054473
ok...sorry for harressing you...just tried out and here you go

rever thte previous changes that you did(the one said before)
and change this line
      PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";


      PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.forms[0].submit();winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";

Author Comment

ID: 20054517
Yipee!!! this one worked. My form is submitting

Thanks for all the trouble you went to.  

You certainly deserve the 500 pts

Thanks again

cheers Cari
LVL 14

Expert Comment

by:Jai S
ID: 20054563
thnx for the grade !!!! iam reaching to top 1000 !!!! in 50 days !!!!! yeeeehaaaaa...

Expert Comment

ID: 20537046

Im having the same problem but my JS code is different. Can anyone help?
Title: Tigra Calendar
URL: http://www.softcomplex.com/products/tigra_calendar/
Version: 3.2
Date: 10/14/2002 (mm/dd/yyyy)
Note: Permission given to use this script in ANY kind of applications if
   header lines are left unchanged.
Note: Script consists of two files: calendar?.js and calendar.html
<title>Select Date, Please.</title>
      td {font-family: Tahoma, Verdana, sans-serif; font-size: 12px;}
<script language="JavaScript">

// months as they appear in the calendar's title
var ARR_MONTHS = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
// week day titles as they appear on the calendar
var ARR_WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
// day week starts from (normally 0-Su or 1-Mo)
// path to the directory where calendar images are stored. trailing slash req.
var STR_ICONPATH = '/calendar/tigra_calendar/img/';

var re_url = new RegExp('datetime=(\\-?\\d+)');
var dt_current = (re_url.exec(String(window.location))
      ? new Date(new Number(RegExp.$1)) : new Date());
var re_id = new RegExp('id=(\\d+)');
var num_id = (re_id.exec(String(window.location))
      ? new Number(RegExp.$1) : 0);
var obj_caller = (window.opener ? window.opener.calendars[num_id] : null);

if (obj_caller && obj_caller.year_scroll) {
      // get same date in the previous year
      var dt_prev_year = new Date(dt_current);
      dt_prev_year.setFullYear(dt_prev_year.getFullYear() - 1);
      if (dt_prev_year.getDate() != dt_current.getDate())
      // get same date in the next year
      var dt_next_year = new Date(dt_current);
      dt_next_year.setFullYear(dt_next_year.getFullYear() + 1);
      if (dt_next_year.getDate() != dt_current.getDate())

// get same date in the previous month
var dt_prev_month = new Date(dt_current);
dt_prev_month.setMonth(dt_prev_month.getMonth() - 1);
if (dt_prev_month.getDate() != dt_current.getDate())

// get same date in the next month
var dt_next_month = new Date(dt_current);
dt_next_month.setMonth(dt_next_month.getMonth() + 1);
if (dt_next_month.getDate() != dt_current.getDate())

// get first day to display in the grid for current month
var dt_firstday = new Date(dt_current);
dt_firstday.setDate(1 - (7 + dt_firstday.getDay() - NUM_WEEKSTART) % 7);

// function passing selected date to calling window
function set_datetime(n_datetime, b_close) {
      if (!obj_caller) return;

      var dt_datetime = obj_caller.prs_time(
            (document.cal ? document.cal.time.value : ''),
            new Date(n_datetime)

      if (!dt_datetime) return;
      if (b_close) {
            obj_caller.target.value = (document.cal
                  ? obj_caller.gen_tsmp(dt_datetime)
                  : obj_caller.gen_date(dt_datetime)
      else obj_caller.popup(dt_datetime.valueOf());

<body bgcolor="#FFFFFF" marginheight="5" marginwidth="5" topmargin="5" leftmargin="5" rightmargin="5">
<table class="clsOTable" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#4682B4">
<table cellspacing="1" cellpadding="3" border="0" width="100%">
<tr><td colspan="7"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<script language="JavaScript">
'<td>'+(obj_caller&&obj_caller.year_scroll?'<a href="javascript:set_datetime('+dt_prev_year.valueOf()+')"><img src="'+STR_ICONPATH+'prev_year.gif" width="16" height="16" border="0" alt="previous year"></a>&nbsp;':'')+'<a href="javascript:set_datetime('+dt_prev_month.valueOf()+')"><img src="'+STR_ICONPATH+'prev.gif" width="16" height="16" border="0" alt="previous month"></a></td>'+
'<td align="center" width="100%"><font color="#ffffff">'+ARR_MONTHS[dt_current.getMonth()]+' '+dt_current.getFullYear() + '</font></td>'+
'<td><a href="javascript:set_datetime('+dt_next_month.valueOf()+')"><img src="'+STR_ICONPATH+'next.gif" width="16" height="16" border="0" alt="next month"></a>'+(obj_caller && obj_caller.year_scroll?'&nbsp;<a href="javascript:set_datetime('+dt_next_year.valueOf()+')"><img src="'+STR_ICONPATH+'next_year.gif" width="16" height="16" border="0" alt="next year"></a>':'')+'</td>'
<script language="JavaScript">

// print weekdays titles
for (var n=0; n<7; n++)
      document.write('<td bgcolor="#87cefa" align="center"><font color="#ffffff">'+ARR_WEEKDAYS[(NUM_WEEKSTART+n)%7]+'</font></td>');

// print calendar table
var dt_current_day = new Date(dt_firstday);
while (dt_current_day.getMonth() == dt_current.getMonth() ||
      dt_current_day.getMonth() == dt_firstday.getMonth()) {
      // print row heder
      for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
            if (dt_current_day.getDate() == dt_current.getDate() &&
                  dt_current_day.getMonth() == dt_current.getMonth())
                  // print current date
                  document.write('<td bgcolor="#ffb6c1" align="center" width="14%">');
            else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
                  // weekend days
                  document.write('<td bgcolor="#dbeaf5" align="center" width="14%">');
                  // print working days of current month
                  document.write('<td bgcolor="#ffffff" align="center" width="14%">');

            document.write('<a href="javascript:set_datetime('+dt_current_day.valueOf() +', true);">');

            if (dt_current_day.getMonth() == this.dt_current.getMonth())
                  // print days of current month
                  document.write('<font color="#000000">');
                  // print days of other months
                  document.write('<font color="#606060">');
      // print row footer
if (obj_caller && obj_caller.time_comp)
      document.write('<form onsubmit="javascript:set_datetime('+dt_current.valueOf()+', true)" name="cal"><tr><td colspan="7" bgcolor="#87CEFA"><font color="White" face="tahoma, verdana" size="2">Time: <input type="text" name="time" value="'+obj_caller.gen_time(this.dt_current)+'" size="8" maxlength="8"></font></td></tr></form>');

Thank you!

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 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