ugrás a tartalomhoz

Bejelölt radio button számolása submit-ra

Kribali · 2010. Jún. 6. (V), 10.01
Sziasztok!

Készítettem egy tesztet/kvízt mysql és php-val. Ez nagyjából már működik is. Talán még annyi, hogy a kérdéseket véletlenszerűen veszem ki az adatbázisból, válaszolni radio button bejelölésével lehet.

A probléma:
Ha a 10 kérdésből nem jelölöm ki mindet, csak mondjuk 9-et, akkor az értékelés oldalon 9 eredményt kapok.
Arra gondoltam, küldéskor (onsubmit) megszámolom a bejelölt radio gombokat, ha kevesebb mint 10, akkor javascript window.confim()-mal figyelmeztetem a felhasználót. Ok, vagy mégsem.

A kérdésem:
Hogyan tudom megszámolni a bejelölt radio gombokat? esetleg a PHP $_POST tömböt?

Előre is köszönöm a segítséget!
‹ Szellem DIV CSS top frame with full scroll ›
 ■
1

jQuery

Poetro · 2010. Jún. 6. (V), 11.35
jQuery esetén ha a formod ID-je formid, akkor
  1. $('#formid :radio:checked').length  
egyébként kicsit bonyolultabb lenne.
  1. var form = document.getElementById('formid'),      // A FORM  
  2.     inputs = form && form.getElementsByTagName('input'), // Az INPUT mezők  
  3.     i = inputs && inputs.length,                         // Számláló  
  4.     input,                                               // Aktuális INPUT mező  
  5.     checked = 0;                                         // Beállított radio gomb  
  6.   
  7. if (i) {  
  8.   // Ha vannak INPUT mezők, akkor végigmegyünk rajtuk  
  9.   for (i -= 1; i >= 0; i -= 1)  {  
  10.     input = inputs[i];  
  11.     // Ha az input mező típusa radio, és be van pipálva, akkor megvan az elemünk.  
  12.     if (input.type == 'radio' && input.checked) {  
  13.       checked += 1;  
  14.     }  
  15.   }  
  16. }  
2

Kezdő vagyok

Kribali · 2010. Jún. 6. (V), 14.14
Először is köszönöm a gyors választ!

Sajna ez még kicsit bonyolult nekem így elsőre. jQuery sajna nem jó, mert nem tanultam. Ezért a javascript érdekelne. Kérhetnék esetleg valami leírásról linket?
Esetleg részletesebb magyarázatot?
Leegyszerűsítve a teszt így néz ki:

<form onsubmit=window.confirm('Nem válaszoltál minden kérdésre.Folytatod?') name='kerdesek' method='post' action='ertekeles.php'>
<strong>1. Kérdés?</strong>
<br />
<input type='radio' name='1' value='2' />Válsaz 1
<input type='radio' name='1' value='0' />Válasz 2
<input type='radio' name='1' value='1' />Válasz 3
<br />

<strong>2. Kérdés?</strong>
<br />
<input type='radio' name='1' value='2' />Válsaz 1
<input type='radio' name='1' value='0' />Válasz 2
<input type='radio' name='1' value='1' />Válasz 3
<br />

<strong>3. Kérdés?</strong>
<br />
<input type='radio' name='1' value='2' />Válsaz 1
<input type='radio' name='1' value='0' />Válasz 2
<input type='radio' name='1' value='1' />Válasz 3
<br />


<br /><br /><input name='torol' type='reset' id='button2' value='Űrlap törlése' />  
<input name='ertekel' type='submit' id='button' value='Értékelés' />
</form>


Azt szeretném megcsinálni,hogy onsubmitra megszámolom a válaszokat, ha kisebb mint itt pl 3, akkor window.confirm () fut le, amin választhat a felhasználó, hogy marad itt és kitölt a hiányzót, vagy megy tovább az értékelésre.

Millió köszönet !
3

jQuery

