Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 3rd, 2003, 02:53 PM
Registered User
 
Join Date: Sep 2003
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Submitting a form after a calendar date selection

I'm using a neat JS calendar I found. I now need to have my form automatically submit everytime the user selects a date. How would I accomplish this? Below is the both the JS and the HTML:

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                DHTML Calendar

        Author : Darren Neimke
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


    // -------------------------------------------
    // Helper classes etc.
    // -------------------------------------------


        // Visibility enum
        var Visibility = new Array()
            Visibility.On = true ;
            Visibility.Off = false ;

        // Browser class
        function Browser()
        {
            if ( parseInt( navigator.appVersion.charAt(0) ) >= 4 )
            // Browser check.
            {
                this.isDOM = document.getElementById ? true : false ;
                this.isNav6 = (navigator.appName == "Netscape") ? true : false ;
                this.isNav4 = (navigator.appName == "Netscape" && !(this.isDOM)) ? true : false ;
                this.isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? true : false ;
            }
        }
        var browser = new Browser();


    // -------------------------------------------
    // Global variables, functions etc.
    // -------------------------------------------


    // The following variables are global,
    // don't edit them

    // reference to instance
    var gCalendar ;

    // constructor

    function gfnCalInitialize()
    {
        new suycCalendar(new Date()) ;
    }

    // Instantiate the calendar
    window.onload = function()
    {
        gfnCalInitialize() ;
    }


    if(browser.isDOM)
    {
        document.writeln('<style>');
        document.writeln('.calWeekday{font: \'normal 8pt Arial\';}') ;
        document.writeln('.calNonCurrentMonth{font: \'normal 8pt Arial\'; color: \'LightGrey\' ;}') ;
        document.writeln('A {color: Blue; text-decoration: None; font: \'normal 8pt Arial\';}') ;
        document.writeln('A:hover {color: Gray; text-decoration: Underline; font: \'normal 8pt Arial\';}') ;
        document.writeln('td.cal{font-family : Arial;font-size : 8pt;background-color : #ffffff;}');

        document.writeln('#calContainer {');
        document.writeln('position : absolute;');


        if(browser.isIE4)
        {
            document.writeln('width : 160px;');
            document.writeln('clip:rect(0px 160px 141px 0px);');
            document.writeln('height : 141px;');
        }
        else
        {
            document.writeln('width : 162px;');
            document.writeln('clip:rect(0px 162px 148px 0px);');
            document.writeln('height : 148px;');
        }

        document.writeln('visibility : hidden;');
        document.writeln('background-color : LightGrey');
        document.writeln('}');
        document.writeln('</style>')
        document.writeln('<DIV Id="calContainer"></DIV>') ;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */




    function suycCalendar()
    {
        gCalendar = this ;
        this.days = new Array('Sunday','Monday','Tuesday','Wednesday','Thu rsday','Friday','Saturday') ;
        this.months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','December') ;
        this.monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31) ;

        // Populate the current Day|Month|Year properties
        var objDate = new Date() ;
        this.currentDay = objDate.getDate() ;
        this.currentMonth = objDate.getMonth() ;
        var curYear = objDate.getYear() ;
        this.currentYear = (curYear < 1000) ? curYear + 1900 : curYear ;

        this.year = this.currentYear ;
        this.month = this.currentMonth ;

        this.isVisible = false ;



        // Pre-build the top shell
        this.calTopOuter = '<center>'
                      + '<form name="frmCalendar">'
                      + '<table bgcolor="#000000" cellpadding="1" cellspacing="0" border="0" width="160px">'
                      + '<tr>'
                      + '<td>'
                      + '<table cellpadding="0" cellspacing="0" border="0">' ;

        // Pre-build the selector bar
        this.calSelectorBarTop = '<tr bgcolor="#000000">'
                         + '<th style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" align="left">'
                         + '<input type="button" name="previousMonth" value=" < " onClick="gCalendar.MonthClick(-1) ;">'
                         + '</th>'
                         + '<th colspan="5" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;">'
                         + '<select name="calSelMonth" onChange="gCalendar.MonthOnChange();">' ;

        this.calSelectorBarBottom = '</th><th style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" align="right">'
                         + '<input type="button" name="nextMonth" value=" > " onClick="gCalendar.MonthClick(1) ;">'
                         + '</th>'
                         + '</tr>' ;


        // Pre-build the day names bar
        this.calDayNameBar = '<tr bgcolor="LightGrey">' ;
            for (var i=0; i < this.days.length; i++)
            {
                this.calDayNameBar += '<th class="calHeading" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;" width="30px">' + this.days[i].substr(0,2) + '</th>' ;
            }
        this.calDayNameBar += '</tr>' ;


        // Pre-build the bottom shell
        this.calBottomOuter = '<tr bgcolor="LightGrey">'
            + '<th colspan="7" style="color: \'#000000\'; font: \'bold 10pt Arial\' ;">'
            + '<a href="javascript: void(0) ;" onClick="gCalendar.MoveToCurrent() ;" class="calFooter">Today</a>'
            + '</th></tr></table></td></tr></table></form></center>' ;



        // Create the canvass that we will be displaying the calendar on
        this.initCanvass() ;
    }


    /*********************************************
        Public methods
    **********************************************/


    /*
        Show is called when a user requests a calendar. The show method
        is passed 4 arguments; the event, the formname, the fieldname
        and and optional dir value of 'right' or left'. The default for the
        fourth argument is 'right'
    */
    suycCalendar.prototype.Show = function(event, formname, fieldname, dir)
    {
        if(this.isVisible == true)
        {
            this.setVisibility(Visibility.Off) ;
            return ;
        }

        this.setVisibility(Visibility.Off) ;

        if (browser.isIE4)
        {
            var event = window.event ;
            //Set the x pos of the calendar object
            if (dir == 'left')
            {
                this.x = event.clientX - 180 ;
            }
            else
            {
                this.x = event.clientX + 22 ;
            }
            //Set the y pos of the calendar object
            this.y = event.clientY - 10 ;
        }
        else if(browser.isNav6)
        {
            if (dir == 'left')
            {
                this.x = event.pageX - 183 ;
            }
            else
            {
                this.x = event.pageX + 10 ;
            }
            this.y = event.pageY - 5 ;
        }
        else if (browser.isNav4)
        {
            if (dir == 'left')
            {
                this.x = event.x - 162 ;
            }
            else
            {
                this.x = event.x + 10 ;
            }
            this.y = event.y - 5 ;
        }

        this.target = document.forms[formname].elements[fieldname] ;
        this.positionCanvass() ;
        this.setVisibility(Visibility.On) ;
        this.writeString(this.buildString()) ;

    }


    /*
        Invoked by the user explicitly closing the calendar
    */
    suycCalendar.prototype.Hide = function()
    {
        this.x = 0 ;
        this.y = 0 ;
        this.setVisibility(Visibility.Off) ;
    }


    /*
        Invoked by the user explicitly clicking a
        day on the calendar face
    */
    suycCalendar.prototype.DayClick = function(day)
    {
        this.target.value = this.formatDate(day) ;
        this.setVisibility(Visibility.Off) ;
    }


    /*
        Invoked by the user explicitly toggling the
        Month by -1 or +1
    */
    suycCalendar.prototype.MonthClick = function(n)
    {
        if((this.month + n) < 0)
        {
            this.month = 11 ;
            -- this.year ;
        }
        else if((this.month + n) >= 12)
        {
            this.month = 0 ;
            ++ this.year ;
        }
        else
        {
            this.month = this.month + n ;
        }

        this.writeString(this.buildString()) ;
    }


    /*
        Invoked by the user explicitly changing the
        text in the year selector
    */
    suycCalendar.prototype.YearOnBlur = function()
    {
        var tmp = browser.isNav6?this.canvass.ownerDocument.forms[0].calTxtYear:this.canvass.document.forms[0].calTxtYear;
        // TO DO: validate tmp.value
        this.year = tmp.value ;
        this.writeString(this.buildString()) ;
    }


    /*
        Invoked by the user explicitly changing the
        month dd selector
    */
    suycCalendar.prototype.MonthOnChange = function()
    {
        this.month = browser.isNav6?this.canvass.ownerDocument.forms[0].calSelMonth.selectedIndex:this.canvass.document.f orms[0].calSelMonth.selectedIndex;
        this.writeString(this.buildString());
    }



    // Moves the Calendar to the current Month/Year
    suycCalendar.prototype.MoveToCurrent = function()
    {
        this.year = this.currentYear ;
        this.month = this.currentMonth ;
        this.writeString(this.buildString()) ;
    }




    /* **********************************************
        Private methods
        **********************************************/


    // Set up the canvass
    // Called on initialization of the Class to create the acutal DIV|LAYER Object
    suycCalendar.prototype.initCanvass = function()
    {
        if (browser.isNav4)
        {
            this.canvass = new Layer(200) ;
        }
        else if (browser.isIE4 || browser.isDOM)
        {
            this.canvass = browser.isDOM ? document.getElementById('calContainer') : document.all.calContainer ;
        }
        this.setVisibility(Visibility.Off) ;
    }




    // overrideable - optional to pass in a Visibility enum
    // signatureA = setVisibility() // defaults to opposite of current values
    // signatureB = setVisibility(Visibility.[On|Off])
    suycCalendar.prototype.setVisibility = function()
    {
        if(browser.isNav4)
        {
            if (this.setVisibility.arguments.length == 0)
            {
                this.canvass.visibility = this.isVisible ? 'show' : 'hide' ;
                this.isVisible = !(this.isVisible)
            }
            else
            {
                this.canvass.visibility = this.setVisibility.arguments[0] ? 'show' : 'hide' ;
                this.isVisible = this.setVisibility.arguments[0] ;
            }
        }
        else if (browser.isIE4 || browser.isDOM)
        {
            if (this.setVisibility.arguments.length == 0)
            {
                this.canvass.style.visibility = this.isVisible ? 'visible' : 'hidden' ;
                this.isVisible = !(this.isVisible)
            }
            else
            {
                this.canvass.style.visibility = this.setVisibility.arguments[0] ? 'visible' : 'hidden' ;
                this.isVisible = this.setVisibility.arguments[0] ;
            }
        }
    } // setVisibility



    // apply Positioning
    suycCalendar.prototype.positionCanvass = function()
    {
        if ( browser.isNav4 )
        {
            this.canvass.left = this.x ;
            this.canvass.top = this.y ;
        }
        else if ( browser.isIE4 || browser.isDOM )
        {
            this.canvass.style.left = this.x ;
            this.canvass.style.top = this.y ;
        }
    } // positionCanvass



    // builds/accumulates the string
    suycCalendar.prototype.buildString = function()
    {

        // Get the first and last Day numbers of the month being fetched
        var objDate = new Date( this.year, this.month, 1 ) ;
        var firstDayOfMonth = objDate.getDay() ;
        var lastDayOfMonth = this.daysInMonth() ;
        objDate = null ;
        var i = 0 ;
        var numCols = 0 ;
        var numRows = 0 ;
        var currentDay = 0 ;
        var endPadding = '&nbsp;&nbsp;' ;


        // Work out what month last month was
        var pM = 0 ;
        var pY = 0 ;
        if((this.month - 1) < 0)
        {
            pM = 11 ;
            pY = this.year - 1 ;
        }
        else
        {
            pM = this.month-1 ;
            pY = this.year ;
        }
        var daysInPreviousMonth = this.daysInMonth(pY, pM) ;
        var startOfPreviousMonth = daysInPreviousMonth - (firstDayOfMonth-1)



        // Start building the calendar body
        var tmpString = this.calTopOuter
                + this.calSelectorBarTop ;

                for (var i=0; i < this.months.length; i++)
                {
                    tmpString += '<option value="' + i + '"' ;
                    if (i == this.month) tmpString += ' selected' ;
                    tmpString += '>' + this.months[i].substr(0,3) + '</option>' ;
                }

         tmpString += '</select>&nbsp;&nbsp;<input type="text" name="calTxtYear" value="' + this.year + '" size="4" maxlength="4" onBlur="gCalendar.YearOnBlur();">'
                + this.calSelectorBarBottom
                + this.calDayNameBar ;

        // Body of calendar goes here

        tmpString += '<TR>' ;
        for(i = 0; i < firstDayOfMonth; i++)
        {
            tmpString += '<td align="center" class="cal" bgcolor="#ffffff">' + startOfPreviousMonth++ + '</td>' ;
            numCols++ ;
        }

        for(i = 1; i <= lastDayOfMonth; i++)
        {
            // Call the method to create the cell contents
            if(this.isToday(i,this.month,this.year))
            {
                tmpString += '<td align="center" class="calToday" bgcolor="#ffffff" style="background-color: gold"><a href="javascript: void(0) ;" onClick="gCalendar.DayClick(' + i + ') ;" class="calWeekday">&nbsp;&nbsp;' + i + '&nbsp;</a></td>' ;
            }
            else
            {
                tmpString += '<td align="center" class="cal" bgcolor="#ffffff"><a href="javascript: void(0) ;" onClick="gCalendar.DayClick(' + i + ') ;" class="calWeekday">&nbsp;&nbsp;' + i + '&nbsp;</a></td>' ;
            }

            numCols++ ;

            /* Display new row after each 7 day block. */
            if (numCols % 7 == 0)
            {
                tmpString += '</TR><TR>' ;
                numRows++ ;
            }
        }

        var counterCols = numCols ;
        var j = 1 ;
        for(i = counterCols; i < 42; i++)
        {
            // Call the method to create the cell contents
            tmpString += '<td align="center" class="cal" bgcolor="#ffffff">' + j++ + '</td>' ;
            numCols++ ;

            /* Display new row after each 7 day block. */
            if (numCols % 7 == 0)
            {
                tmpString += '</TR>' ;
                if(i < 42) tmpString += '<TR>' ;
            }
        }

        // End of BODY

        tmpString += this.calBottomOuter ;

        return tmpString ;
    } // buildString



    // renders string to canvass
    suycCalendar.prototype.writeString = function(s)
    {
        if(browser.isNav4)
        {
            this.canvass.document.open() ;
            this.canvass.document.writeln(s) ;
            this.canvass.document.close() ;
        }
        else if (browser.isIE4 || browser.isDOM)
        {
            this.canvass.innerHTML = s ;
        }
    } // writeString


    suycCalendar.prototype.formatDate = function(n)
    {
        return '' + n + '-' + this.months[this.month].substr(0,3) + '-' + this.year ;
    }



    // sets the chosen value in the target element
    suycCalendar.prototype.setValue = function()
    {
        try
        {
            targetEnabled = this.target.disabled ;
            this.target.disabled = false ;
            this.target.value = this.getFormattedDate() ;
            this.target.disabled = targetEnabled ;
        }
        catch(e)
        {
            var message ;
            message = '-----------------\n'
                + '\t Calendar error! \n\n'
                + 'An error has occurred.\n'
                + 'The chosen value cannot be \n'
                + 'written to the target field.\n'
                + '-----------------' ;
            alert(message) ;
        }
    } // setValue



    // overrideable - optional to pass in yy/dd
    // signatureA = daysInMonth() // defaults to this.year, this.month
    // signatureB = daysInMonth(y,m)
    suycCalendar.prototype.daysInMonth = function()
    {
        var oride = (this.daysInMonth.arguments.length == 2) ;

        var year = oride ? this.daysInMonth.arguments[0] : this.year ;
        var month = oride ? this.daysInMonth.arguments[1] : this.month ;

        if(month == 1 && this.isLeapYear(year))
            return (29) ;
        else
            return(this.monthDays[month]) ;

    } // daysInMonth


    // used to compare a date to TODAY. Used to color today.
    suycCalendar.prototype.isToday = function(d,m,y)
    {

        var now = new Date() ;
        var today = new Date(now.getYear(),now.getMonth(),now.getDate()) ;
        var date = new Date(y,m,d) ;
        return (date.toString() == today.toString());

    } // isToday



    // helper function
    suycCalendar.prototype.isLeapYear = function()
    {
        if (this.year % 4 == 0 && (this.year % 100 != 0 || this.year % 400 == 0))
            return(true) ; return(false) ;
    } // isLeapYear


    function handleDocumentClick(e)
    {
        if (browser.isIE4) e = window.event;

        if (browser.isNav6)
        {
            var bTest = (e.pageX > parseInt(gCalendar.canvass.style.left) && e.pageX < (parseInt(gCalendar.canvass.style.left) + 162) && e.pageY < (parseInt(gCalendar.canvass.style.top)+163) && e.pageY > parseInt(gCalendar.canvass.style.top));
            if ((e.target.name != 'imgCalendar' && e.target.name != 'calSelMonth') && !(bTest))
            {
                gCalendar.Hide() ;
            }
        }

        if (browser.isIE4)
        {
            // extra test to see if user clicked inside the calendar but not on a valid date, we don't want it to disappear in this case
            var bTest = (e.x > parseInt(gCalendar.canvass.style.left) && e.x < (parseInt(gCalendar.canvass.style.left) + 160) && e.y < (parseInt(gCalendar.canvass.style.top)+141) && e.y > parseInt(gCalendar.canvass.style.top));
            if ((e.srcElement.name != 'imgCalendar' && e.srcElement.name != 'calSelMonth') && !(bTest))
            {
                gCalendar.Hide();
            }
        }

        if (browser.isNav4) gCalendar.Hide();
    }

    window.document.onclick=handleDocumentClick;


