Question

I am facing a strange problem with JavaScript, I am working on an ajax database. The login form of the Database sends the data to the PHP controller with an ajax request/function. I have an error-displayer invisible div(named errorDiv) on the login page. errorDiv html is:

<div id="errorDiv" style="visibility:hidden; display:none">
...
</div>

When both the username and password fields in the login form are left empty, I need the PHP controller to response, show the login form and run a JavaScript function “DisplayLoginError()” which will make the error div visible and display the error message(please fill both the fields) in the error-div.DisplayLoginError() function’s code is:

function DisplayLoginError()
{
document.getElementById('errorDiv').style.visibility="visible";
document.getElementById('errorDiv').style.display="block";
document.getElementById('errorDiv').innerHTML = "<?php echo $loginerror; ?>";
}

The php controller code is:

if(isset($_REQUEST['login']))
{
if(isset($_REQUEST['username']) && isset($_REQUEST['password']))
    {
    .....Both the fields are filled...
    }
else   /*===Error:Any of the username or password field has  been left empty====*/
    {
    $loginerror='Please fill both the Fields to login.';
    include $_SERVER['DOCUMENT_ROOT'].'\hospital\includes\collegedata\login-form.html.php';
    }
}

Now the problem is that it can’t be done as most javascript events are user-action-triggered. For the time-being I have assigned the form tag a mouseover event which when triggered run the DisplayLoginError function and displays the error in the errorDiv.

<form onmouseover="DisplayLoginError()"> ..... </form>

But its not the proper solution. I need an event which can run this function while loading only the login div not the whole page. I can’t use the onload event here as its an ajax Database where the main page remains still only div’s change. May be the time events can be used for this purpose… I am not sure…May be there is some better solution… How can I do it with ajax?

Answer 1

You can use lost focus event in javascript. I can’t understand your query clearly. So this is just a suggestion.

<div id='errorDiv' >
</div>
Username : <input type="text" name="username" id="uname" onBlur="checkUsername();">
Password : <input type="text" name="password" id="pword" onBlur="checkValues();">

<script type="text/javascript">
function checkValues()
{
    uname = document.getElementById('uname').value;
    pword = document.getElementById('pword').value;
    if(uname=="" || pword=="") {
        document.getElementById('errorDiv').innerHTML="Please fill both the fields";
    }else{
        document.getElementById('errorDiv').innerHTML="";
    }
}
function checkUsername()
{
    uname = document.getElementById('uname').value;
    if(uname==""){
        document.getElementById('errorDiv').innerHTML="Please enter username";
    }else{
        document.getElementById('errorDiv').innerHTML="";
    }
}
</script>