Confirming in Forms

[master maste]

Just been trying some things out with forms and was wondering how I would display a tick next to both of my input boxes if the input boxes have the same text inside them.

You know on those sign up forms where you have to confirm something, and if its right then it displays a tick beside both of the boxes.

Any help would be greatly appreciated as googles not even searching for me at the moment, and live.com is doing a pretty hopeless job at finding answers.

 

[enouwee]

This?

<input type="checkbox" id="foo" name="foo" value="bar" /><label for="foo">Foo</label>

 

[master maste]

No not actual checkboxes, the tick (and cross) are images, and are displayed to show you weather or not the confirmed password is the same as the one you originally typed in.

Can't find any examples anymore, but I'll post one when I find it.

edit: also the input box changes from white to either red or green (depending on the outcome)

 

[enouwee]

Changing the color can easily be done with CSS (hint: google for: CSS forms).

You fancy "checkbox" characters/images are JavaScript-only. Forget them.

 

[master maste]

Ok, thanks for that I won't use images.

Also about the color changing can you get it to check weather the both the password input boxes (pass, pass2) are the same,
if they are then color then green, if not then color red.
I would prefer not to have to reload the page to find this out.

 

[TFlan]

JavaScript is a lovely thing.

Form code:

<form name="sample" method="post" action="URL.php">
<input type="password" name="pass1" value="" onblur="checkpass();">
<input type="password" name="pass2" value="" onblur="checkpass();">
</form>
<span id="check">Don't Match</span>

JavaScript code:

function checkpass(){
    var pass1 = document.sample.pass1.value;
    var pass2 = document.sample.pass2.value;
    if(pass1==pass2){ 
        document.getElementById('check').innerHTML = "Match"; 
    }else{ 
        document.getElementById('check').innerHTML = "Don't Match";
    }
}