You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@cocoon.apache.org by wi...@digitalsteps.com on 2004/10/19 18:41:53 UTC

Problems with submit-on-change for the calendar widget

I'm having problems with getting the calendar widget to submit upon 
selecting a date. I've included the <fi:styling submit-on-change="true" /> 
tag in the form template but this fails to submit the form. I've noticed 
that it does submit if you manually type a date in the input field so I 
guess its a problem with the javascript, any suggestions?

Thanks

Will

Re: Problems with submit-on-change for the calendar widget

Posted by wi...@digitalsteps.com.
Thanks Jan for your suggestion.

However this seems to submit the form when clicking on the calendar icon 
and before having chance to select a date from the calendar widget - I've 
included the html output below.

<input type="text" title="" value="" name="date" id="date" 
onChange="document.forms[0].submit();"><a 
onClick="forms_calendar.select(forms_getForm(this)['date'],'N10032','yyyy-MM-dd');document.forms[0].submit();" 
id="N10032" name="N10032" href="#"><img alt="Calendar" border="0" 
src="common/images/cal.gif"></a>

I feel the problem lies in the fact that the input field's onChange event 
does not get called if it's value is modified via javascript.


Will 






Jan Hoskens <jh...@schaubroeck.be> 
20/10/2004 07:43
Please respond to
users@cocoon.apache.org


To
users@cocoon.apache.org
cc

Subject
Re: Problems with submit-on-change for the calendar widget






will.durrant@digitalsteps.com wrote:

>
> I'm having problems with getting the calendar widget to submit upon 
> selecting a date. I've included the <fi:styling 
> submit-on-change="true" /> tag in the form template but this fails to 
> submit the form. I've noticed that it does submit if you manually type 
> a date in the input field so I guess its a problem with the 
> javascript, any suggestions?
>
> Thanks
>
> Will

You can do a document.myformname.submit() after the calendar javascript.

One way to do this is by altering the calendar styling in 
form-calendar-styling.xsl or take a copy and use a different styling 
type. Then make sure that at the moment the input element is made and 
the onclick is set to open the calendar javascript, set the submit rule 
above, or even better copy the onclick value from fi:styling to the 
onclick in the input element, after the calendar:

    <!-- This datestuff is taken from the original 
forms-calendar-styling.xsl and altered at the onclick attribute-->
        <xsl:template 
match="fi:field[fi:styling/@type='date-setOnClick']">
            <xsl:variable name="id" select="generate-id()"/>
            <xsl:variable name="format">
                <xsl:choose>
                    <xsl:when 
test="fi:datatype[@type='date']/fi:convertor/@pattern">
                        <xsl:value-of 
select="fi:datatype[@type='date']/fi:convertor/@pattern"/>
                    </xsl:when>
                    <xsl:otherwise>yyyy-MM-dd</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            <!-- regular input -->
            <input id="{@id}" name="{@id}" value="{fi:value}" 
title="{normalize-space(fi:hint)}" type="text">
                <xsl:apply-templates select="." mode="styling"/>
            </input>
            <!-- calendar popup, set the onClick stuff after calendar-->
            <a href="#" name="{$id}" id="{$id}" 
onClick="forms_calendar.select(forms_getForm(this)['{@id}'],'{$id}','{$format}');{fi:styling/@onClick}">
                <img src="{$resources-uri}/cal.gif" border="0" 
alt="Calendar"/>
            </a>
            <!-- common stuff -->
            <xsl:apply-templates select="." mode="common"/>
        </xsl:template>

use:
 <fi:styling type="date-setOnClick" onClick="dowathever you like eg 
document.myformname.submit();"/>
and make sure you name your form element

(haven't really tested this submit, but think it should work;-)

Kind Regards,
jan



---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org



Re: Problems with submit-on-change for the calendar widget

Posted by Jan Hoskens <jh...@schaubroeck.be>.
will.durrant@digitalsteps.com wrote:

>
> I'm having problems with getting the calendar widget to submit upon 
> selecting a date. I've included the <fi:styling 
> submit-on-change="true" /> tag in the form template but this fails to 
> submit the form. I've noticed that it does submit if you manually type 
> a date in the input field so I guess its a problem with the 
> javascript, any suggestions?
>
> Thanks
>
> Will

You can do a document.myformname.submit() after the calendar javascript.

One way to do this is by altering the calendar styling in 
form-calendar-styling.xsl or take a copy and use a different styling 
type. Then make sure that at the moment the input element is made and 
the onclick is set to open the calendar javascript, set the submit rule 
above, or even better copy the onclick value from fi:styling to the 
onclick in the input element, after the calendar:

    <!-- This datestuff is taken from the original 
forms-calendar-styling.xsl and altered at the onclick attribute-->
        <xsl:template match="fi:field[fi:styling/@type='date-setOnClick']">
            <xsl:variable name="id" select="generate-id()"/>
            <xsl:variable name="format">
                <xsl:choose>
                    <xsl:when 
test="fi:datatype[@type='date']/fi:convertor/@pattern">
                        <xsl:value-of 
select="fi:datatype[@type='date']/fi:convertor/@pattern"/>
                    </xsl:when>
                    <xsl:otherwise>yyyy-MM-dd</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            <!-- regular input -->
            <input id="{@id}" name="{@id}" value="{fi:value}" 
title="{normalize-space(fi:hint)}" type="text">
                <xsl:apply-templates select="." mode="styling"/>
            </input>
            <!-- calendar popup, set the onClick stuff after calendar-->
            <a href="#" name="{$id}" id="{$id}" 
onClick="forms_calendar.select(forms_getForm(this)['{@id}'],'{$id}','{$format}');{fi:styling/@onClick}">
                <img src="{$resources-uri}/cal.gif" border="0" 
alt="Calendar"/>
            </a>
            <!-- common stuff -->
            <xsl:apply-templates select="." mode="common"/>
        </xsl:template>

use:
 <fi:styling type="date-setOnClick" onClick="dowathever you like eg 
document.myformname.submit();"/>
and make sure you name your form element

(haven't really tested this submit, but think it should work;-)

Kind Regards,
jan



---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org