Dom Problem...append Sibling?

[chibineku]

I am trying to use AJAX to check for the availability of email addresses and usernames before a user tries to register with ones that are already taken. I have some form fields (this is just a couple of them):

<label for="email"><?php printf("%-30s", "E-Mail Address:");?></label><input type="text" id="email" name="email" size="20" maxlength="100" onkeyup="checkCharsEmail(this)" value="<?php if($_SESSION["email"]) { echo $_SESSION["email"];}?>" onblur="available(this,email)" /><br /><label for="confirmEmail"><?php printf("%-30s", "Confirm E-Mail Address:");?></label><input type="text" id="confirmEmail" name="confirmEmail" size="20" maxlength="100" onkeyup="checkCharsEmail(this)" value="<?php if($_SESSION["confirmEmail"]) { echo $_SESSION["confirmEmail"];}?>"/><br />

You'll note the onblur event calls a function called available with two parameters. This is the function:

var xmlhttp=null;function available(field,type){if (field.value.length==0)  {   document.getElementById("txtHint").innerHTML="";  return;  }if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else if (window.ActiveXObject)  {  // code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }else  {  alert("Your browser does not support XMLHTTP!");  return;  }var url="http://www.sinaesthesia.co.uk/checkemail.php5?"+type+"=" + field.value;xmlhttp.open("get",url,false);xmlhttp.send(null);var tick = document.createElement("img");tick.src = "images/greentick.png";tick.style.width="16px";tick.style.height="16px";var cross = document.createElement("img");cross.src = "images/redcross.png";cross.style.width="16px";cross.style.height="16px";if(xmlhttp.responseText == "free") {  field.parentNode.insertBefore(tick,field);} else if(xmlhttp.responseText == "taken"){field.parentNode.insertBefore(cross,field);}}

The problem is that I can't get the image node created in this function to go in the right place. It always appears on the next row of my form, in front of the label for the confirmEmail field. I can get it to appear before the label for the email field, but not after the input box where it is supposed to go. I tried adding an empty span after the input, before the line break, and used insertBefore(tick, field.nextSibling), but to no avail. An aside: this is the php so far:

<?phpinclude_once("db_include.php5");doDB();$sql = "SELECT * FROM aromaMaster WHERE email='".$_GET["email"]."'";$res = mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli));if(mysqli_num_rows($res) == 0) {  echo 'free';} else if(mysqli_num_rows($res) > 0) {  echo 'taken';}?>

For some reason, it always returns true despite trying email addresses I know are already present in my database. Many problemos.

[boen_robot]

How does the tree look from Firebug's "HTML" tab? What are the applied styles of the nodes around that area? Any link we could try out (as this appears more like a CSS issue than a DOM issue)?

[chibineku]

Here is the link:http://www.sinaesthesia.co.uk/form.php5It only works in the first field of the second fieldset (e-mail) at present. I have been messing with the HTML positioning of the element and the CSS and can't get it to appear where I want it.

[justsomeguy]

I believe this:onblur="available(this,email)"should be this:onblur="available(this,'email')"It keeps saying it's free because it's not reading the email correctly. @ is a special character for a URL. You need to escape the email address when you send it.var url="http://www.sinaesthesia.co.uk/checkemail.php5?"+type+"=" + encodeURIComponent(field.value);

[chibineku]

Ahh! I had briefly wondered if I would be able to send an @ sign via GET. That, and the quotes thing, fixed my problem, as of course you knew it would. It's always quotes with me. Many thanks :)Now, if only it would appear in the right place.. worst comes to worst, I put it before the label for the field, but I hate having to settle...I mean, why should I? I will triumph...eventually.

[chibineku]

I decided that the function needed some refining, since it would keep adding symbols, even if you entered a correct e-mail address.So, I changed it to this (sans top part, which is the same):

var tick = document.createElement("img");tick.id = "tick";tick.src = "images/greentick.png";tick.style.width="16px";tick.style.height="16px";var cross = document.createElement("img");cross.id="cross";cross.src = "images/redcross.png";cross.style.width="16px";cross.style.height="16px";if(xmlhttp.responseText == "free") {  if(document.getElementById("cross")) {	document.getElementById("cross").parentNode.replaceChild.(tick, document.getElementById("cross"));  } else if(document.getElementById("tick")){  } else {  field.parentNode.insertBefore(tick,field);  }} else if(xmlhttp.responseText == "taken"){	if(document.getElementById("tick")) {	document.getElementById("tick").parentNode.replaceChild.(cross, document.getElementById("tick"));  } else if(document.getElementById("cross")){  } else {  field.parentNode.insertBefore(cross,field);  }}}

I am getting a strange error from FireBug when switching from a value that is taken, to one that is free:

Error: XML filter is applied to non-XML value function replaceChild() {[native code]}Source File: http://www.sinaesthesia.co.uk/form.php5Line: 115

I copied the syntax from another replaceChild function that I know works. Any thoughts?

[justsomeguy]

Not sure about that, what line is 115?You could also just have an image sitting there that you display or hide and change the src for instead of appending.

[chibineku]

True, I could do that...probably a lot easier. Good suggestion.115 is the replaceNode line: document.getElementById("tick").parentNode.replaceChild.(cross, document.getElementById("tick"));

[chibineku]

Ah, the reason I didn't do the hidden image thing is because I want this function to run for four different fields and it would save me inserting and hard coding the ids for them if I created and switched them on the fly. However, I can just give them ids like markeremail and concat the referring element's id onto 'marker' to make the function still work.

[justsomeguy]

ahh, I missed it:document.getElementById("tick").parentNode.replaceChild.(cross, document.getElementById("tick"));

[chibineku]

Ah, there it is! I have already done it the other way, swapping the source and display of the image and that works just fine...if I were starting from scratch I would do the node method in a bid to reduce the amount of typing/cutting&pasting but it'd be more work to fix now. Thanks for scouring though....