Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 3rd, 2003, 02:53 PM
Registered User
 
Join Date: Sep 2003
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>


 
Old September 4th, 2003, 03:37 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
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
 
Old August 2nd, 2005, 06:02 PM
Registered User
 
Join Date: Aug 2005
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 ?






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





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