Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   'onblur' event does not work (http://www.go4expert.com/forums/onblur-event-t25395/)

Stringx 1Apr2011 13:59

'onblur' event does not work
 
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


All times are GMT +5.5. The time now is 15:59.