Creative Web Development - CSS, XHTML, Javascript and RTML for Yahoo Store

Adding custom properties in RTML; Adding a JavaScript onsubmit handler to a FORM

Someone on the forums today needed to add a Google Urchin (Analytics) onsubmit handler to their FORM command in RTML. I'm not sure if my answer solved their problem, but it leads to today's post, "Adding custom properties in RTML".

RTML used to be limited, in that whatever the Edit screen showed was what you had. For example, the TABLE operator has width, but not height. FORM only takes an action. And so on...until the latest RTML update. When I was out visiting Yahoo a while back, I was working with their RTML developer and he had this neat "Add" command on his Edit screen, where he could add custom properties with ease to any operator. My jaw dropped...I saw a piece of heaven! I told him how much this would help development and reduce hacks (see below) to the system, and he looked into it...a few weeks later, it was public. I'm just ecstatic about that.

The hack mentioned above went like this: if you had a command, say TABLE-CELL, and you wanted to add a class parameter to the TD tag, you had to trick the string to combine two parameters in one. What used to look like this:

TABLE-CELL align "center"
<td align="center">

now had to look like this

TABLE-CELL align "center\" class=\"someclass"
<td align="center" class="someclass">

The underlined quotes were created with the \" in the string, while the outer two were created by the TABLE-CELL operator.

Well, that's a thing of the past, since you can now add any parameter you want to any RTML command. Here is the example I typed up tonight using the FORM operator and the onsubmit handler.

1. In your RTML, if you go to the ordering template...usually STORENAME-order, however this may be modified.
2. Find the FORM command in RTML, usually it says FORM ORDER id.
3. Click the FORM command in the RTML.
4. Click Edit at the top of the screen.
5. In the bottom box, type onsubmit and click Add (do not press Enter!)
6. On the next page, where it says onsubmit, put this "javascript:__utmLinkPost(this)" (include quotes)
7. Update the screen and give it a test

Original
<form method=post action="...wg-order?yhst-XXXXXXXXXXXXXX+itemid">

Modified
<form method=post action="...?yhst-XXXXXXXXXXXXXX+itemid" onSubmit="javascript:__utmLinkPost(this)">

Also, Pirates still exist. Garrr!

Tags

Internet, Javascript, Yahoo Store, RTML, pirates form, forms, onsubmit, google, urchin, analytics, google analytics, google urchin, operators, hacks

posted by steve at 12:11 PM