oskarsMedlem sedan nov. 20051 317 inlägg 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
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 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!
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 Uuuunderbart =) Tackar och bugar!
oskarsMedlem sedan nov. 20051 317 inlägg 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? :)
