[js] Formulier

[stevenh]

Hoi,
ik heb een formulier in HTML wat eerst met behulp van PHP werd uitgelezen en dan werd er wat met die gegevens gedaan. Nu moet alleen het formulier offline uitgelezen worden (het komt namelijk op CD-ROM) en dan is php dus geen optie. Wat ik mij nou afvroeg:
Ik heb een formulier met een boel checkboxes. Er zijn 12 blokken met elk ~10 checkboxes op deze manier genummerd:

d11 (deel 1, box 1)
d1210 (deel 12, box 10)

Nou wil ik dat als ik op de submit button klik dat ie in JS iets doet van dat ie telt hoeveel checkboxes er aangeklikt zijn en dan daarna met een if-constructie voor elk blok iets echo-ed als er bijv. meer dan 2 vakjes zijn aangekruist. Kunnen jullie mij hiermee helpen? Ik ben namelijk helemaal nieuw in javascript.

[Verwijderd]

voor het grootste deel zal het op dezelfde manier gaan als in php. verder dingen die je nodig hebt zijn denk ik

- document.getElementById(id-van-je-element); //retourneert een object (bv checkbox)
- obj.checked; / boolean die aangeeft of je object (mits checkbox) gechecked is)
- onsubmit = "checkform()" --> onsubmit eventhandler koppelen

verder heb je hier wellicht wat aan: http://www.w3schools.com/htmldom/dom_obj_checkbox.asp

[ Voor 15% gewijzigd door Verwijderd op 03-03-2005 12:15 ]

[stevenh]

kan je misschien een code voorbeeldtje geven wat ik zelf verder uit kan werken, want ik kan hier (nog) niet zo veel mee jammer genoeg...

[Verwijderd]

iets als:

code:

for (var j=1; j<=10; j++) {
  for (var i=1; i<=12; i++) {
    var cb = document.getElementById('d'+i+j);
    if (cb.checked) alert('deze is gechecked');
  }
}

checkboxes moeten dan wel dat nummer van jou als id hebben (niet (alleen) als naam)

[stevenh]

ok. wat is eigenlijk precies het verschil tussen id en naam van het object?!

[Verwijderd]

de naam krijg je terug in php, het id heb je wat aan met de functie getElementById (er is geen getElementByName bijvoorbeeld)

een id kan je aan alle elementen geven, een name alleen aan form elementen (plus nog wat)

[RM-rf]

stevenh schreef op donderdag 03 maart 2005 @ 15:02:
ok. wat is eigenlijk precies het verschil tussen id en naam van het object?!

een ID _Moet_ uniek zijn, een 'name' hoeft dat niet noodzakelijk, en is voornamelijk de methode waar een elementen binnen een collection wordt aangesproken...

Wat dat betreft, ik zou er zelf de voorkeur voor hebben om de document.forms['formnaam'].elements-collectie aan te srpeken, dat betreft alle input-elementen van een formulier..
deze kun je gewoon doorlopen en op basis van de type vragen of het een checkbox is, alswel of hij geselecteerd is

code:

function countCheckboxes() {
   var frmElms = document.forms['myForm'].elements
   var cntr = 0
   for ( var i=0; e = frmElms [i]; i++) {
      if (e.checked) {
          cntr++;
       }
   }
   return cntr;
}

[stevenh]

Ja, maar dat is niet mogelijk, aangezien alle delen los geteld moeten worden en het in één form zit...

[stevenh]

Verwijderd schreef op donderdag 03 maart 2005 @ 12:20:
iets als:

code:

for (var j=1; j<=10; j++) {
  for (var i=1; i<=12; i++) {
    var cb = document.getElementById('d'+i+j);
    if (cb.checked) alert('deze is gechecked');
  }
}

checkboxes moeten dan wel dat nummer van jou als id hebben (niet (alleen) als naam)

dit moet dan als functie? hoe geef je dat op in JS en hoe roep je die aan met een submit button? in <form action=..... ?

En dan wil ik dit (is gedeeltelijk php vrees ik kunnen jullie dat corrigeren)

code:

for (var j=1; j<=10; j++) {
$aantal = 0;  
for (var i=1; i<=12; i++) {
    var cb = document.getElementById('d'+i+j);
    if (cb.checked) $aantal++;
  }
if ($aantal >= '2') {
echo "Meer dan twee aangevinkt.";
}
}

[André]

code:

<script type="text/javascript">
function tsjek()
{
  for (var j=1; j<=10; j++)
  {
    var aantal = 0;  
    for (var i=1; i<=12; i++)
    {
      var cb = document.getElementById('d'+i+j);
      if (cb.checked) { aantal++; }
    }
  }
  if (aantal > 2)
  {
    echo "Meer dan twee aangevinkt.";
    return false;
  }
  return true;
}
</script>

<form onsubmit="return tsjek()">

  Hier je hele formulier

  <input type="submit" value="Toe maar" />
</form>

Zoiets?

Nu word het formulier alleen gesubmit als er hooguit 2 aangevinkt zijn.

[ Voor 46% gewijzigd door André op 03-03-2005 18:15 ]

[stevenh]

André, je bent geweldig!

[stevenh]

Nu heb ik er even dit van gemaakt, zodat hij elk deel apart checked, daar ze niet allemaal even lang zijn. Dit is de code voor deel 1:

code:

<script type="text/javascript">
function checkd1()
{
    var aantal = 0;  
    for (var i=1; i<=7; i++)
    {
      var cb = document.getElementById('d1'+i);
      if (cb.checked) { aantal++; }
    }
  if (aantal > 2)
  {
    alert('Meer dan twee aangevinkt');
    return false;
  }
  return true;
}
</script>

Dit werkt echter alleen in IE! Niet in FF!?

[beetle71]

stevenh schreef op donderdag 03 maart 2005 @ 19:40:
Nu heb ik er even dit van gemaakt, zodat hij elk deel apart checked, daar ze niet allemaal even lang zijn. Dit is de code voor deel 1:

code:

<script type="text/javascript">
function checkd1()
{
    var aantal = 0;  
    for (var i=1; i<=7; i++)
    {
      var cb = document.getElementById('d1'+i);
      if (cb.checked) { aantal++; }
    }
  if (aantal > 2)
  {
    alert('Meer dan twee aangevinkt');
    return false;
  }
  return true;
}
</script>

Dit werkt echter alleen in IE! Niet in FF!?

Heb je wel al je checkboxen een id gegeven en niet alleen een name?
IE gebruik namelijk als je geen id invult ook de name als id
FF doet het zoals het hoort en geeft dus niks terug als 'ie het id niet kan vinden.

[stevenh]

oh wat stom van mij! dank je wel!