setting onBlur Programmatically

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ThePope78705
    New Member
    • Sep 2007
    • 6
    #1

    setting onBlur Programmatically

    Hi all,
    I have a web form that is generated on the fly. I need to insert some javascript into the form to do validation on the contents of each text box when the text box loses focus. here is what I have

    [CODE=javascript]<SCRIPT language=JavaSc ript>
    <!-- Begin
    function filterNum(obj) {
    re = /^$|!|$|<|>|"|'| %|,|&|%|;/g;
    // remove spcial charcters
    obj.value = obj.value.repla ce(re, "");
    }
    // End -->

    var oldonload = window.onload
    if (typeof window.onload != 'function') {
    window.onload = mtc1006(documen t.ctl01);
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    mtc1006(documen t.ctl01);
    };
    }

    function mtc1006(obj)
    {
    var children = obj.childNodes;
    for (var i=0; i<children.leng th; i++) {
    children[i].onBlur = filterNum(child ren[i]);
    mtc1006(childre n[i]);
    }
    }
    </SCRIPT>
    [/CODE]
    However, this doesn't work. Am I using the wrong syntax when setting the onBlur?
    Last edited by gits; Apr 9 '08, 04:25 PM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      hi ...

      you need to 'closure' the incremented values:

      [CODE=javascript]
      for (var i = 0; i < children.length ; i++) {
      children[i].onBlur = function(node) {
      return filterNum(node) ;
      }(children[i]);

      mtc1006(childre n[i]);
      }
      [/CODE]
      kind regards

        Comment

        • ThePope78705
          New Member
          • Sep 2007
          • 6
          #3
          sorry to be a pest, here is the code i have now:
          Code:
          <SCRIPT language=JavaScript>
<!-- Begin
function filterNum(obj) {
re = /^$|!|$|<|>|"|'|%|,|&|%|;/g;
// remove spcial charcters
obj.value = obj.value.replace(re, "");
}
//  End -->
 
var oldonload = window.onload
if (typeof window.onload != 'function') {
   window.onload = mtc1006(document.ctl01);    
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      mtc1006(document.ctl01);
    };
  }
 
function mtc1006(obj)
{
     var children = obj.childNodes; 
     for (var i=0; i<children.length; i++) {      
              children[i].onBlur = function(node) {
                     return filterNum(node);
               }(children[i]);
 
               mtc1006(children[i]);                   
      }                              
}
</SCRIPT>
          this still does not work. Do I need to change the way filterNum works? should that just take the string value to validate, and handle the setting of the textbox.value in the onBlur function? I'm not sure how I would do that. Any help would be greatly appreciated.

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388
              #4
              do you get any errors?

                Comment

                • ThePope78705
                  New Member
                  • Sep 2007
                  • 6
                  #5
                  When I run it in Firefox it does not generate any errors. However, in IE I get a "not implemented" error for the line :
                  window.onload = mtc1006(documen t.forms['ctl01']);

                  here is the full form I am testing, i added an additional condition to the loop to only adjust the onBlur property for "Input" tags:

                  Code:
                  <HTML><BODY>

<form name="ctl01" method="post" id="ctl01">
<table class="text" border="0" cellpadding="3" cellspacing="1" width="600">
<tbody>
<tr bgcolor="#eeeeee">
<td colspan="2" width="760"><strong><font face="Arial, Helvetica, sans-serif"><span class="style1 star style5">*</span><span class="style5"> </span></font></strong><strong><font face="Arial, Helvetica, sans-serif"><span class="style5"><font size="-2">denotes required field</font></span></font></strong></td></tr>

<tr bgcolor="#dddddd">
<td><strong><font face="Arial, Helvetica, sans-serif">* First Name</font></strong></td>
<td nowrap="nowrap"><font face="Arial, Helvetica, sans-serif"><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="top">
		<td align="left"><input name="FirstName" type="text" id="FirstName" IsRequired="True" style="" /></td>
	</tr>
</table></font></td></tr>
<tr bgcolor="#eeeeee">
<td><strong><font face="Arial, Helvetica, sans-serif"><span class="style5">* Last Name</span></font></strong></td>
<td><font face="Arial, Helvetica, sans-serif"><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="top">

		<td align="left"><input name="LastName" type="text" id="LastName" IsRequired="True" style="" /></td>
	</tr>
</table></font></td></tr>
<tr bgcolor="#dddddd">
<td><strong><font face="Arial, Helvetica, sans-serif"><span class="style1 star style5">Email</span></font></strong></td>
<td><font face="Arial, Helvetica, sans-serif"></font><br><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="top">
		<td align="left"><input name="EmailAddress" type="text" id="EmailAddress" IsRequired="False" style="" /></td>
	</tr>
</table> </td></tr>

<tr bgcolor="#eeeeee">
<td><strong><font face="Arial, Helvetica, sans-serif"><span class="style1 star style5">Company</span></font></strong></td>
<td><font face="Arial, Helvetica, sans-serif"><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="top">
		<td align="left"><input name="Company" type="text" id="Company" IsRequired="False" style="" /></td>
	</tr>
</table></font></td></tr>
<tr bgcolor="#eeeeee">
<td><strong><font face="Arial, Helvetica, sans-serif"><span class="style1 star style5">Phone</span></font></strong></td>
<td><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="top">
		<td align="left"><input name="WorkPhone" type="text" id="WorkPhone" IsRequired="False" style="" /></td>
	</tr>
</table> <br></td></tr>
<tr bgcolor="#eeeeee">
<td><strong><font face="Arial, Helvetica, sans-serif"><span class="style1 star style5">Integer</span></font></strong></td>

<td><table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;">
	<tr valign="middle">
		<td align="right"><span style="">inttest:&nbsp;</span></td><td align="left"><input name="inttest__c" type="text" id="inttest__c" IsRequired="False" /></td>
	</tr>
</table><br></td></tr>
<tr>
<td colspan="2">&nbsp; <input type="submit" name="mtcSubmit" value="Submit" id="mtcSubmit" style="" />&nbsp;  </td></tr>
<tr>
<td colspan="2">&nbsp;</td></tr></tbody></table>
</form>
<script type="text/javascript">

var oldonload = window.onload
if (typeof window.onload != 'function') {
   window.onload = mtc1006(document.forms['ctl01']);    
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      mtc1006(document.forms['ctl01']);
    };
  }
 
function mtc1006(obj)
{
     var children = obj.childNodes; 
     for (var i=0; i<children.length; i++) {      
              if (children[i].tagName == 'INPUT') {                    
                     children[i].onBlur = function(node) {
                           return filterNum(node);
                     }(children[i]);
              }
 
               mtc1006(children[i]);                   
      }                              
}

function filterNum(obj) {
re = /^$|!|$|<|>|"|'|%|,|&|%|;/g;
// remove spcial charcters
obj.value = obj.value.replace(re, "");
}
</script>
</BODY></HTML>

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388
                      #6
                      aaargh ... write the onBlur as onblur please ... is the handler-function called then?

                        Comment

                        • ThePope78705
                          New Member
                          • Sep 2007
                          • 6
                          #7
                          unfortunately not, I also tried children[i].onblur = new function(node)

                          that also did not work. :(

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5388
                              #8
                              damned ... its too late today :) ... the following lines will do the job:

                              [CODE=javascript]children[i].onblur = function(node) {
                              return function() { filterNum(node) ; };
                              }(children[i]);
                              [/CODE]
                              kind regards

                                Comment

                                Previous template Next
                                Working...