1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

'onblur' event does not work

Discussion in 'JavaScript and AJAX' started by Stringx, Apr 1, 2011.

  1. Stringx

    Stringx New Member

    Feb 9, 2011
    Likes Received:
    Trophy Points:
    I have these school project, somewhat like a 'signup' page on a typical website. I use external CSS on these code, a simple javascript and PHP file to verify the value of the input on the form. My problem is, the 'onblur' event on each 'input' object does not work on IE, FF, and Chrome.

    Here's the code for form:

    <form name="signupform" id="signuptable" action="" method="POST">
                                                  <table cellpadding="0" cellspacing="0" id="formsignup" width="604">
                                                      <td width="160" class="forlabel"><label for="uname">User ID:</label></td>
                                                      <td width="219" class="forinput"><input type="text" name="uname" id="uname" value="" maxlength="12"onBlur="javascript:check(this.name);" class="styleinput" /><a href="javascript:check('uname');">check</a></td>
                                                      <td width="223" id=""><div id="hintLYR" style="width: 130px; position:relative; visibility:hidden; float:left; top:0; left:0; z-index:1; cursor:hand; background-color:#FFFFCC">
                                                                                    <table width=210 border=0 align="center" cellpadding=0 cellspacing=0 bgcolor="#FFFFCC" id="table34" style="border: 1px solid #CC6600;" nof="hint">
                                                                                        <tr valign=TOP align=LEFT>
                                                                                            <td width=130 valign="middle"><span id="alertmsg"> </span> </td>
                                                      <td class="forlabel"><label for="fname">First name:</label></td>
                                                      <td class="forinput"><input type="text" name="fname" value="" id="fname" maxlength="20" onfocus="this.id='activeinput'" onblur="javascript:check('lname');"  /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td class="forlabel"><label for="lname">Last name:</label></td>
                                                      <td class="forinput"><input type="text" name="lname" id="fname" value="" maxlength="20" onfocus="this.id='activeinput'" onblur="this.id='inactiveinput'"   /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td class="forlabel"><label for="pwd">Password:</label></td>
                                                      <td class="forinput"><input type="password" name="pwd" id="pwd" value="" maxlength="12" onfocus="this.id='activeinput'" onblur="this.id='inactiveinput'"   /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td class="forlabel"><label for="pwdcon">Confirm Password:</label></td>
                                                      <td class="forinput"><input type="password" name="pwd2" id="pwd2" value="" maxlength="12" onfocus="this.id='activeinput'" onblur="this.id='inactiveinput'"   /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td height="32" class="forlabel"><label for="email">Email:</label></td>
                                                      <td class="forinput"><input type="text" name="email" value="" id="email" maxlength="50" onfocus="this.id='activeinput'" onblur="this.id='inactiveinput'" /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td class="forlabel"><label for="emailcon">Retype your Email:</label></td>
                                                      <td class="forinput"><input type="text" name="emailcon" value="" id="emailcon" maxlength="50" onfocus="this.id='activeinput'" onblur="this.id='inactiveinput'"   /></td>
                                                      <td width="223" id=""><span id="error"><?php ?></span></td>
                                                      <td class="forlabel"><label for="bdate">Birth date:</label></td>
                                                      <td class="forinput" valign="bottom"><span id="birdate"><select name="bdateday"  "7">
                                                          <option value="1" selected="selected">01</option>
                                                          <option value="2">02</option>
                                                          <option value="3">03</option>
                                                          <option value="4">04</option>
                                                          <option value="5">05</option>
                                                          <option value="6">06</option>
                                                          <option value="7">07</option>
                                                          <option value="8">08</option>
                                                          <option value="9">09</option>
                                                          <option value="10">10</option>
                                                          <option value="11">11</option>
                                                          <option value="12">12</option>
                                                          <option value="13">13</option>
                                                          <option value="14">14</option>
                                                          <option value="15">15</option>
                                                          <option value="15">15</option>
                                                          <option value="16">16</option>
                                                          <option value="17">17</option>
                                                          <option value="18">18</option>
                                                          <option value="19">19</option>
                                                          <option value="20">20</option>
                                                          <option value="21">21</option>
                                                          <option value="22">22</option>
                                                          <option value="23">23</option>
                                                          <option value="24">24</option>
                                                          <option value="25">25</option>
                                                          <option value="26">26</option>
                                                          <option value="27">27</option>
                                                          <option value="28">28</option>
                                                          <option value="29">29</option>
                                                          <option value="30">30</option>
                                                          <option value="31">31</option>
                                                          <select name="bdatemonth"  "8">
                                                            <option value="Jan" selected="selected">Jan</option>
                                                            <option value="Feb">Feb</option>
                                                            <option value="Mar">Mar</option>
                                                            <option value="Apr">Apr</option>
                                                            <option value="May">May</option>
                                                            <option value="Jun">Jun</option>
                                                            <option value="Jul">Jul</option>
                                                            <option value="Aug">Aug</option>
                                                            <option value="Sep">Sep</option>
                                                            <option value="Oct">Oct</option>
                                                            <option value="Nov">Nov</option>
                                                            <option value="Dec">Dec</option>
                                                          <select name="bdateyear"  "9"><option value="1900" selected="selected">1900</option></select>
                                                       <td width="223" id=""></td>
                                                      <td width="160"></td>
                                                      <td class="forinput" colspan="2" ><br />
                                                      <textarea name="toc" wrap="virtual">Terms and conditions here</textarea></td>
                                                      <td colspan="3" align="center" ><br /><input type="submit" name="register" value="REGISTER" style="height:30px; width:150px;" id="button" /></td>
    Javascript code:

    function x() { 
        var b=null
        if (window.XMLHttpRequest) {
            b=new XMLHttpRequest()
        } else if (window.ActiveXObject) {
            b=new ActiveXObject("Microsoft.XMLHTTP")
        return b
    function GetXmlHttpObject() { 
        var objXMLHttp=null
        if (window.XMLHttpRequest) {
            objXMLHttp=new XMLHttpRequest()
        } else if (window.ActiveXObject) {
            objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
        return objXMLHttp
    function change() { 
        if (xy.readyState==4 || xy.readyState=="complete") { 
            document.getElementById('hintLYR').style.visibility = 'visible'
        var xy
    function check(obj) {
    var d = obj
        case 'uname': 
            var c = document.signupform.uname.value 
        case 'fname': 
            var c = document.signupform.fname.value 
        case 'lname': 
             var c = document.signupform.lname.value
        case 'pwd': 
            var c = document.signupform.pwd.value
        case 'pwd2': 
            var c = document.signupform.pwd2.value
        case 'email': 
            var c = document.signupform.email.value
        case 'emailcon': 
            var c = document.signupform.emailcon.value
    alert(d + c)
    xy = GetXmlHttpObject()
        xy = GetXmlHttpObject()
    var err = '<? echo $error ?>'    
    function load() {
    if (err != '') {
        document.getElementById('alertmsg').innerHTML = unescape(a_[err])
        document.getElementById('hintLYR').style.visibility = 'invisible'
    I have another PHP file (check.php) that will run whenever 'onblur' is called.
    The form is not finished yet, but when I try to test it with FF and/or IE the 'onblur' event, especially on id='uname' input doesn't seem to work. What went wrong?

    Thank you.

Share This Page