Disabla submit-knapp om fält inte är ifyllda

7 svar · 237 visningar · startad av hallmert 14 juli 2005

hallmertMedlem sedan dec. 2004182 inlägg

Frågan14 juli 2005 11:21#1

Hejsan!

Jag har ett litet formulär där man fyller i sitt födelseår, födelsemånad samt födelsedag. Det ser ut som följer.

Nu är det så att jag vill att submit-knappen längst ner skall vara DISABLAD ända tills alla tre selections är ifyllda, dvs. år, månad och dag.

Jag har verkligen noll koll på sånt här med Javascript och skulle vara tacksam för hjälp med det här scriptet! Stort tack!

Här kommer min kod för formuläret:

<form method="post" action="presentation_fodelsedag.asp?ID=<%=Session("id")%>">
<table width="381" cellpadding="2" cellspacing="0" bgcolor="#F65C84">
<tr>
<td width="110" align="right" valign="top"><font color="#ffffff">Jag är född:</font></td>
<td width="271">
<SELECT NAME="ar">
<OPTION>År</OPTION>
<OPTION VALUE="2000">2000</OPTION><OPTION VALUE="1999">1999</OPTION><OPTION VALUE="1998">1998</OPTION>
<OPTION VALUE="1997">1997</OPTION><OPTION VALUE="1996">1996</OPTION><OPTION VALUE="1995">1995</OPTION>
<OPTION VALUE="1994">1994</OPTION><OPTION VALUE="1993">1993</OPTION><OPTION VALUE="1992">1992</OPTION>
<OPTION VALUE="1991">1991</OPTION><OPTION VALUE="1990">1990</OPTION><OPTION VALUE="1989">1989</OPTION>
<OPTION VALUE="1988">1988</OPTION><OPTION VALUE="1987">1987</OPTION><OPTION VALUE="1986">1986</OPTION>
<OPTION VALUE="1985">1985</OPTION><OPTION VALUE="1984">1984</OPTION><OPTION VALUE="1983">1983</OPTION>
<OPTION VALUE="1982">1982</OPTION><OPTION VALUE="1981">1981</OPTION><OPTION VALUE="1980">1980</OPTION>
<OPTION VALUE="1979">1979</OPTION><OPTION VALUE="1978">1978</OPTION><OPTION VALUE="1977">1977</OPTION>
<OPTION VALUE="1976">1976</OPTION><OPTION VALUE="1975">1975</OPTION><OPTION VALUE="1974">1974</OPTION>
<OPTION VALUE="1973">1973</OPTION><OPTION VALUE="1972">1972</OPTION><OPTION VALUE="1971">1971</OPTION>
<OPTION VALUE="1970">1970</OPTION><OPTION VALUE="1969">1969</OPTION><OPTION VALUE="1968">1968</OPTION>
<OPTION VALUE="1967">1967</OPTION><OPTION VALUE="1966">1966</OPTION><OPTION VALUE="1965">1965</OPTION>
<OPTION VALUE="1964">1964</OPTION><OPTION VALUE="1963">1963</OPTION><OPTION VALUE="1962">1962</OPTION>
<OPTION VALUE="1961">1961</OPTION><OPTION VALUE="1960">1960</OPTION><OPTION VALUE="1959">1959</OPTION
<OPTION VALUE="1955">1955</OPTION><OPTION VALUE="1954">1954</OPTION><OPTION VALUE="1953">1953</OPTION>
<OPTION VALUE="1952">1952</OPTION><OPTION VALUE="1951">1951</OPTION><OPTION VALUE="1950">1950</OPTION>
<OPTION VALUE="1949">1949</OPTION><OPTION VALUE="1948">1948</OPTION><OPTION VALUE="1947">1947</OPTION>
<OPTION VALUE="1946">1946</OPTION><OPTION VALUE="1945">1945</OPTION><OPTION VALUE="1944">1944</OPTION>
<OPTION VALUE="1943">1943</OPTION><OPTION VALUE="1942">1942</OPTION><OPTION VALUE="1941">1941</OPTION>
<OPTION VALUE="1940">1940</OPTION><OPTION VALUE="1939">1939</OPTION><OPTION VALUE="1938">1938</OPTION>
<OPTION VALUE="1937">1937</OPTION><OPTION VALUE="1936">1936</OPTION><OPTION VALUE="1935">1935</OPTION>
<OPTION VALUE="1934">1934</OPTION><OPTION VALUE="1933">1933</OPTION><OPTION VALUE="1932">1932</OPTION>
<OPTION VALUE="1931">1931</OPTION><OPTION VALUE="1930">1930</OPTION><OPTION VALUE="1929">1929</OPTION>
<OPTION VALUE="1928">1928</OPTION><OPTION VALUE="1927">1927</OPTION><OPTION VALUE="1926">1926</OPTION>
<OPTION VALUE="1925">1925</OPTION><OPTION VALUE="1924">1924</OPTION><OPTION VALUE="1923">1923</OPTION>
<OPTION VALUE="1922">1922</OPTION><OPTION VALUE="1921">1921</OPTION><OPTION VALUE="1920">1920</OPTION>
<OPTION VALUE="1919">1919</OPTION><OPTION VALUE="1918">1918</OPTION><OPTION VALUE="1917">1917</OPTION>
<OPTION VALUE="1916">1916</OPTION><OPTION VALUE="1915">1915</OPTION>
</SELECT>

