Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Wyłaczyc pole option w selectcie za pomoc± js
Forum PHP.pl > Forum > Przedszkole
dante90
25.04.2009, 10:36:40
Witam, 

w formularzu chialem sprawdzic czy wpisana data (trzy pola select rrrr-mm-dd) jest poprawna i ewentualnie, i jezeli miesiac wybierzemy na 2 to zeby w selekcie "dzien" ustawilo na disabled=true dni 31 30 itd, troche kodu:

[HTML] pobierz, plaintext 
  1. <select name="rok" onchange="data(document.form.rok.value, document.form.mies.value)">
  2.  		<script type="text/javascript" >
  3.  		<!--
  4.  			for ( i=1920 ; i<=2009 ; i++ ) 
  5.  			{ 
  6.  				document.write("<option>"+i+"</option>");
  7.  			}
  8.  		//-->
  9.  		</script>
  10.  		</select>
  11.  		<select name="mies" maxlength="2" onchange="data(document.form.rok.value, document.form.mies.value)" >
  12.  			<script type="text/javascript" >
  13.  		<!--
  14.  			for ( i=1 ; i<=12 ; i++ ) 
  15.  			{ 
  16.  				document.write("<option value='"+i+"' name='"+i+"'>"+i+"</option>");
  17.  			}
  18.  		//-->
  19.  		</script>
  20.  		</select>
  21.  		<select name="dzien" maxlength="2" >
  22.  		<script type="text/javascript">
  23.  		<!--
  24.  			for ( i=1 ; i<=31 ; i++ ) 
  25.  			{ 
  26.  				document.write("<option>"+i+"</option>");
  27.  			}
  28.  		//--> 
  29.  		</script>		 
  30.  		</select>
[HTML] pobierz, plaintext


i funkcja data w js

Kod
function data(rok,miesiac)
     {
         document.form.dzien.disabled=false;
         switch(miesiac)
         {
             case 01:
                 break;
             case 02:
                 if (rok%4==0 && rok%100!=0 || rok%400==0)
                 {
                     document.form.dzien.option.31.disabled=true;
                     document.form.dzien.option.30.disabled=true;
                 }else
                 {
                     document.form.dzien.option.31.disabled=true;
                     document.form.dzien.option.30.disabled=true;
                     document.form.dzien.option.29.disabled=true;
                 }
                 break;
             case 03:
                 break;
             case 04:
                 document.form.dzien.option.31.disabled=true;
                 break;
             case 05:
                 break;
             case 06:
                 document.form.dzien.option.31.disabled=true;
                 break;
             case 07:
                 break;
             case 08:
                 break;
             case 09:
                 document.form.dzien.option.31.disabled=true;
                 break;
             case 10:
                 break;
             case 11:
                 document.form.dzien.option.31.disabled=true;
                 break;
             case 12:
                 break;
             default :
                 break; 
         }
      
     }

narazie troche zamieszanie z tymi case'ami ale najpierw trzeba doprowadzic do postaci prawidłowej:D
dokladnie chodzi mi o sformułowanie "document.form.dzien.option.31.disabled=true;"

edit: aha formularz ma name="form" biggrin.gif
edit2: załozenie ze uzytkownik ma zawsze właczoną obsluge js (góra tak zarzadzila biggrin.gif)
edit3: zmieniłem nazwe funkcji z data na dataa biggrin.gif
Crozin
25.04.2009, 11:08:20
Rozważ sobie ten kod:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Przykładowy dokument</title>

        <style type="text/css"></style>
        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                var a = document.forms["test"].elements["abc"].options[4].disabled = true;
alert(a);
            }, false);
        </script>
    </head>
    <body>
        <form name="test">
            <select name="abc">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</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>
            </select>
        </form>
    </body>
</html>
dante90
25.04.2009, 12:04:58
ten osobny fragment dziala ale jak dałem do mojego przykładu to cos nie trybi, nawet go odosobmiłem

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Przykładowy dokument</title>
 
