Byta bild på submitknapp vid ändring i formuläret!

5 svar · 496 visningar · startad av oskars 12 sep. 2006

oskarsMedlem sedan nov. 20051 317 inlägg

Frågan12 sep. 2006 12:14#1

Hej på er! Tänk att solen skiner litegrann fortfarande iaf :h

Jag har en liten fråga...

Jag har ett formulär som heter "do" som innehåller en hel del textfält osv, och i slutet har jag en submitknapp som jag har gett en bakgrundsbild med css för att göra den lite finare.

Så här skulle jag vilja ha det:
Så fort någon gör en ändring i vilket fält som helst så ska bakgrundsbilden för submitknappen ändras.

Har jag rätt när det bör göras med javascript?

Vore tacksam om någon vill hjälpa mig :)

Oskar

jawbreakerMedlem sedan jan. 2003296 inlägg

12 sep. 2006 13:36#2

Det beror väl på hur pass avancerat det måste vara, men här har du något att utgå från:

<!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" xml:lang="se" lang="se">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Formulär</title>

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

function changeSubmitImg()
{
	var btn = document.getElementById("mySubmit");
	if (btn && btn.className != "bgChanged")
		btn.className = "bgChanged";
}

function doOnLoad()
{
	var el = document.forms[0].elements;

	for (var i = 0; i < el.length; i++)
	{
		if (el[i].type && el[i].type != "hidden")
			el[i].onchange = changeSubmitImg;
	}
}

//-->
</script>

<style type="text/css">
<!--
body, input, select, textarea, td { font: 12px arial, helvetica, sans-serif; }

.bgNormal { background: url(myImg1.gif) no-repeat scroll top left; }
.bgChanged { background: url(myImg2.gif) no-repeat scroll top left; }
-->
</style>
</head>

<body onload="doOnLoad();">
<form action="">

<table>
<tr>
	<td>Förnamn:</td>
	<td><input type="text" name="firstName" /></td>
</tr>
<tr>
	<td>Efternamn:</td>
	<td><input type="text" name="lastName" /></td>
</tr>
<tr>
	<td>Land:</td>
	<td>
		<select name="country">
			<option value="">Välj land</option>
			<option value="SE">Sverige</option>
			<option value="US">USA</option>
		</select>
	</td>
</tr>
<tr>
	<td colspan="2"><input type="submit" id="mySubmit" value="Skicka" class="bgNormal" /></td>
</tr>
</table>

</form>
</body>
</html>

oskarsMedlem sedan nov. 20051 317 inlägg

12 sep. 2006 14:33#3

Shit, tack så mycket!

Det fungerar i princip så jag vill... Går det att göra så att fort ett tecken skrivs i ett formulär så byts bakgrunden?

Återigen tack för att du tar dig tid!

jawbreakerMedlem sedan jan. 2003296 inlägg

12 sep. 2006 15:16#4

Testa att byta ut doOnLoad-funktionen mot denna:

function doOnLoad()
{
	var el = document.forms[0].elements;

	for (var i = 0; i < el.length; i++)
	{
		if (el[i].type)
		{
			switch (el[i].type)
			{
				case "text":
				case "password":
				case "textarea":
					el[i].onkeydown = changeSubmitImg;
					break;
				case "checkbox":
				case "radio":
					el[i].onclick = changeSubmitImg;
					break;
				case "select-one":
				case "select-multiple":
				case "file":
					el[i].onchange = changeSubmitImg;
					break;
			}
		}
	}
}

oskarsMedlem sedan nov. 20051 317 inlägg

12 sep. 2006 16:00#5

Uuuunderbart =) Tackar och bugar!

oskarsMedlem sedan nov. 20051 317 inlägg

30 okt. 2006 08:09#6

Jag har ett litet problem... Det här scriptet har krockat med ett annat javascript på min sida:

function showHideSelect(s, i)
{
  var s = document.forms["do"].elements[s],
      i = document.forms["do"].elements[i]; 
  i.style.display = (i.style.display != "none") ? "none" : "inline";
  s.style.display = (s.style.display != "none") ? "none" : "inline";
}

function updateInput(s, i)
{
  var currOp = s.options[s.selectedIndex];
  s.form.elements[i].value = currOp.text;
  s.style.display = "none";
  s.form.elements[i].style.display = "inline";
}

Det är antingen det eller denna trådens javascript som fungerar... vill få båda två att fungera samtidigt, men som sagt, dom krockar ... Hur ska man ställa in dom? :)