Orbeon Forms community mailing list

Dynamically load JS for xf:input

Classic

List

Threaded

4 messages Options

dsharp

Dynamically load JS for xf:input

Hi,

I am trying to load a JavaScript with an xf:input (see simplified code below) so that when the user inserts their name into the field the JS will capitalize the first letter of the name (to ensure proper ouput) once they leave that field and I can't get it to work.

Is there a way to do this without using a trigger? an onChange for xforms?

Thanks in advance,

Darla

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:xf="http://www.w3.org/2002/xforms"

xmlns:xxf="http://orbeon.org/oxf/xml/xforms"

xmlns:ev="http://www.w3.org/2001/xml-events"

xmlns:xs="http://www.w3.org/2001/XMLSchema">

<head>

<xf:model>

<xf:instance>

<name/>

</source>

</information>

</xf:instance>

</xf:model>

<![CDATA[

function changeCase() {

var control = document.getElementById('name')

var index;

var tmpStr;

var tmpChar;

var preString;

var postString;

var strlen;

tmpStr = name.value.toLowerCase();

strLen = tmpStr.length;

if (strLen > 0) {

for (index = 0; index < strLen; index++) {

if (index == 0) {

tmpChar = tmpStr.substring(0,1).toUpperCase();

postString = tmpStr.substring(1,strLen);

tmpStr = tmpChar + postString;

}

else {

tmpChar = tmpStr.substring(index, index+1);

if (tmpChar == " " && index < (strLen-1)) {

tmpChar = tmpStr.substring(index+1, index+2).toUpperCase();

preString = tmpStr.substring(0, index+1);

postString = tmpStr.substring(index+2,strLen);

tmpStr = preString + tmpChar + postString;

}

name.value = tmpStr;

}

]]>

</script>

</head>

<body>

<xf:input id="name" nodeset="name">

<xf:label>Name: </xf:label>

</xf:input>

</body>

</html>

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

fl.schmitt(ops-users)

Re: Dynamically load JS for xf:input

Darla,

> I am trying to load a JavaScript with an xf:input (see simplified code
> below) so that when the user inserts their name into the field the JS
> will capitalize the first letter of the name (to ensure proper ouput)
> once they leave that field and I can't get it to work.
>
> Is there a way to do this without using a trigger? an onChange for xforms?

you could catch the DOMFocusOut event [1] using a xforms:action or
xxforms:script element.

The wiki has an example using xxforms:script inside a xforms:trigger
[2]. The code shown there should similarly work inside a xforms:input
instead of trigger and listening on ev:event="DOMFocusOut" instead of
DOMActivate.

HTH
florian

[1] http://www.w3.org/TR/2009/REC-xforms-20091020/#evt-DOMFocusOut
[2]
http://wiki.orbeon.com/forms/doc/developer-guide/xforms-javascript-integration#TOC-Getting-and-Setting-Controls-Value-

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

dsharp

Re: Re: Dynamically load JS for xf:input

Hi Florian,

Thanks! [1] should work.

Now my problem is the JavaScript isn't modifying the value of the xf:input.

I know the JavaScript is good but (for a reason unknown to me) it isn't accessing the value of "name".

getElementById should work, right?

Any insight would be immensely appreciated.

Thanks in advance,

Darla

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:xf="http://www.w3.org/2002/xforms"

xmlns:xxf="http://orbeon.org/oxf/xml/xforms"

xmlns:ev="http://www.w3.org/2001/xml-events"

xmlns:xs="http://www.w3.org/2001/XMLSchema">

<head>

<xf:model>

<xf:instance>

<name/>

</source>

</information>

</xf:instance>

</xf:model>

<![CDATA[

function changeCase() {

var name = document.getElementById('name')

var index;

var tmpStr;

var tmpChar;

var preString;

var postString;

var strlen;

tmpStr = name+.value.toLowerCase();

strLen = tmpStr.length;

if (strLen > 0) {

for (index = 0; index < strLen; index++) {

if (index == 0) {

tmpChar = tmpStr.substring(0,1).toUpperCase();

postString = tmpStr.substring(1,strLen);

tmpStr = tmpChar + postString;

}

else {

tmpChar = tmpStr.substring(index, index+1);

if (tmpChar == " " && index < (strLen-1)) {

tmpChar = tmpStr.substring(index+1, index+2).toUpperCase();

preString = tmpStr.substring(0, index+1);

postString = tmpStr.substring(index+2,strLen);

tmpStr = preString + tmpChar + postString;

}

name.value = tmpStr;

}

]]>

</script>

</head>

<body>

<xf:input id="name" nodeset="name">

<xf:label>Name: </xf:label>

<xf:action ev:event="DOMFocusOut">

<xf:load resource="javascript:changeCase()" />

</xf:action>

</xf:input>

</body>

</html>

fl.schmitt(ops-users)

Re: Re: Re: Dynamically load JS for xf:input

Hi Darla,

> Now my problem is the JavaScript isn't modifying the value of the
> xf:input.

> I know the JavaScript is good but (for a reason unknown to me) it
> isn't accessing the value of "name".
> getElementById should work, right?

no, this won't work - sorry, i didn't check the js code before my
first reply. You can't use getElementById because this affects only
the client side, the DOM in the user's brwoser. But the XForms
instance is handled by the server. So you need to use Orbeon's
getValue / setValue functions:

http://wiki.orbeon.com/forms/doc/developer-guide/xforms-javascript-integration#TOC-Getting-and-Setting-Controls-Value-

I didn't check you javascript code in detail, but it should be
sufficient to replace

document.getElementById('name')
with
tmpStr = ORBEON.xforms.Document.getValue('name').toLowerCase();

and

name.value = ...
with
ORBEON.xforms.Document.setValue("name", tmpStr);

HTH
florian

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws