---
title: "Disabla submit-knapp om fält inte är ifyllda"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/131405-disabla-submit-knapp-om-fält-inte-är-ifyllda"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "hallmert"
published: "2005-07-14T11:21:08.000Z"
updated: "2005-07-15T06:26:49.000Z"
replies: 7
views: 242
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/131405-disabla-submit-knapp-om-fält-inte-är-ifyllda"
---

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

## #1 — hallmert, 2005-07-14T11:21Z

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>
```

Permalänk: https://www.webforum.nu/p/131405

## #2 — pettsson, 2005-07-14T13:26Z

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".

Permalänk: https://www.webforum.nu/p/1645897

## #3 — hallmert, 2005-07-14T13:58Z

Tusen tack!

Permalänk: https://www.webforum.nu/p/1645908

## #4 — hallmert, 2005-07-14T14:05Z

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>
```

Permalänk: https://www.webforum.nu/p/1645912

## #5 — pettsson, 2005-07-14T16:02Z

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>
```

Permalänk: https://www.webforum.nu/p/1645936

## #6 — hallmert, 2005-07-14T16:05Z

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

Permalänk: https://www.webforum.nu/p/1645938

## #7 — pettsson, 2005-07-15T05:54Z

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

Permalänk: https://www.webforum.nu/p/1646088

## #8 — @nders, 2005-07-15T06:26Z

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

1)  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">
```

2) 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;
}
```

3) 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

Permalänk: https://www.webforum.nu/p/1646092

---

Tråden på webben: https://www.webforum.nu/amne/javascript/131405-disabla-submit-knapp-om-fält-inte-är-ifyllda
