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

    Joined:
    Feb 9, 2011
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    0
    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:

    Code:
    <form name="signupform" id="signuptable" action="" method="POST">
                                                  <table cellpadding="0" cellspacing="0" id="formsignup" width="604">
                                                    <tr>
                                                      <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>
                                                                                        </tr>
                                                                                  </table>
                                                                                </div></td>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <td></td>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                    </tr>
                                                    <tr>
                                                      <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>
                                                          <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>
                                                          <select name="bdateyear"  "9"><option value="1900" selected="selected">1900</option></select>
                                                       </span></td>
                                                       <td width="223" id=""></td>
                                                    </tr>
                                                    <tr>
                                                      <td width="160"></td>
                                                      <td class="forinput" colspan="2" ><br />
                                                      <textarea name="toc" wrap="virtual">Terms and conditions here</textarea></td>
                                                    </tr>                                                
                                                    <tr>
                                                      <td colspan="3" align="center" ><br /><input type="submit" name="register" value="REGISTER" style="height:30px; width:150px;" id="button" /></td>
                                                    </tr>
                                                  </table>
                                                </form>    
    Javascript code:

    Code:
    <script>
    
    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('alertmsg').innerHTML=xy.responseText 
            document.getElementById('hintLYR').style.visibility = 'visible'
        }
    }
    
        var xy
    
    function check(obj) {
    var d = obj
    alert(d);
    
    switch(d){
        case 'uname': 
            var c = document.signupform.uname.value 
            break;
        case 'fname': 
            var c = document.signupform.fname.value 
            break;
        case 'lname': 
             var c = document.signupform.lname.value
             break;
        case 'pwd': 
            var c = document.signupform.pwd.value
             break;
        case 'pwd2': 
            var c = document.signupform.pwd2.value
             break;
        case 'email': 
            var c = document.signupform.email.value
            break;
        case 'emailcon': 
            var c = document.signupform.emailcon.value
             break;
    }
    alert(d + c)
    xy = GetXmlHttpObject()
    
        xy = GetXmlHttpObject()
        xy.onreadystatechange=change
        xy.open("GET","check.php?id="+c+"&obj="+d,true)
        xy.send(null)    
    
    }
    var err = '<? echo $error ?>'    
    
    function load() {
    
    if (err != '') {
        document.getElementById('alertmsg').innerHTML = unescape(a_[err])
        document.getElementById('hintLYR').style.visibility = 'invisible'
    }
    
    
    }
    </script>
    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.
    Stringx
     

Share This Page