Hey guys,
Thanks for taking the time to read this.
I am trying fetch a php logon form with ajax, I have set up a form with a button to fetch the php logon page and display it in a div. I am able to get the form to work with a standard button however when I change the inpute type to "image" the div does some strange things. Sometimes the logon page apears for 1ms and dissapears and other nothing happens(I am assuming the page still displays however just to fast for me to see it).
I suspected that this may be due to the image on the button taking presidents over the form div so I have given the target div for the logon page a z-index of 200 alas with no change.
DHTML code index.html:
<html>
<head>
<title>Ajax at work</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "image" src="login.gif" value = "Display Message" width="50" height="30"
onclick = "getData('login.php', 'targetDiv')">
</form>
<p>The fetched data will go here.</p>
<div id="targetDiv">
</div>
</body>
</html>
CSS code mystyle.css:
#targetDiv{
position:absolute;
z-index:200;}
PHP code login.php:
<?php
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="fusername" type="text" id="fusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="fpassword" type="password" id="fpassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
?>
I am a bit lost as to why I can get this to work with a standard button but not an image button.
Thanks for taking the time to read this.
I am trying fetch a php logon form with ajax, I have set up a form with a button to fetch the php logon page and display it in a div. I am able to get the form to work with a standard button however when I change the inpute type to "image" the div does some strange things. Sometimes the logon page apears for 1ms and dissapears and other nothing happens(I am assuming the page still displays however just to fast for me to see it).
I suspected that this may be due to the image on the button taking presidents over the form div so I have given the target div for the logon page a z-index of 200 alas with no change.
DHTML code index.html:
<html>
<head>
<title>Ajax at work</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "image" src="login.gif" value = "Display Message" width="50" height="30"
onclick = "getData('login.php', 'targetDiv')">
</form>
<p>The fetched data will go here.</p>
<div id="targetDiv">
</div>
</body>
</html>
CSS code mystyle.css:
#targetDiv{
position:absolute;
z-index:200;}
PHP code login.php:
<?php
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="fusername" type="text" id="fusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="fpassword" type="password" id="fpassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
?>
I am a bit lost as to why I can get this to work with a standard button but not an image button.
