Submit

Hej,

jag undrar om någon skulle kunna hjälpa mig att pilla ihop följande funktion då mina lösningar inte blir helt korrekta.

Utförande:

Jag skall ha ett inloggningsformulär som består av två fält, användarnamn och lösenord. Submitknappen skall bestå av en bild som skall växla mellan tre olika.

När man kommer in på sidan skall submitknappen vara disable, alltså <input type="image" src="disable.gif">

När man markerar något av fälten skall bilden ändras och bli en fungerande knapp, eller ännu hellre, när man har skrivit någonting i båda fälten. Alltså:
<input type="image" src="knapp.gif">

Nä man sedan skall klicka på submitknappen blir den en annan, enligt onMouseOver funktionen.
<input type="image" src="over.gif">

Frågan är även om det är rätt att skriva <input type="image"> för en submitknapp eller skall man göra på annat sätt?

Har hittat en liknande funktion på https://www.sas.se men hänger inte riktigt med hur de har gjort.

Kanske skulle ligga som ideella jobb och tjänster.. Hmm, nää det är ju lite JavaScript också.

Tacksam för svar

Någonting sådant här kanske:

<script type="text/javascript">
<!--

var submitObj = null;
var disabledImg = "disabled.gif";
var enabledImg = "enabled.gif";
var mouseoverImg = "mOver.gif";

function checkState(o){
	var user = o.form.elements[ "user" ];
	var pass = o.form.elements[ "pass" ];

	submitObj.src = ( user.value.length > 0 || pass.value.length > 0 ) ? enabledImg : disabledImg;
};

window.onload = function(){
	for( var i=0; i < document.forms[ "foo" ].childNodes.length; i++ ){
		if( document.forms[ "foo" ].childNodes[ i ].type == "image" )
			submitObj = document.forms[ "foo" ].childNodes[ i ];
	}

	if( submitObj ){
		submitObj.onmouseover = function(){
			if( this.src.indexOf( disabledImg ) == -1 )
				this.src = mouseoverImg;
		}

		submitObj.onmouseout = function(){
			if( this.src.indexOf( mouseoverImg ) != -1 )
				this.src = enabledImg;
		}

		submitObj.onclick = function(){
			if( this.src.indexOf( disabledImg ) == -1 )
				this.form.submit();
			else
				return false;
		}
	}
};

//-->
</script>

...

<form name="foo">

Användarnamn:<br>
<input type="text" name="user" onkeyup="checkState(this)"><br>
Lösenord<br>
<input type="text" name="pass" onkeyup="checkState(this)"><br>
<input type="image" src="disabled.gif">

</form>

:)

Tackar!

:bire