Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sprawdzanie zaznaczenia pola "radio"
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mion
6.01.2006, 17:10:56
Mam problem z validacja formularza zawierającego pola opcjonalnego wyboru typ "radio". Do validacji formularza stosuje zamieszczony poniżej kod js który działa jak jest tylko jedno pole radio. Niestety jak dochodzi opcjonalnie - niestety przestaje działać tj.. Nie pojawia się alert i można wysłać z NIEzaznaczonym jednym z pól wyboru.... Proszę o pomoc ..
Kod
<script type="text/javascript">
function formCheck(form) {
if (form.pojazd.checked==false)
{alert("Jaki pojazd ?");return false;}
}
</script>

formularz:
Kod
<form method="post"  onsubmit="return formCheck(this)">
<input type="radio" name="pojazd" value="1"> Osobowy<br>
<input type="radio" name="pojazd" value="2"> Dostawczy<br>
<input type="submit" value="Submit">


Nikt się nie czuje na siłach w pomocy z tym problemem? sad.gif
nospor
8.01.2006, 12:04:48
nadaj dla kazdego z radio inne id, odwoluj sie do radio poprzez document.getElementById('idradio') i dla kazdego radio sprawdzaj cze jest zaznaczony. jesli zaden nie jest zaznaczony, to wtedy wywalaj alerta
Mion
8.01.2006, 23:20:06
A w kodzie jak by to wyglądało. Niestety nie mam doświadczenia w DOM sad.gif
nospor
9.01.2006, 09:12:03 
[HTML] pobierz, plaintext 
  1. <form method="post"  onsubmit="return formCheck();">
  2. <input type="radio" name="pojazd" value="1" id="p1"> Osobowy<br>
  3. <input type="radio" name="pojazd" value="2" id="p2"> Dostawczy<br>
  4. <input type="submit" value="Submit">
[HTML] pobierz, plaintext


Kod
<script type="text/javascript">
function formCheck() {
if (document.getElementById('p1').checked==false && document.getElementById('p2').checked==false)
{alert("Jaki pojazd ?");return false;}
return true;
}
</script>
Mion
9.01.2006, 13:16:51
Wielkie dzwięki ! O to właśnie chodziło thumbsupsmileyanim.gif
piwib
5.02.2006, 23:34:40
A jak byś to zrobił z polem tekstowym type=text questionmark.gif
Mion
5.02.2006, 23:39:23
Cytat(piwib @ 2006-02-05 22:34:40)
A jak byś to zrobił z polem tekstowym type=text questionmark.gif

Tak jak podał Kolega nospor jest wyśmienicie, nie potrzebuję już innych kombinacji cool.gif
piwib
5.02.2006, 23:45:30
Ale ja zadałem to pytanko a nie ty biggrin.gif więc ja potrzebuje a nie ty biggrin.gif
revyag
5.02.2006, 23:45:55
Cytat(piwib @ 2006-02-05 23:34:40)
A jak byś to zrobił z polem tekstowym type=text questionmark.gif

np. tak
Kod
function isNotEmpty(elem) {
    var str = document.getElementById(elem).value;
    if(str == null || str.length == 0) {
        return false;
    } else {
        return true;
    }
}
piwib
5.02.2006, 23:56:49
Mam to tak:

Kod
<form action="dalej.php" method="POST">
<input type=text name="elem" id="elem"/>
<br><br>
<input type=submit value="DALEJ"/>
</form>

<script type="text/javascript">
function isNotEmpty(elem) {
   var str = document.getElementById(elem).value;
   if(str == null || str.length == 0) {
       return false;
   } else {
       return true;
   }
}
</script>


I bez reakcji... Co źle lub czego brakuje?
revyag
6.02.2006, 00:32:00
Podałem Ci funkcję to sprawdzenia czy element jest pusty. Jej użycie nie polega na skopiowaniu jej treści gdzieś w kod i czekaniu aż "zadziała". Nie masz jej nigdzie wywoływanej. Możesz to robić przy submicie formularza:
[HTML] pobierz, plaintext 
  1. <form action="dalej.php" method="POST" onsubmit="isNotEmpty('elem')">
  2. <input type=text name="elem" id="elem"/>
  3. <br><br>
  4. <input type=submit value="DALEJ"/>
  5. </form>
[HTML] pobierz, plaintext

Formularz nie submitnie się jeśli pole będzie puste.

ps. używaj odpowiedniego bbcode, html do kodu html, code dla js.
piwib
7.02.2006, 01:13:27 
[HTML] pobierz, plaintext 
  1. <form action="dalej.php" method="POST" onsubmit="isNotEmpty('elem')">
  2. <input type=text name="elem" id="elem"/>
  3. <br><br>
  4. <input type=submit value="DALEJ"/>
  5. </form>
[HTML] pobierz, plaintext