<script type="text/javascript">
    <!--       
     function dataa(rok ,miesiac)
     {
         alert(rok + " " + miesiac);
         switch(miesiac)
         {
             case "2":
             alert("2");
                 if ((rok%4==0 && rok%100 != 0 )|| rok%400==0)
                 {
                     alert("przestepny" + rok)
                     document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                     document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[30].disabled = true;}, false);
                 }else
                 {
                     alert(" nie przestepny" + rok)
                     document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                     document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[30].disabled = true;}, false);
                     document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[29].disabled = true;}, false);
                 }
                 break;
              
             case "4":
             alert("4");
                 document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                 break;
             case "6":
             alert("6");
                 document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                 break;
             case "9":
             alert("9");
                 document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                 break;
             case "11":
             alert("11");
                 document.addEventListener("DOMContentLoaded",function(){document.forms["form"].elements["dzien"].options[31].disabled = true;}, false);
                 break;
             default :
             alert("Nic nie rob");
                 break;
         }
      
     }
 //-->
    </script>
 </head>
    <body>
     <form action="" method="post" name="form">
     <select name="rok" onchange="dataa(document.form.rok.value, document.form.mies.value)">
         <script type="text/javascript" >
         <!--
             for ( i=1920; i<=2008; i++ )
             {
                 document.write("<option value='"+i+"'>"+i+"</option>");
             }
         //-->
         </script>
         </select>
         <select name="mies" maxlength="2" onchange="dataa(document.form.rok.value, document.form.mies.value)" >
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
         </select>
         <select name="dzien" maxlength="2" >
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</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>
     </body>
</html>
Crozin
25.04.2009, 12:51:42
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Przykładowy dokument</title>
  
<script type="text/javascript">
    function enableAll(opt){
        for(var i = 28; i < 31; ++i){
            opt[i].disabled = false;
        }
    }

    document.addEventListener("DOMContentLoaded", function(){
        document.forms["form"].elements["mies"].addEventListener("change", function(){
            var opt = this.form.elements["dzien"].options;
            switch(parseInt(this.value)){
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    enableAll(opt);    
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    enableAll(opt);
                    opt[30].disabled = true;
                    break;
                case 2:
                    opt[28].disabled = opt[29].disabled = opt[30].disabled = true;
                    if(this.form.elements["rok"].value % 4 == 0){
                        opt[28].disabled = false;
                    }
                    break;
            }
        }, false);
    }, false);
</script>
</head>
    <body>
     <form action="" method="post" name="form">
         <select name="rok">
<option value='1920'>1920</option><option value='1921'>1921</option><option value='1922'>1922</option><option value='1923'>1923</option><option value='1924'>1924</option><option value='1925'>1925</option><option value='1926'>1926</option><option value='1927'>1927</option><option value='1928'>1928</option><option value='1929'>1929</option><option value='1930'>1930</option><option value='1931'>1931</option><option value='1932'>1932</option><option value='1933'>1933</option><option value='1934'>1934</option><option value='1935'>1935</option><option value='1936'>1936</option><option value='1937'>1937</option><option value='1938'>1938</option><option value='1939'>1939</option><option value='1940'>1940</option><option value='1941'>1941</option><option value='1942'>1942</option><option value='1943'>1943</option><option value='1944'>1944</option><option value='1945'>1945</option><option value='1946'>1946</option><option value='1947'>1947</option><option value='1948'>1948</option><option value='1949'>1949</option><option value='1950'>1950</option><option value='1951'>1951</option><option value='1952'>1952</option><option value='1953'>1953</option><option value='1954'>1954</option><option value='1955'>1955</option><option value='1956'>1956</option><option value='1957'>1957</option><option value='1958'>1958</option><option value='1959'>1959</option><option value='1960'>1960</option><option value='1961'>1961</option><option value='1962'>1962</option><option value='1963'>1963</option><option value='1964'>1964</option><option value='1965'>1965</option><option value='1966'>1966</option><option value='1967'>1967</option><option value='1968'>1968</option><option value='1969'>1969</option><option value='1970'>1970</option><option value='1971'>1971</option><option value='1972'>1972</option><option value='1973'>1973</option><option value='1974'>1974</option><option value='1975'>1975</option><option value='1976'>1976</option><option value='1977'>1977</option><option value='1978'>1978</option><option value='1979'>1979</option><option value='1980'>1980</option><option value='1981'>1981</option><option value='1982'>1982</option><option value='1983'>1983</option><option value='1984'>1984</option><option value='1985'>1985</option><option value='1986'>1986</option><option value='1987'>1987</option><option value='1988'>1988</option><option value='1989'>1989</option><option value='1990'>1990</option><option value='1991'>1991</option><option value='1992'>1992</option><option value='1993'>1993</option><option value='1994'>1994</option><option value='1995'>1995</option><option value='1996'>1996</option><option value='1997'>1997</option><option value='1998'>1998</option><option value='1999'>1999</option><option value='2000'>2000</option><option value='2001'>2001</option><option value='2002'>2002</option><option value='2003'>2003</option><option value='2004'>2004</option><option value='2005'>2005</option><option value='2006'>2006</option><option value='2007'>2007</option><option value='2008'>2008</option>
         </select>
         <select name="mies">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
         </select>
         <select name="dzien">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</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>
     </body>