Poetro · 2010. Jún. 6. (V), 15.40
A jQuery is JavaScript. Nincs mögötte fekete mágia.
JavaScriptről rengeteg könyv jelent meg, ahogy jQuery-ról is. Érdemes talán venni egy könyvet indulásnak. Amennyiben csak a referencia érdekel, érdemes a Mozilla oldaláról indulni.
4

js

ironwill · 2010. Jún. 6. (V), 20.06
Szia!

És ez a kiválasztás működik?
Ha a "radio" gomboknak megegyezik a neve, akkor azok egy blokknak számítanak és azokból csak egy választható..

Amúgy a kérdésedre a válasz:
  1. function checkRadioNum(container) {  
  2.   if (container != null && typeof(document.getElementById(container)) == "object") {  
  3.     var inps = document.getElementById(container).getElementsByTagName("input");  
  4.     var counter = 0;  
  5.   
  6.     for (var i=0; i<inps.length; i++) {  
  7.       var inp = inps[1];  
  8.       var name = "";  
  9.   
  10.       if (inp.type == "radio" && name.toLowerCase() != inp.name.toLowerCase()) {  
  11.         name = inp.name;  
  12.   
  13.         counter++;  
  14.       }  
  15.     }  
  16.   
  17.     if (counter<10) {  
  18.       alert("Kevés vagy eccsém'! :)");  
  19.     }  
  20.   }  
  21. }  
//a kódot nem teszteltem, de így működnie kell

Tehát a felső kód végig megy a megadott "container" input elemein és a "radio" gombokat a nevük szerint külön vizsgálja (ezért is lenne fontos név alapján külön blokkokba szedni) és megszámolja, hogy ha tíznél kisebb, akkor alert-et dob.

üdv, Gábor
5

És hogyan rakjam be?

Kribali · 2010. Jún. 6. (V), 21.53
Köszi, nagyon rendesek vagytok, hogy segítetek.
Igazad van, azért azonosak a nevek mert másolgattam. Nem figyeltem, bocsi.
Sajnos nem működik, szerintem nem jól raktam be a függvényt. Hogyan kell?
És nem alertet szeretnék, hanem ha akar, tovább tudjon menni .
<html>
<head>
<script language="JavaScript" type="text/javascript">
 function checkRadioNum(container) {  
   if (container != null && typeof(document.getElementById(container)) == "object") {  
     var inps = document.getElementById(container).getElementsByTagName("input");  
     var counter = 0;  
   
     for (var i=0; i<inps.length; i++) {  
       var inp = inps[1];  
      var name = "";  
   
       if (inp.type == "radio" && name.toLowerCase() != inp.name.toLowerCase()) {  
         name = inp.name;  
   
         counter++;  
       }  
     }  
   
     if (counter<3) {  
       alert("Kevés vagy eccsém'! :)");  
     }  
   }  
 }
</script>
</head>

<body>
<br />
<strong>1. Kérdés?</strong><br />
<form onsubmit=checkRadioNum() name='kerdesek' method='post' action='ertekeles.php'>
<input type='radio' name='8' value='3' />Válasz 1<br />
<input type='radio' name='8' value='0' />Válasz 2<br />
<input type='radio' name='8' value='2' />Válasz 3<br />

<strong>2. Kérdés?</strong><br />
<input type='radio' name='1' value='0' />Válasz 1<br />
<input type='radio' name='1' value='1' />Válasz 2<br />
<input type='radio' name='1' value='2' />Válasz 3<br />

<strong>3. Kérdés?</strong><br />
<input type='radio' name='15' value='0' />Válasz 1<br />
<input type='radio' name='15' value='1' />Válasz 2<br />
<input type='radio' name='15' value='3' />Válasz 3<br />

<br /><br /><input name='torol' type='reset' id='button2' value='Űrlap törlése' />   <input name='ertekel' type='submit' id='button' value='Értékelés' />
</form>

</body>
</html>
8

javítás

ironwill · 2010. Jún. 6. (V), 22.48
Szia!