Kod
<script type="text/javascript">
function isNotEmpty(elem) {
  var str = document.getElementById(elem).value;
  if(str == null || str.length == 0) {
      return false;
  } else {
      return true;
  }
}
</script>


I dalej nie działa... Mistrzu?!
revyag
7.02.2006, 08:10:52
Mały szczegół snitch.gif
[HTML] pobierz, plaintext 
  1. <form action="dalej.php" method="POST" onsubmit="return isNotEmpty('elem')">
[HTML] pobierz, plaintext
piwib
9.02.2006, 14:34:14
Teraz to tak :] I jeszcze jedno pytanko korzystajac z topica jak można połączyć te dwa elementy? 

[HTML] pobierz, plaintext 
  1. onsubmit="return formCheck();"
  2.  
  3. onsubmit="return isNotEmpty('nazwa_ankiety')"
[HTML] pobierz, plaintext
revyag
9.02.2006, 15:16:00
Na szybko sklecone smile.gif
W tablicy elems są elementy które walidujesz, pierwsze pole to id, drugie typ.
W pętli sprawdzanie czy pola wypełnione/zaznaczone - jak chcesz to sobie możesz coś tam dodać.
Zmienna result - na starcie pokazuje ile elementów ma tablica - wszystkie muszą być zaznaczone żeby formularz przeszedł.
Kod
<script type="text/javascript">
function formCheck() {
    
    var elems = new Array(
        new Array("elem1","text"),
        new Array("elem2","text"),
        new Array("elem3","checkbox"),
        new Array("elem4","checkbox")
    );
    
    var result=elems.length;
    
    for(var i=0; i<elems.length; i++) {
        switch(elems[i][1]) {
            case "text": {
                if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                    result--;
                }
            }
            break;
            case "checkbox": {
                if(document.getElementById(elems[i][0]).checked==false) {
                    result--;
                }
            }
        }
    }
    
    return (result == elems.length) ? true : false;
}
</script>

[HTML] pobierz, plaintext 
  1. <form action="" method="POST" onsubmit="return formCheck()">
  2. <input id="elem1" type="text" name="elem1" />
  3. <input id="elem2" type="text" name="elem2" />
  4. <input id="elem3" type="checkbox" name="elem3" />
  5. <input id="elem4" type="checkbox" name="elem4" />
  6. <br /><br />
  7. <input type="submit" value="DALEJ"/>
  8. </form>
[HTML] pobierz, plaintext
piwib
9.02.2006, 16:47:54
Ooo bosko thank you master smile.gif

Chciałbym jeszcze dodać alert ale coś robie źle gdyż scrypt sie nie wykonuje. Jakbyś mógł jeszcze dopisac... smile.gif
revyag
9.02.2006, 21:34:46
Na końcu funkcji zamiast tego returna daj to:
Kod
if(result != elems.length) {
    alert("Musisz wypełnić wszystkie pola");
    return false;
} else {
    return true;
}
piwib
10.02.2006, 16:14:01
Mam coś takiego:

[HTML] pobierz, plaintext 
  1. <form action="konfigurator_2.php" method="POST" onsubmit="return formCheck()">
  2.  
  3. Podaj nazwę ankiety:
  4. <input type=text name="nazwa_ankiety" id="nazwa_ankiety"><br><br>
  5. Wybierz ilość pytań ankiety:
  6. <br><br>
  7.   <input type=radio name=ilosc_pytan value="3" id="p1"/>3 pytania<br>
  8.   <input type=radio name=ilosc_pytan value="5" id="p2"/>5 pytań<br>
  9.   <input type=radio name=ilosc_pytan value="7" id="p3"/>7 pytań<br>
  10.   <input type=radio name=ilosc_pytan value="10" id="p4"/>10 pytań<br><br>
  11.   <input type=submit value="Dalej"/>
  12.   </form>
[HTML] pobierz, plaintext



Kod
<script type="text/javascript">
function formCheck() {
  
   var elems = new Array(
       new Array("nazwa_ankiety","text"),
       new Array("p1","radio"),
    new Array("p2","radio"),
    new Array("p3","radio"),
       new Array("p4","radio")
   );
  
   var result=elems.length;
  
   for(var i=0; i<elems.length; i++) {
       switch(elems[i][1]) {
           case "text": {
               if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                   result--;
               }
           }
           break;
           case "radio": {
               if(document.getElementById(elems[i][0]).checked==false) {
                   result--;
               }
           }
       }
   }
  
   if(result != elems.length) {
   alert("Proszę wypełnić dokładnie wszystkie pola");
   return false;
} else {
   return true;
}}
</script>


I pewnie już wam sie rzuca w oczy że jest to formularz typu radio a skrypt jest nie do przejścia. Każda opcja typu radio zaznaczona być nie może a skrypt jest tak napisany... byłbym wdzięczny za odpowiedź
revyag
10.02.2006, 16:54:30
Kod
<script type="text/javascript">
function formCheck() {
    
    var elems = new Array(
        new Array("elem1","text"),
        new Array("elem2","text"),
        new Array("elem3","checkbox"),
        new Array("elem4","checkbox"),
        new Array("elem5,elem6","radio")  //sztuczka:)
    );
    
    var result=elems.length;
    
    for(var i=0; i<elems.length; i++) {
        switch(elems[i][1]) {
            case "text": {
                if(document.getElementById(elems[i][0]).value == null || document.getElementById(elems[i][0]).value.length == 0) {
                    result--;
                }
            }
            break;
            case "checkbox": {
                if(document.getElementById(elems[i][0]).checked==false) {
                    result--;
                }
            }
            break;
            case "radio": {
                rad = elems[i][0].split(",",2);
                if((document.getElementById(rad[0]).checked || document.getElementById(rad[1]).checked) == false) {
                    result--;
                }
            }
            break;
        }
    }
    
    return (result == elems.length) ? true : false;
}
</script>
piwib
15.02.2006, 22:47:22
No bosko smile.gif Jeszcze jedno pytanie i już nie męcze. Jak do tego dodać by wpisywana zmienna w polu typu text była liczbą i w dodatku większą od 0 ?
revyag
16.02.2006, 16:47:21
Można dodać funkcję która będzie pod tym kątem validwać określone pole formularza.
Kod
function isNum(num) {
    if(!isNaN(document.getElementById(num).value) && parseInt(document.getElementById(num).value) > 0) {
        return true;
    } else {
        return false;
    }
}

i wtedy w głównej funkcji dajesz tak:
Kod
case "text": {
    if(!isNum(elems[i][0])) {
        result--;
     }
}
break;


Możesz dalej to rozbudowywać dodając do tablicy z elementami kolejne pola określające w jaki sposób dany element ma być validowany, czy np. jako liczba, czy tylko pod kątem wypełnienia (czy coś wpisano).
rafkam
17.03.2006, 10:18:08
Cytat(piwib @ 2006-02-07 02:13:27)
Kod
<script type="text/javascript">
function isNotEmpty(elem) {
 var str = document.getElementById(elem).value;
 if(str == null || str.length == 0) {
     return false;
 } else {
     return true;
 }
}
</script>

Witam
Jak wygladałby kodzik gdyby jeszcze możnabyłoby zweryfikować str pod wzgledem ilości wymaganych znaków, oraz poprawności - np: tylko litery i cyfry

pzdr.
kosheen2k
8.09.2006, 20:48:35
Witajcie! Przepraszam że odnawiam ten temat: będzie też na temat walidacji wpisanych danych, mam delikatny problemik, mianowicie, utworzyłem sobie taką funkcję:

[HTML] pobierz, plaintext 
  1. function validate_custinfo() //sprawdz dane kontrahenta
  2. 	{
  3. 		if (document.custinfo_form.first_name.value=="" || document.custinfo_form.last_name.value=="")
  4. 		{
  5. 			alert("Podaj swoje imię i nazwisko!");
  6. 			return false;
  7. 		}
  8. 		if (document.custinfo_form.email.value=="")
  9. 		{
  10. 			alert("Podaj swój email!");
  11. 			return false;
  12. 		}
  13. 		if (document.custinfo_form.zip.value=="")
  14. 		{
  15. 			alert("Podaj kod pocztowy!");
  16. 			return false;
  17. 		}
  18. 		if (document.custinfo_form.city.value=="")
  19. 		{
  20. 			alert("Podaj swoje miasto!");
  21. 			return false;
  22. 		}
  23. 		if (document.custinfo_form.phone.value=="")
  24. 		{
  25. 			alert("Podaj numer telefonu! Jest on konieczny do kontaktu z Tobą!");
  26. 			return false;
  27. 		}
  28.  
  29. 		return true;
  30. 	}
[HTML] pobierz, plaintext


I tak się jakoś dziwnie składa że albo ja mam głupią (tępą i już kompletnie zamotaną) głowę, albo to przeglądarki wszystkie są "INNE".

Piszę tak, ponieważ w podanej powyżej funkcji przeglądarka sprawdza tylko pierwsze trzy pola:

first_name, last_name, email, a reszty nie chce... gdy tylko wpiszę cokolwiek w tych polach, przeglądarka puszcza dalej, a powinna krzyczeć o miasto i telefon... :-/ powiedzcie co ja tutaj zrobilem źle? Bo nie widze, jestem ślepy, nie śpię trzecią noc z rzędu. Niech ktoś mi pomoże, BŁAGAM!

Pozdrawiam
ikioloak
8.09.2006, 22:58:34
Wrzuc kod formularza. Nie pisz:
Kod
document.custinfo_form.first_name.value

tylko
Kod
document.forms['custinfo_form'].elements['first_name'].value
kosheen2k
13.09.2006, 13:54:06
dobrze - zaraz spróbuję! :]
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.