<SELECT NAME="manad">
<OPTION>Månad</OPTION>
<OPTION VALUE="01">Januari</OPTION><OPTION VALUE="02">Februari</OPTION><OPTION VALUE="03">Mars</OPTION>
<OPTION VALUE="04">April</OPTION><OPTION VALUE="05">Maj</OPTION><OPTION VALUE="06">Juni</OPTION>
<OPTION VALUE="07">Juli</OPTION><OPTION VALUE="08">Augusti</OPTION><OPTION VALUE="09">September</OPTION>
<OPTION VALUE="10">Oktober</OPTION><OPTION VALUE="11">November</OPTION><OPTION VALUE="12">December</OPTION>
</SELECT>

<SELECT NAME="dag">
<OPTION>Dag</OPTION>
<OPTION VALUE="01">01</OPTION><OPTION VALUE="02">02</OPTION><OPTION VALUE="03">03</OPTION><OPTION VALUE="04">04</OPTION>
<OPTION VALUE="05">05</OPTION><OPTION VALUE="06">06</OPTION><OPTION VALUE="07">07</OPTION><OPTION VALUE="08">08</OPTION>
<OPTION VALUE="09">09</OPTION><OPTION VALUE="10">10</OPTION><OPTION VALUE="11">11</OPTION><OPTION VALUE="12">12</OPTION>
<OPTION VALUE="13">13</OPTION><OPTION VALUE="14">14</OPTION><OPTION VALUE="15">15</OPTION><OPTION VALUE="16">16</OPTION>
<OPTION VALUE="17">17</OPTION><OPTION VALUE="18">18</OPTION><OPTION VALUE="19">19</OPTION><OPTION VALUE="20">20</OPTION>
<OPTION VALUE="21">21</OPTION><OPTION VALUE="22">22</OPTION><OPTION VALUE="23">23</OPTION><OPTION VALUE="24">24</OPTION>
<OPTION VALUE="25">25</OPTION><OPTION VALUE="26">26</OPTION><OPTION VALUE="27">27</OPTION><OPTION VALUE="28">28</OPTION>
<OPTION VALUE="29">29</OPTION><OPTION VALUE="30">30</OPTION><OPTION VALUE="31">31</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td valign="middle" height="35" colspan="2" align="center">
<input type="submit" value="Spara födelseinställningarna och logga in"></td>
</tr>
</table>
</form>

pettssonMedlem sedan jan. 20021 122 inlägg

14 juli 2005 13:26#2

Lägg detta i head

<script type="text/javascript">
 function changeCheck() {
  if(document.getElementsByName("dag")[0].value != "")
   if(document.getElementsByName("manad")[0].value != "")
 document.getElementsByName("ar")[0].value != "")
  document.getElementsByName("skicka")[0].disabled = false;
}
</script>

Sedan lägger du till onChange="changeCheck();" i alla selectarna. Sätt också submitknappens name till "skicka".

hallmertMedlem sedan dec. 2004182 inlägg

14 juli 2005 13:58#3

Tusen tack!

hallmertMedlem sedan dec. 2004182 inlägg

14 juli 2005 14:05#4

Det fungerade dessvärre inte! :/ Vad kan vara fel?

<html>
<head>
<title> hoho </title>
<link rel="stylesheet" href="style/style.css">

<script type="text/javascript">
 function changeCheck() {
  if(document.getElementsByName("dag")[0].value != "")
   if(document.getElementsByName("manad")[0].value != "")
 document.getElementsByName("ar")[0].value != "")
  document.getElementsByName("skicka")[0].disabled = false;
}
</script>

</head>
<body bgcolor="#F65C84">

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="middle" align="center">

<img src="grafik/sidbilder/ovrigt/patrikklantig.jpg"><p><br>