</html>
Sorry za gotowca :/
dante90
25.04.2009, 13:05:48
Ok biggrin.gif dzieki ale i tak jeszcze sobie poczytam "addEventListener"

aha to nie jest takie prędkie ale jakaś podpowiedz zeby tylko do input/text mozna bylo tylko litery wpisywac, reszte ignorowało, juz szukałem ale jakos nie znalazłem, jedynie to :

Kod


//1 Przyklad pierwszy jest akurat do liczb ale i tak nie dziala bo mozna litery wpisac

function keyPress()
{
  if (event.keyCode < 48 || event.keyCode > 57){
      event.returnValue = false;
  }
}
...


<INPUT SIZE="2" NAME="f1" MAXLENGTH="2" onKeyPress="keyPress()">

/*========================================================*/

// 2 przyklad 

function keyPress()
{

if (document.form.f2.value.match(/d/)) 
         {
             document.form.f2.value = document.form.f2.value.replace(/d/g,"");
         }
}

...

<INPUT SIZE="2" NAME="f2" MAXLENGTH="2" onKeyPress="keyPress()">
/*========================================================*/

// 3 przyklad

<input type="text" name="f3"  maxlength="2" onkeyup="javascript:this.value=this.value.replace(/[a-z]*/is, '');/>
Crozin
25.04.2009, 13:22:26
Pierwsza metoda działa całkiem fajnie, z tym że blokuje też klawisze DEL czy BACKSPACE tongue.gif

Zamień sobie jednak t± drug± metodę:
1) Z keyPress zamień na keyUp
2) Jako argument do funkcji przekaż referencję do elementu
3) /\D/g wyłapie wszystkie znaki nienumeryczne

z reszt± sobie poradzisz winksmiley.jpg
dante90
25.04.2009, 13:44:02
Ok, dziala dla wpisywaneych samych liczb, narazie bez przekazywania parametru przez funkcje, 

Kod
function sprawdz_tekst()
     {
         if (document.form.nazwisko.value.match(/\D/g)) 
         {
             document.form.nazwisko.value = document.form.nazwisko.value.replace(/\D/g,"");
         }
     }



tylko mi chodzilo o same litery biggrin.gif a nie same liczby, ale dzieki temu zrobiłem drugi przyklad

Kod
function sprawdz_tekst()
     {
         if (document.form.nazwisko.value.match(/\d/g)) 
         {
             document.form.nazwisko.value = document.form.nazwisko.value.replace(/\d/g,"");
         }
     }
to prawie o to mi chodzilo tylko jescze te przecinki małpy etc biggrin.gif

wiem ze cie pierwszy przyklad wprowadzil w bład biggrin.gif ale z dzieki za wszystko
Crozin
25.04.2009, 13:49:43
\d - wszystko co jest liczb±
\D - wszystko co nie jest liczb±

To teraz poszukaj sobie dla liter takiego odpowiednika smile.gif
To jest wersja lo-fi głównej zawarto¶ci. Aby zobaczyć pełn± wersję z większ± zawarto¶ci±, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.