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
$('#formid :radio:checked').length
egyébként kicsit bonyolultabb lenne.

var form = document.getElementById('formid'),      // A FORM
    inputs = form && form.getElementsByTagName('input'), // Az INPUT mezők
    i = inputs && inputs.length,                         // Számláló
    input,                                               // Aktuális INPUT mező
    checked = 0;                                         // Beállított radio gomb

if (i) {
  // Ha vannak INPUT mezők, akkor végigmegyünk rajtuk
  for (i -= 1; i >= 0; i -= 1)  {
    input = inputs[i];
    // Ha az input mező típusa radio, és be van pipálva, akkor megvan az elemünk.
    if (input.type == 'radio' && input.checked) {
      checked += 1;
    }
  }
}
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:
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<10) {
      alert("Kevés vagy eccsém'! :)");
    }
  }
}
//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:
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) {
És így tudod használni:
<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:

if (counter<3) {  
  if (window.confirm("Nem válaszoltál minden kérdésre! Folytatod?")) {
    return true;
  } else {
    return false;
  }
}
És a következő képpen hívod:
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>