Hey, I got a problem with IE and Opera, it wont show the response while firefox and safari does. could someone help me figure it out var xmlHttp function CheckField(field) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="include/check.php" url=url+"?op=ajax" url=url+"&field=" +field.name url=url+"&value=" +field.value xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) LastField = field.name; xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ if (document.getElementById) { x = document.getElementById(LastField); x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } else if (document.all) { x = document.all[LastField]; x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } else if (document.layers) { x = document.layers[LastField]; x.style.display = "block"; x.document.open(); x.document.write(xmlHttp.responseText); x.document.close(); } } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Code (markup): this is my html field <tr> <td class="title">Username (*)</td> <td class="field"> <input type="text" name="username" value="" size="20" OnBlur="CheckField(this)" tabindex="1"> <div id="username" class="message"></div> </td> </tr> HTML: and this is my style .field { padding: 4px; background: #FFE691; } .message { background: white; border:1px solid #FF7F50; margin: 4px; text-align: center; display:none; } Code (markup): could someone tell me whats wrong Regard, Kaju
Change the stateChanged function to this: function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ x = document.getElementById(LastField); x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } } PHP:
hey, i had that in the first place and it didn't work too, so i readed a article somewhere and it told me to do it like this, but it still doesn't work for IE and opera. any other suggestions? Regards, Kaju
Hey, Iam sorry but i dont have any link, because iam running it on localhost. but however here is how i have it. Index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajax Form</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> <script src="AjaxForm.js" type="text/javascript" language="javascript"></script> <link href="style.css" type="text/css" rel="stylesheet" title="default" /> </head> <body> <form action="" method="post" name="ajaxform"> <table class="register_form"> <tr> <td class="title">Username (*)</td> <td class="field"> <input type="text" name="username" value="" size="20" onblur="CheckField(this)" tabindex="1"/> <div id="username" class="message"></div> </td> </tr> <tr> <td class="title">Email (*)</td> <td class="field"> <input type="text" name="email" value="" size="20" onblur="CheckField(this)" tabindex="1"/> <div id="email" class="message"></div> </td> </tr> <tr> <td><input type="submit" name="submit" value="Register" tabindex="1"/></td> </tr> </table> </form> </body> </html> HTML: AjaxForm.js var xmlHttp var LastField = null; function CheckField(field) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="check.php" url=url+"?op=ajax" url=url+"&field=" +field.name url=url+"&value=" +field.value xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) LastField = field.name; xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ if (document.getElementById) { x = document.getElementById(LastField); x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } else if (document.all) { x = document.all[LastField]; x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } else if (document.layers) { x = document.layers[LastField]; x.style.display = "block"; x.document.open(); x.document.write(xmlHttp.responseText); x.document.close(); } } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Code (markup): Style.css .register_form { background: #FF7F50; border:1px solid black; padding: 4px; margin: 4px; width: 500px; } .title { width: 60%; background: #FFAF91; padding: 4px; } .field { padding: 4px; background: #FFE691; } .message { background: white; border:1px solid #FF7F50; margin: 4px; text-align: center; display: none; } .green { color: Green; } .red { color: red; } .category { background: #E0FF91; padding: 4px; } Code (markup): check.php <?php if ($_GET['op'] == 'ajax') { echo "<?xml version='1.0' encoding='UTF-8'?>"; include "Mysql.php"; // verification of username if ($_GET['field'] == 'username') { $query = "SELECT * FROM account where username='".mysql_escape_string($_GET['value'])."'"; $result = mysql_query($query); $num_rows = mysql_num_rows($result); if(empty($_GET['value'])){ echo "<span class=\"red\">Please enter a username</span>"; } else { if($num_rows == 0){ echo "<span class=\"green\">Available</span>"; } else { echo "<span class=\"red\">Not Available</span>"; } } } // verification of email if ($_GET['field'] == 'email') { $query = "SELECT * FROM profile where email='".mysql_escape_string($_GET['value'])."'"; $result = mysql_query($query); $num_rows = mysql_num_rows($result); if(empty($_GET['value'])){ echo "<span class=\"red\">Please enter a email</span>"; } else { if(!ereg("^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$", $_GET['value'])) { echo "<span class=\"red\">Please enter a valid email</span>"; } else { if ($num_rows !== 0) { echo "<span class=\"red\">This email is already in use</span>"; } else { echo "<span class=\"green\">Good</span>"; } } } } } mysql_close(); ?> PHP: Regards, Kaju
During an irritating debugging session suddenly the answer hit me. IE's getElementById function gets elements with the matching id and name! Opera, unfortunately, emulates this behavior.
Hey, Do you know how i can fix this, because i still havent figured it out. It shows perfectly in safari and firefox but opera en ie have a problem with it. Regards, Kaju
A snip of your code: <input type="text" name="username" value="" size="20" OnBlur="CheckField(this)" tabindex="1"> <div id="username" class="message"></div> HTML: As you can see you have an element with the name "username" and an element with the id "username". You must change that. index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajax Form</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> <script src="AjaxForm.js" type="text/javascript" language="javascript"></script> <link href="style.css" type="text/css" rel="stylesheet" title="default" /> </head> <body> <form action="" method="post" name="ajaxform"> <table class="register_form"> <tr> <td class="title">Username (*)</td> <td class="field"> <input type="text" name="user" value="" size="20" onblur="CheckField(this)" tabindex="1"/> <div id="username" class="message"></div> </td> </tr> <tr> <td class="title">Email (*)</td> <td class="field"> <input type="text" name="email" value="" size="20" onblur="CheckField(this)" tabindex="1"/> <div id="email" class="message"></div> </td> </tr> <tr> <td><input type="submit" name="submit" value="Register" tabindex="1"/></td> </tr> </table> </form> </body> </html> HTML: AjaxForm.js var xmlHttp function CheckField(field) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="check.php" url=url+"?op=ajax" url=url+"&field=" +field.name url=url+"&value=" +field.value xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ x = document.getElementById('username'); x.innerHTML = xmlHttp.responseText; x.style.display = "block"; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } PHP:
Throw this at the top of index.php and see if it works, generally it fixes Opera's caching bug: <?php header("Cache-Control: no-cache, must-revalidate"); ?> PHP: BP
Since you have several fields that can be checked and you can't really make the name changes THAT much different, try setting your div IDs to the name and a number at the end. Such as this: <input type="text" name="username" value="" size="20" onblur="CheckField(this)" tabindex="1"/> <div id="username1" class="message"></div> HTML: var xmlHttp var LastField = null; function CheckField(field) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="check.php" url=url+"?op=ajax" url=url+"&field=" +field.name url=url+"&value=" +field.value xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) LastField = field.name + "1"; xmlHttp.send(null) } HTML: I'm really quite surprised though that IE and Opera get elements with matching names even though you're using getElementById, if what MMJ says is correct.