</script>

<HTML>
    <HEAD>
        <TITLE>Demo page for the version 3.1 release of the suyc Calendar</TITLE>
        <link rel="stylesheet" type="text/css" href="suycCalendarV3.css">
        <script type="text/javascript" language="JavaScript" src="suycCalendar.js"></script>
    </HEAD>
    <BODY BGCOLOR="white">
        <CENTER>
            <FORM NAME="frmMain">
                <A HREF="javascript: void(0) ;" ONCLICK="gCalendar.Show(event, 'frmMain', 'dtDate1', 'left') ; return false ;" TITLE="Calendar">
                    <img src="calendar.gif" border="0" ALIGN="absMiddle" name="imgCalendar"></A> <INPUT TYPE="text" NAME="dtDate1" DISABLED>
                <BR>
                <BR>
                <BR>
                <BR>
                <BR>
                <BR>
                <INPUT TYPE="text" NAME="dtDate2" DISABLED>&nbsp; <A HREF="javascript: void(0) ;" ONCLICK="gCalendar.Show(event, 'frmMain', 'dtDate2') ; return false ;" TITLE="Calendar">
                    <img src="calendar.gif" border="0" ALIGN="absMiddle" name="imgCalendar"></A>
                <p>
                    <input type="submit" name="cmdSubmit" value="Submit" id="Submit1" onclick="return Submit1_onclick()">
                </p>
            </FORM>
        </CENTER>
    </BODY>
</HTML>


Reply With Quote
  #2 (permalink)  
Old September 4th, 2003, 03:37 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

I can't be bothered to read through that much code this early :).
After you call the function to show the calendar use the form's submit method:
Code:
document.frmMain.submit();
If you have any code to validate attached to the onsubmit method this will NOT be called, you must call it manually.

--

Joe
Reply With Quote
  #3 (permalink)  
Old August 2nd, 2005, 06:02 PM
Registered User
 
Join Date: Aug 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

It doesn't function ! I always receive this error"Microsoft JScript runtime error: 'gCalendar' is undefined" :( Can you help me ?

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
calendar page selection neddyoats Classic ASP Basics 2 March 2nd, 2007 06:52 PM
Submitting multiple selection to mysql DB preston2003 BOOK: Beginning PHP5, Apache, and MySQL Web Development ISBN: 978-0-7645-7966-0 1 May 11th, 2005 11:06 PM
form submitting cro_crx Pro PHP 5 January 25th, 2005 12:19 PM
Form Submitting cro_crx Beginning PHP 3 January 17th, 2005 01:30 PM



All times are GMT -4. The time now is 03:56 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.