Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]type="checkbox" - wymuszanie liczby zaznaczonych odpowiedzi
Forum PHP.pl > Forum > Przedszkole
demolkg
Witam,

bardzo prosze o pomoc w stworzeniu javaskryptu, który będzie wymuszał na użytkowniku zaznaczenie konkrentej ilości odpowiedzi w formularzu w polach typu checkbox.

Mam formularz, który skłąda się ze 150 pytań a w nim niektóre z pytań wymagają zaznaczenie wymuszonej ilości odpowiedzi. Cel, który chciałbym osiągnąć:

1) gdy użytkownik będzie chciał zaznaczyć w jednym z pytań więcej niż 3 odpowiedzi > allert javascript powiadamiający, że nie może tego zrobić po czym odpowiedzi, które zaznaczył w dalszym ciągu są zaznaczone.
2) po naciśnięciu "submit", w przypadku gdy odpowiedzi zaznaczonych w poszczególnych pytaniach jest mniej niż 3 alert informujący o tym w którym pytaniu należy "doznaczyć" odpowiedzi. Ważne jest jednak to aby po tym alercie odpowiedzi już wcześniej zaznaczone nie znikały.
3) gdy jest zaznaczona odpowiednia ilość odpowiedzi po prostu "submit" puszcza do xxx.php.

Mój kod HTML wygląda następująco:

  1.  
  2. <p class="ver c1 fs10"><b>Pytanie nr 2</b></p>
  3. <p>Lubię: (wybierz 3 odpowiedzi)</p>
  4.  
  5. <table width="600" style="font-family: Arial; font-size: 9pt;">
  6. <tr><td width="30">1.1</td><td><input type="checkbox" id="1.1" name="pyt1[]" value="1" /><label for="1.1">Odpowiedz 1</label></td></tr>
  7. <tr><td>1.2</td><td><input type="checkbox" id="1.2" name="pyt1[]" value="2" /><label for="1.2">Odpowiedz 2</label></td></tr>
  8. <tr><td>1.3</td><td><input type="checkbox" id="1.3" name="pyt1[]" value="3" /><label for="1.3">Odpowiedz 3</label></td></tr>
  9. <tr><td>1.4</td><td><input type="checkbox" id="1.4" name="pyt1[]" value="4" /><label for="1.4">Odpowiedz 4</label></td></tr>
  10. <tr><td>1.5</td><td><input type="checkbox" id="1.5 "name="pyt1[]" value="5" /><label for="1.5">Odpowiedz 5</label></td></tr>
  11. <tr><td>1.6</td><td><input type="checkbox" id="1.6 "name="pyt1[]" value="6" /><label for="1.6">Odpowiedz 6</label></td></tr>
  12. <tr><td>1.7</td><td><input type="checkbox" id="1.7 "name="pyt1[]" value="7" /><label for="1.7">Odpowiedz 7</label></td></tr>
  13.  
  14. <br />
  15.  
  16. <p class="ver c1 fs10"><b>Pytanie nr 1</b></p>
  17. <p>Lubię: (wybierz 3 odpowiedzi)</p>
  18.  
  19.  
  20. <table width="600" style="font-family: Arial; font-size: 9pt;">
  21. <tr><td width="30">1.1</td><td><input type="checkbox" id="3.1" name="pyt3[]" value="1" /><label for="3.1">Odpowiedz 0</label></td></tr>
  22. <tr><td>1.2</td><td><input type="checkbox" id="3.2" name="pyt2[]" value="2" /><label for="3.2">Odpowiedź 1</label></td></tr>
  23. <tr><td>1.3</td><td><input type="checkbox" id="3.3" name="pyt2[]" value="3" /><label for="3.3">Odpowiedź 2</label></td></tr>
  24. <tr><td>1.4</td><td><input type="checkbox" id="3.4" name="pyt2[]" value="4" /><label for="3.4">Odpowiedź 3</label></td></tr>
  25. <tr><td>1.5</td><td><input type="checkbox" id="3.5 "name="pyt2[]" value="5" /><label for="3.5">Odpowiedź 4</label></td></tr>
  26. <tr><td>1.6</td><td><input type="checkbox" id="3.6 "name="pyt2[]" value="6" /><label for="3.6">Odpowiedź 5</label></td></tr>
  27. <tr><td>1.7</td><td><input type="checkbox" id="3.7 "name="pyt2[]" value="7" /><label for="3.7">Odpowiedź 6</label></td></tr>
  28.  
  29. <br /><br />
  30.  
  31. <table width="600">
  32. <tr align="center">
  33. <td><input type=submit value="Zakończ kwestionariusz i prześlij odpowiedzi" /></td>
  34. <td><input type=reset value="Zresetuj formularz" /></td>
  35. </tr>
  36.  
  37. </form>
  38.  



Mój kod Java/Script wygląda następująco (nie ukrywam, że część skryptu jest po prostu ściągnięta z innych źródeł):

  1.  
  2. function check_form(el_id) {
  3. var el = document.getElementsByName("pyt1[]")
  4. var p = 0
  5. var submit = true
  6. var max = 3
  7. var min = 3
  8.  
  9. for(i=0; i < el.length; i++)
  10. {
  11. if(el[i].checked)
  12. {
  13. p++
  14. }
  15. }
  16.  
  17. if(p > max || p < min)
  18. {
  19. alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
  20. }
  21. else
  22. {
  23. if(submit == true)
  24. {
  25. el_id.action = 'action.html'
  26. el_id.submit()
  27. }
  28. else
  29. {
  30. // Do whatever here...
  31. }
  32. }
  33. }
  34.  


Będę wdzięczny za okazałą pomoc.
b4rt3kk
Jeśli nie masz nic przeciwko użyciu jQuery to znacznie by Ci to ułatwiło zadanie. Np.

  1. if ($('input[name="checkbox1"]').length < 3) alert('zaznacz co najmniej 3 odpowiedzi');
gorden
Cytat(b4rt3kk @ 3.07.2013, 00:01:03 ) *
Jeśli nie masz nic przeciwko użyciu jQuery to znacznie by Ci to ułatwiło zadanie. Np.

  1. if ($('input[name="checkbox1"]').length < 3) alert('zaznacz co najmniej 3 odpowiedzi');


zabrakło selektora checked:
[JAVASCRIPT] pobierz, plaintext
  1. $('input[name="checkbox1"]:checked')
[JAVASCRIPT] pobierz, plaintext
demolkg
Panowie, dziękuję za wasze odpowiedzi.

Nie znam jednak JavaScript sąt poja priśba, czy możecie podpowiedzieć jak wstawić to do mojego kodu oraz ew co z niego wyrzucić?
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.