Start Building Professional
Web Apps Today

date picker submitting form

Hi

i have a problem with a date picker in a form. When i choose a date form the picker, the form submits. The code can be seen below. If a move the date picker outside the form tags and use a hidden date field in the form the form functions normally.

<script type="text/javascript">

    <%--
            This is here to accommodate IE7, if we attempt to carry out this initialisation as recommeneded
            in the DHTMLX documents then IE falls over in an unrecoverable manor.
            See: http://support.microsoft.com/default.aspx/kb/927917
            Note: This can probably be optimised, but haven't got time now.
        --%>
        window.onload = function () {
                     
var agt = navigator.userAgent.toLowerCase();
var is_IE = (agt.indexOf("msie") != -1);
                     
            //add the start date calendar
            searchDateCal = new dhtmlxCalendarObject('timestampIcon', false, {isMonthEditable: true});
            searchDateCal.loadUserLanguage(LANG);
            searchDateCal.setDateFormat(UK_DATE_FORMAT);
            var dateTo = new Date();
            searchDateCal.setSensitive(VERSION_RELEASE_DATE, dateTo);
            searchDateCal.attachEvent("onClick", selectSearchDate);
                        
            //another ie fix, if we don't set the position to 0,0 then it renders the calendar off the page
            if(is_IE) {
            leftPosition = 0;
            topPosition = 0;
        }//if
        else {
            //calculate the position of the 1st calendar icon, for any browser other than IE
            leftPosition = findPosX(document.getElementById('timestampIcon'));
             topPosition = findPosY(document.getElementById('timestampIcon'));                 
         }//else         
                
            //single call to set the position, no matter what browser
            searchDateCal.setPosition(topPosition, leftPosition, 0);

searchDateCal.draw();

}//window.onload

function selectSearchDate(date) {
     var ukReportTimestamp = searchDateCal.getFormatedDate(UK_DATE_FORMAT, date);
     var usReportTimestamp = convertDateToUSDash(ukReportTimestamp);
     document.getElementById('tempReportTimestamp').value = searchDateCal.getFormatedDate(UK_DATE_FORMAT, date);
     //give the hidden field a US timestamp
     document.getElementById('reportTimestamp').value = usReportTimestamp;
     return true;
}//selectSearchDate

</script>    
    
    <div id="body-content">
        <h1>
            <bean:message bundle="AuditRes" key="audit.form.page.subtitle" />
        </h1>
            
        <html:form action="/PopulateAuditReport.do">

<%-- hidden fields --%>        
            <input type="hidden" name="createdDate" id="reportTimestamp" value="" />
        
            <%-- display any errors that we may have picked up along the way --%>
            <html:errors/>
            
<label for="date-picker">
                    <span class="labeltext">
                        <bean:message bundle="AuditRes" key="select.date.label" />
                    </span>
                    <input type="text" id="tempReportTimestamp" class="css1" readonly="true" />
                    <input type="image" src="styles/dhtmlx/calendar/imgs/calendar.gif" id="timestampIcon" />                                                                   
                </label>
<br />

            <label for="id">
                <span class="labeltext">
                    <bean:message bundle="AuditRes" key="search.by.id.label" />
                </span>
                <html:text property="id" />
            </label>
            <br />
            
            <label for="username">
                <span class="labeltext">
                    <bean:message bundle="AuditRes" key="search.by.username.label" />
                </span>
                <html:text property="username" />
            </label>
            <br />
            
            <label>
                <bean:define id="srchBttnLabel">
                    <bean:message bundle="AuditRes" key="audit.search.bttn.label" />
                </bean:define>            
                <input type="submit" value="${srchBttnLabel}" alt="${srchBttnLabel}"/>
            </label>
            
        </html:form>

Problem not related to the calendar, this is default behavior for <input type="image"... , just replace with text with static img tag and all will work correctly.

if i use the following tag instead: <img id="timestampIcon" src="styles/dhtmlx/calendar/imgs/calendar.gif" alt="calendar icon" />, the calendar is never displayed when clicked. Do i need an onclick event to display and close the calendar?

Please check attached sample, it uses layout which provided in original question and image button replaced with img tag.