XpressUtils - Articles / Forum - Javascript function-pointers in IDM

Let's begin with a few scenarios: 
 <ol> 
 <li>A form contains a text-field which requires a user to enter his/her social security number in the xxx-xx-xxxx format. To make it a user-friendly, we would like to auto-insert the hyphens after the 3rd and 5th digit is entered.</li> 
 <li>A date-picker field in IDM allows a user to either (a) select a date from the calendar, or (b) enter the date in mm/dd/yyyy format. What if the user choses option (b) but enters 'abcd' and submits the form? IDM throws a WavesetException on the page. Can we prevent the user from entering the date in any other format?</li> 
 <li>A form allows a user to input the password for his/her account. We would like to indicate the strength of the password depending on its complexity as and how the user keys in the password. Is this possible?</li> 
 </ol> In all the above situations, the interactivity is on the client-side (does not involve submitting the page and returning from the server). How can we achieve the above then? The answer is -- use javascript. IDM offers 2 javascript events for each field-type (textbox, select, button, etc) viz. onClick() and onChange(). The script for these 2 events can be specified as properties &lt;Property name=... /&gt; for these fields. The onClick() event is triggered in the browser window when a user clicks inside the field using a mouse. Similarly onChange() is triggered when the value of the field changes and the user changes the current-focus to another field. But there are many javascript events other than these two. For example: onKeyUp, onFocus, onBlur, onKeyPress, etc. For situation 1, we might want to use the onKeyPress() or onKeyDown() event to calculate the position of the hyphen. For situation 2, we might want to check the entered value-format once the user &quot;leaves&quot; the field: onBlur(). Situation 3 might even require use of an AJAX-call to determine the strength of a password as defined by a Rule to be called on the server side. What do we do in such cases? The answer is -- Javascript function poitners. This concept is not new, just that it comes in handy in the constrained-environment of IDM. The idea is to define a javascript function and attach an event-trigger &quot;outside&quot; the field (this page provides a quick review of the concept: <a target="_blank" href="http://www.permadi.com/tutorial/jsFunc/index.html">http://www.permadi.com/tutorial/jsFunc/index.html</a>). Here's a quick guide how situation 2 above can be accomplished: &lt;Field name=&quot;dateField&quot;&gt; &nbsp;&nbsp;&nbsp; &lt;Display class=&quot;DatePicker&quot;&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;Property name=&quot;title&quot; value=&quot;Enter Date:&quot;/&gt; &nbsp;&nbsp;&nbsp; &lt;/Display&gt; &lt;/Field&gt; &lt;Field name=&quot;dateField_javascript&quot;&gt; &nbsp;&nbsp;&nbsp; &lt;Display class=&quot;Html&quot;&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;Property name=&quot;html&quot; value=&quot;&lt;script&gt;var dateField_elem = document.getElementsByName(&quot;dateField&quot;)[0]; dateField_elem.onblur = function() { if (dateField_elem.value!='' &amp;&amp; new RegExp('[0-9]+/[0-9]+/[0-9]{4}').test(dateField_elem.value)==false) alert(&quot;Please enter a valid date in mm/dd/yyyy format.&quot;); dateField_elem.value=''; };&lt;/script&gt;&quot;/&gt; &nbsp;&nbsp;&nbsp; &lt;/Display&gt; &lt;/Field&gt; Notice here, that the main field is &quot;dateField&quot;, while a separate field &quot;dateField_javascript&quot; defines an anonymous method and attaches it to the onblur() event of the &quot;dateField&quot; element. The end result is that the user is free to select the date from the calendar popup, or can manually enter the date in the textbox too. If the format is found to be wrong, a popup is displayed and the entered value is nullified. Situation 1 can be handled similarly. For situation 3, in addition to the above, an AJAX call (if required) may be implemented as discussed in this article: <a target="_blank" href="/article-view.html?id=76&amp;article=Ajax-implementation-in-forms">Ajax implementation in forms</a>. Many more javascript events (discussed here: <a target="_blank" href="http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html">http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html</a>) can be leveraged this way to provide a much more enriched user-interface. Hope this helps!

Articles / Forum - Javascript function-pointers in IDM

Feedback / Comments:

Submit a comment: