Javascript Form Check

Form Checker

[MartinWeb]

I am trying to create a easy to use form that will check itself as the user types. I created the following code, but my pictures, and the disabled button are not appearing.

In the head-

<script type="text/javascript">
function check()
{

var nameCheck = new Boolean();
var passCheck = new Boolean();
var mailCheck = new Boolean();
var submitButton = new Boolean();

var name = document.getElementById("name");
var nameSign = document.getElementById("nameSign");
if(name==""¦¦name==null){
nameSign.innerHTML = "<img src=\"no.png\" width=\"40\" height=\"40\">";
nameCheck = false;
}else{
nameSign.innerHTML = "<img src=\"check.png\" width=\"40\" height=\"40\">";
nameCheck = true;
}

var pass = document.getElementById("pass");
var pass2 = document.getElementById("pass2");
var passSign = document.getElementById("passSign");
if(pass==""¦¦pass==null){
passSign.innerHTML = "<img src=\"no.png\" width=\"40\" height=\"40\">";
passCheck = false;
}else{
if(pass==pass2){
passSign.innerHTML = "<img src=\"check.png\" width=\"40\" height=\"40\">";
passCheck = true;
}
passSign.innerHTML = "<img src=\"no.png\" width=\"40\" height=\"40\">";
passCheck = false;
}

var mail = document.getElementById("email");
var mailSign = document.getElementById("mailSign");
if(mail==""¦¦mail==pass){
mailSign.innerHTML = "<img src=\"no.png\" width=\"40\" height=\"40\">";
mailCheck = false;
}else{
mailSign.innerHTML = "<img src=\"check.png\" width=\"40\" height=\"40\">";
mailCheck = true;
}

submitButton = false;
if(nameCheck){
if(mailCheck){
if(passCheck){
submitButton = true;
}
}
}

if(submitButton){
var submitB = document.getElementById("submitB");
submitB.innerHTML = "<input type=\"submit\" id=\"submit\" >";
}else{
var submitB = document.getElementById("submitB");
submitB.innerHTML = "<input type=\"submit\" id=\"submit\" disabled >";
}

var check = setTimeout("check()",200);
}

</script>

Then the body-

<form name="login" method="post" action="register.php" onSubmit="return validate_form(this);">
Sign up:
<table width="200px">
<tr>
<td>
Username:
</td>
<td>
<input type="text" id="name" >
</td>
<td><div id="nameSign"></div></td>
</tr>
<tr>
<td>
Passcode:
</td>
<td>
<input type="password" id="pass">
</td>
<td></td>
</tr>
<tr>
<td>
Confirm Passcode:
</td>
<td>
<input type="password" id="pass2" >
</td>
<td><div id="passSign"></div></td>
</tr>
<tr>
<td>
E-Mail :
</td>
<td>
<input type="text" id="email" name="email">
</td>
<td><div id="mailSign"></div></td>
</tr>


</table>
<div id="submitB">

</div>
</form>

The no.png file is a picture of a cross out. The check.png file is a picture of a check.
Any ideas? Thank you.

[daveVk]

rather than this

if(submitButton){
var submitB = document.getElementById("submitB");
submitB.innerHTML = "<input type=\"submit\" id=\"submit\" >";
}else{
var submitB = document.getElementById("submitB");
submitB.innerHTML = "<input type=\"submit\" id=\"submit\" disabled >";
}

include submit button in source and use this js

document.getElementById("submit").disabled = !submitButton;

similar for images include both in source with only one style.display = "inline" at a time ( the other "none" )

[MartinWeb]

Thanks! But that leads me to another question- how do I get the forms value? When I try the document.getElementById, I get an output of "objectHtmlInputElement". How do I fix this?

[MartinWeb]

I can not figure out how to delete my previous post so I shall do this insted. Anyway, I figured out how to get the correct value

[MartinWeb]

Thanks.