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

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

oskarsMedlem sedan nov. 20051 317 inlägg

Trådstart12 sep. 2006 12:14#1

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

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?