webForumDet fria alternativet
Logga in / Bli medlem

Begränsa tecken i input?

JavaScript

5 svar · 277 visningar · startad av wborg

wborgMedlem sedan dec. 2003209 inlägg
Trådstart#1

Hej,

jag undrar hur jag ska koda ett valideringsscript som bara tillåter siffrorna 1 - 7 i mina input fält? (inget fält får heller vara tomt)

Dessutom så undrar jag hur jag gör för att i fälten:
1:or, 2:or, 3:or, 4:or, 5:or, 6:or & 7:or för att dom ska räkna hur många av varje siffra jag fyllt i i fälten 1 - 18 dvs det ska plussas på ett i respektive siffras ruta när jag anger den siffran i något av fälten 1 - 18 så det ska alltså bli 18 om man summerar ihop alla siffror i fälten 1:or till 7:or när man fyllt i alla fälten 1 - 18.

hoppas ni förstår min röriga förklaring, här kommer min kod:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Protokoll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function addera(theForm){
var summan = 0;
var color = "black";
for(var i=0; i<18; i++){
summan += (isNaN(parseFloat(theForm.elements[i].value))) ? 0 : parseFloat(theForm.elements[i].value);
}
if (summan<30) color="blue";
else if (summan<36) color="green";
else if (summan<40) color="red";
theForm.summa.style.color=color;
theForm.summa.value = summan;
}
</script>
</head>

<body onLoad="javascript:document.scorecard.lane1.focus()">
<center>
<form method="post" action="" name="scorecard">
<table border="0" width="90">
  <tr>
    <td><b>Serie <%=Request.QueryString("round")%></b></td>
  </tr>
    <td>
      <table border="1" style="border-collapse: collapse" bordercolor="#000000" width="90">
        <tr>
          <td align="center" bgcolor="#CCCCCC"><b>1</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>2</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>3</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>4</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>5</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>6</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>7</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>8</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>9</b></td>
        </tr>
        <tr>
          <td align="center" bgcolor="#000000"><input type="text" name="lane1" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana2.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane2" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana3.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane3" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana4.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane4" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana5.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane5" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana6.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane6" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana7.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane7" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana8.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane8" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana9.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane9" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana10.focus()"></td>
        </tr>
        <tr>
          <td align="center" bgcolor="#CCCCCC"><b>10</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>11</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>12</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>13</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>14</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>15</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>16</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>17</b></td>
	      <td align="center" bgcolor="#CCCCCC"><b>18</b></td>
        </tr>
        <tr>
          <td align="center" bgcolor="#000000"><input type="text" name="lane10" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana11.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane11" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana12.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane12" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana13.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane13" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana14.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane14" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana15.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane15" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana16.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane16" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana17.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane17" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.bana18.focus()"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="lane18" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="1" onkeyup="this.form.submit.focus()"></td>
        </tr>
        <tr>
          <td colspan="8" align="right" bgcolor="#CCCCCC"><b>Totalt:</b>&nbsp;</td>
	      <td bgcolor="red"><input type="text" value="0" style="text-align: center; font-weight: bold; color: blue;" size="1" name="summa<%=Request.QueryString("round")%>"></td>
        </tr>
		<tr>
          <td align="center" bgcolor="#CCCCCC" width="10"><b>1:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>2:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>3:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>4:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>5:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>6:or</b></td>
	      <td align="center" bgcolor="#CCCCCC" width="10"><b>7:or</b></td>
		  <td colspan="2" rowspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" bgcolor="#000000"><input type="text" name="one" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="one"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="two" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="two"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="three" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="three"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="four" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="four"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="five" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="five"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="six" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="six"></td>
	      <td align="center" bgcolor="#000000"><input type="text" name="seven" style="text-align: center; font-weight: bold;" onblur="addera(this.form)" size="1" maxlength="2" onkeyup="this.form.submit.focus()" readonly="seven"></td>
        </tr>		
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="9" align="right"><input type="submit" value="Spara" name="submit">&nbsp;<input type="reset" value="Sudda" name="reset" onclick="this.form.bana1.focus()"></td>
  </tr>
</table>
</form>
</center>
</body>
</html>

/Stefan

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#2

Din kod var ju ett enda bugghål :( (Kanske beror på att du satt och kodade mitt i natten :x )
Jag har fixat de värsta buggarna och lagt till den funktionen du ville ha.
Följande rad tycker jagatt du ska förlägga till servern:

"><input type="text" value="0" style="text-align: center; font-weight: bold; color: blue;" size="1" name="summa<%=Request.QueryString("round")%>"></

Den är ändrad i mitt exempel. Dessutom finns det mycket du skulle kunna göra för att snygga upp koden, men detta är iaf en början!
Fårman för övrigt fråga vilken sport/lek detta formulär är till för? Jag utesluter genast bowling och allt som har med tärningar att göra!
ò

limit.zip (2 kB)
wborgMedlem sedan dec. 2003209 inlägg
#3

Självklart får man fråga vilken sport formuläret är till för och svaret kommer här: Bangolf (fd Minigolf).

Tack för hjälpen nu ska jag bara försöka koppla detta till en databas också, ska bli intressant att se om man får till det på ett bra sätt.

/Stefan

wborgMedlem sedan dec. 2003209 inlägg
#4

Jo jag undrar om du kanske kan hjälpa mig med en sak till?
Jag skulle vilja få till så att det kommer upp en alert("Alla fält måste vara ifyllda!") om man missat ett fält. Har du lust?

/Stefan

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#5

Ok, här kommer en ny version. Denna sätter också fokus till den första icke ifyllda rutan.

golf-form.zip (2 kB)
wborgMedlem sedan dec. 2003209 inlägg
#6

Super tack nitro2k01!

268 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
141 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)