<div id=msg style="position:absolute; width:300px; height:25px;
z-index:1; left: 400px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>
document.getElementById("msg").innerHTML="Job Completed ...";
document.getElementById("msg").style.background='#f1f1f1';
document.getElementById("msg").style.borderColor='red';
// red = #f00000; green = #00f040; yellow = #f0f000; brick= #f0c000; light yellow = #f0f0c0
document.getElementById("msg").style.display='inline';
document.getElementById("msg").style.display='none';
setTimeout("document.getElementById('f1').style.display='none'",2000)
The above commands are tested in major three browsers ( internet explorer, FireFox, and Chrome)
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged()
{
if(httpxml.readyState==4)
{
var myObject = eval('(' + httpxml.responseText + ')');
//document.getElementById("txtHint").innerHTML=httpxml.responseText;
myForm.reset();
document.getElementById("msg").style.background='#f1f1f1';
document.getElementById("msg").innerHTML=myObject.data[0].msg;
document.getElementById("msg").style.display='inline';
document.getElementById("msg1").style.background='yellow';
document.getElementById("msg1").innerHTML=myObject.data[0].msg1;
document.getElementById("msg1").style.display='inline';
document.getElementById("f1").style.background='#90f040';
document.getElementById("f1").innerHTML="Job Completed ...";
// To hide the display after 2 secs this ( below) line is to be added ///
setTimeout("document.getElementById('f1').style.display='none'",2000)
}
}
function getFormData(myForm) {
var myParameters = new Array();
for (var i=0 ; i < myForm.elements.length; i++) {
var sParam = encodeURIComponent(myForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(myForm.elements[i].value);
myParameters.push(sParam);
}
return myParameters.join("&");
}
var url="msgck.php";
var myForm = document.forms[0];
var parameters=getFormData(myForm);
httpxml.onreadystatechange=stateChanged;
httpxml.open("POST", url, true)
httpxml.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
httpxml.send(parameters)
document.getElementById("f1").innerHTML="Data posted to Server ...............";
}
</script>
</head>
<body>
<div id=msg style="position:absolute; width:300px; height:25px;
z-index:1; left: 400px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>
<div id=msg1 style="position:absolute; width:300px; height:25px;
z-index:1; left: 0px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>
<div id=f1 style="position:absolute; width:400px; height:50px;
z-index:1; left: 200px; top: 84px;
background-color: #FFFF00; border: 1px none #000000">
<form name="myForm" onsubmit="ajaxFunction(this.form); return false">
userid: <input type=text name=userid onClick=hidemsg();><br>
Password<input type=text name=pw><input type=submit value=Submit>
</form>
</div>
</body>
</html>
Here is the code for msgck.php page
<?
$userid=$_POST['userid'];
$pw=$_POST['pw'];
/// Data formating from here /////
$str= "{ "data" : [";
$msg="Data Received"; /// First message to return //
$msg1="Data Processing done"; // Second message to return ///
$str=$str."{"msg" : "$msg","msg1" : "$msg1"}";
$str=$str. "]}";
sleep(5);
echo $str;
?>
Mohit Aray | 29-10-2014 |
sir i need ur help m developing fee management system and i want to display a notification for those students whose fee is due or whose allow time is complited can u help me |
karthik | 15-09-2015 |
sir i need ur help m developing fee management system and i want to display a notification for those students whose fee is due or whose allow time is complited can u help me |
smo1234 | 15-09-2015 |
Do you have skill of developing scripts using PHP & MySQL ? |