<form method="post" action="presentation_fodelsedag.asp?ID=<%=Session("id")%>">
<table width="381" cellpadding="2" cellspacing="0" bgcolor="#F65C84">
<tr>
<td width="110" align="right" valign="top"><font color="#ffffff">Jag är född:</font></td>
<td width="271">
<SELECT NAME="ar" onChange="changeCheck();">
<OPTION>År</OPTION>
<OPTION VALUE="2000">2000</OPTION><OPTION VALUE="1999">1999</OPTION><OPTION VALUE="1998">1998</OPTION>
<OPTION VALUE="1997">1997</OPTION><OPTION VALUE="1996">1996</OPTION><OPTION VALUE="1995">1995</OPTION>
<OPTION VALUE="1994">1994</OPTION><OPTION VALUE="1993">1993</OPTION><OPTION VALUE="1992">1992</OPTION>
<OPTION VALUE="1991">1991</OPTION><OPTION VALUE="1990">1990</OPTION><OPTION VALUE="1989">1989</OPTION>
<OPTION VALUE="1988">1988</OPTION><OPTION VALUE="1987">1987</OPTION><OPTION VALUE="1986">1986</OPTION>
<OPTION VALUE="1985">1985</OPTION><OPTION VALUE="1984">1984</OPTION><OPTION VALUE="1983">1983</OPTION>
<OPTION VALUE="1982">1982</OPTION><OPTION VALUE="1981">1981</OPTION><OPTION VALUE="1980">1980</OPTION>
<OPTION VALUE="1979">1979</OPTION><OPTION VALUE="1978">1978</OPTION><OPTION VALUE="1977">1977</OPTION>
<OPTION VALUE="1976">1976</OPTION><OPTION VALUE="1975">1975</OPTION><OPTION VALUE="1974">1974</OPTION>
<OPTION VALUE="1973">1973</OPTION><OPTION VALUE="1972">1972</OPTION><OPTION VALUE="1971">1971</OPTION>
<OPTION VALUE="1970">1970</OPTION><OPTION VALUE="1969">1969</OPTION><OPTION VALUE="1968">1968</OPTION>
<OPTION VALUE="1967">1967</OPTION><OPTION VALUE="1966">1966</OPTION><OPTION VALUE="1965">1965</OPTION>
<OPTION VALUE="1964">1964</OPTION><OPTION VALUE="1963">1963</OPTION><OPTION VALUE="1962">1962</OPTION>
<OPTION VALUE="1961">1961</OPTION><OPTION VALUE="1960">1960</OPTION><OPTION VALUE="1959">1959</OPTION
<OPTION VALUE="1955">1955</OPTION><OPTION VALUE="1954">1954</OPTION><OPTION VALUE="1953">1953</OPTION>
<OPTION VALUE="1952">1952</OPTION><OPTION VALUE="1951">1951</OPTION><OPTION VALUE="1950">1950</OPTION>
<OPTION VALUE="1949">1949</OPTION><OPTION VALUE="1948">1948</OPTION><OPTION VALUE="1947">1947</OPTION>
<OPTION VALUE="1946">1946</OPTION><OPTION VALUE="1945">1945</OPTION><OPTION VALUE="1944">1944</OPTION>
<OPTION VALUE="1943">1943</OPTION><OPTION VALUE="1942">1942</OPTION><OPTION VALUE="1941">1941</OPTION>
<OPTION VALUE="1940">1940</OPTION><OPTION VALUE="1939">1939</OPTION><OPTION VALUE="1938">1938</OPTION>
<OPTION VALUE="1937">1937</OPTION><OPTION VALUE="1936">1936</OPTION><OPTION VALUE="1935">1935</OPTION>
<OPTION VALUE="1934">1934</OPTION><OPTION VALUE="1933">1933</OPTION><OPTION VALUE="1932">1932</OPTION>
<OPTION VALUE="1931">1931</OPTION><OPTION VALUE="1930">1930</OPTION><OPTION VALUE="1929">1929</OPTION>
<OPTION VALUE="1928">1928</OPTION><OPTION VALUE="1927">1927</OPTION><OPTION VALUE="1926">1926</OPTION>
<OPTION VALUE="1925">1925</OPTION><OPTION VALUE="1924">1924</OPTION><OPTION VALUE="1923">1923</OPTION>
<OPTION VALUE="1922">1922</OPTION><OPTION VALUE="1921">1921</OPTION><OPTION VALUE="1920">1920</OPTION>
<OPTION VALUE="1919">1919</OPTION><OPTION VALUE="1918">1918</OPTION><OPTION VALUE="1917">1917</OPTION>
<OPTION VALUE="1916">1916</OPTION><OPTION VALUE="1915">1915</OPTION>
</SELECT>
<SELECT NAME="manad" onChange="changeCheck();">
<OPTION>Månad</OPTION>
<OPTION VALUE="01">Januari</OPTION><OPTION VALUE="02">Februari</OPTION><OPTION VALUE="03">Mars</OPTION>
<OPTION VALUE="04">April</OPTION><OPTION VALUE="05">Maj</OPTION><OPTION VALUE="06">Juni</OPTION>
<OPTION VALUE="07">Juli</OPTION><OPTION VALUE="08">Augusti</OPTION><OPTION VALUE="09">September</OPTION>
<OPTION VALUE="10">Oktober</OPTION><OPTION VALUE="11">November</OPTION><OPTION VALUE="12">December</OPTION>
</SELECT>
<SELECT NAME="dag" onChange="changeCheck();">
<OPTION>Dag</OPTION>
<OPTION VALUE="01">01</OPTION><OPTION VALUE="02">02</OPTION><OPTION VALUE="03">03</OPTION><OPTION VALUE="04">04</OPTION>
<OPTION VALUE="05">05</OPTION><OPTION VALUE="06">06</OPTION><OPTION VALUE="07">07</OPTION><OPTION VALUE="08">08</OPTION>
<OPTION VALUE="09">09</OPTION><OPTION VALUE="10">10</OPTION><OPTION VALUE="11">11</OPTION><OPTION VALUE="12">12</OPTION>
<OPTION VALUE="13">13</OPTION><OPTION VALUE="14">14</OPTION><OPTION VALUE="15">15</OPTION><OPTION VALUE="16">16</OPTION>
<OPTION VALUE="17">17</OPTION><OPTION VALUE="18">18</OPTION><OPTION VALUE="19">19</OPTION><OPTION VALUE="20">20</OPTION>
<OPTION VALUE="21">21</OPTION><OPTION VALUE="22">22</OPTION><OPTION VALUE="23">23</OPTION><OPTION VALUE="24">24</OPTION>
<OPTION VALUE="25">25</OPTION><OPTION VALUE="26">26</OPTION><OPTION VALUE="27">27</OPTION><OPTION VALUE="28">28</OPTION>
<OPTION VALUE="29">29</OPTION><OPTION VALUE="30">30</OPTION><OPTION VALUE="31">31</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td valign="middle" height="35" colspan="2" align="center">
<input type="submit" name="skicka" value="Spara födelseinställningarna och logga in"></td>
</tr>
</table>
</form>