Ezeket javítottam:
  1. for (var i=0; i<inps.length; i++) {    
  2.   var inp = inps[i];    
  3.   var name = "";  
  1. if (inp.type == "radio"&& name.toLowerCase() != inp.name.toLowerCase() && inp.checked) {  
És így tudod használni:
  1. <form id="formContainer" onsubmit="checkRadioNum('formContainer')" name="kerdesek" method="post">  
üdv, Gábor
9

Még egy pici hiányzik

Kribali · 2010. Jún. 7. (H), 09.29
Köszönöm Gábor, így jó lesz, működik !

Már csak annyi hiányzik, ha itt
if (counter<3) {  
       window.confirm("Nem válaszoltál minden kérdésre! Folytatod?");

a mégse gomb megnyomásakor maradjon az űrlapon, és a kitöltött gombok is maradjanak bejelölve. Kerestem ilyet, de nem találtam.

Köszönöm!
11

return false

ironwill · 2010. Jún. 7. (H), 18.42
Szia!

Js:
  1. if (counter<3) {    
  2.   if (window.confirm("Nem válaszoltál minden kérdésre! Folytatod?")) {  
  3.     return true;  
  4.   } else {  
  5.     return false;  
  6.   }  
  7. }  
És a következő képpen hívod:
  1. onsubmit="return checkRadioNum('formContainer')"  
üdv, Gábor
6

"checked" ?

yasp87 · 2010. Jún. 6. (V), 22.14
Szia!

Az nem jó megoldás ha a válaszok közül a legelsőt, mindig alapértelmezetten bejelölöd?
<input type='radio' name='1' value='2' checked/>válasz1<br />
7

dinamikus űrlap

Kribali · 2010. Jún. 6. (V), 22.34
Sajna a checked nem jó, mert mindíg más az űrlap (PHP MySql), és teszt lévén előre bejelölni sem akarok egy választ sem, mert megtévesztő lenne.

Azért köszi!
10

Megoldva

Kribali · 2010. Jún. 7. (H), 18.24
Köszönöm a segítséget, itt a végleges megoldás:
<html>
<head>
<script language="JavaScript" type="text/javascript">
 function checkRadioNum(container) {  
   if (container != null && typeof(document.getElementById(container)) == "object") {  
     var inps = document.getElementById(container).getElementsByTagName("input");  
     var counter = 0;  
   
     for (var i=0; i<inps.length; i++) {  
       var inp = inps[i];  
      var name = "";  
   
       if (inp.type == "radio"&& name.toLowerCase() != inp.name.toLowerCase() && inp.checked) {  
         name = inp.name;  
   
         counter++;  
       }  
     }  
   
     if (counter<3) {  
       if (!window.confirm("Nem válaszoltál minden kérdésre! Folytatod?"))
{
return false;
}
         
         
     }  
   }  
 }
</script>
</head>

<body>
<br />
<strong>1. Kérdés?</strong><br />
<form id="formContainer" onsubmit="return checkRadioNum('formContainer')" name="kerdesek" method='post' action='ertekeles.php'>
<input type='radio' name='8' value='3' />Válasz 1<br />
<input type='radio' name='8' value='0' />Válasz 2<br />
<input type='radio' name='8' value='2' />Válasz 3<br />

<strong>2. Kérdés?</strong><br />
<input type='radio' name='1' value='0' />Válasz 1<br />
<input type='radio' name='1' value='1' />Válasz 2<br />
<input type='radio' name='1' value='2' />Válasz 3<br />

<strong>3. Kérdés?</strong><br />
<input type='radio' name='15' value='0' />Válasz 1<br />
<input type='radio' name='15' value='1' />Válasz 2<br />
<input type='radio' name='15' value='3' />Válasz 3<br />

<br /><br /><input name='torol' type='reset' id='button2' value='Űrlap törlése' />   <input name='ertekel' type='submit' id='button' value='Értékelés' />
</form>

</body>
</html>