<br><br><br>
<b><font color="#ffffff">Varför ber ni om mitt födelsedatum?</b><br><br>
Vi ber om ditt födelsedatum för att på <br>
din presentation kunna skriva ut din ålder.<br>
Kort och gott - så enkelt är det.</font>

</td>
</tr>
</table>

</body>
</html>

pettssonMedlem sedan jan. 20021 122 inlägg

14 juli 2005 16:02#5

Ajaj... Jag tappade bort en if, så här ska det vara

<script type="text/javascript">
 function changeCheck() {
  if(document.getElementsByName("dag")[0].value != "")
   if(document.getElementsByName("manad")[0].value != "")
    if(document.getElementsByName("ar")[0].value != "")
     document.getElementsByName("skicka")[0].disabled = false;
}
</script>

hallmertMedlem sedan dec. 2004182 inlägg

14 juli 2005 16:05#6

Funkar fortfarande inte, knappen är upplåst hela tiden! Och jag som vill ha den disablad ända tills alla selects är valda :(

pettssonMedlem sedan jan. 20021 122 inlägg

15 juli 2005 05:54#7

Men den är ju enabled från början... Lägg till disabled bland attributen så ska det nog funka :)

@ndersMedlem sedan juni 200032 967 inlägg

15 juli 2005 06:26#8

Jag hade nog valt att göra så här:

Sätt ID på alla input-elementen.

<SELECT NAME="ar" [b]id="ar"[/b] onChange="changeCheck();">
<SELECT NAME="manad" [b]id="manad"[/b] onChange="changeCheck();">
<SELECT NAME="dag" [b]id="dag"[/b] onChange="changeCheck();">
<input type="submit" name="skicka" [b]id="skicka"[/b] value="Spara födelseinställningarna och logga in">

Javascriptfunktion:

function changeCheck() {
	if (document.getElementById('dag').selectedIndex==0 || 
	    document.getElementById('manad').selectedIndex==0 || 
	    document.getElementById('ar').selectedIndex==0)
		document.getElementById('skicka').disabled = true;
	else
		document.getElementById('skicka').disabled = false;
}

Kör javascriptfunktionen även i body-elementets onload.

<body bgcolor="#F65C84" [b]onload="changeCheck();[/b]">

Borde funka som älg över sålt smörsken.

Mvh