markierte Checkboxen zählen

F

Florian123

Mitglied
Hallo an alle,

ich habe ein dynamisches Formular erstellt und möchte gerne die markierten Checkboxen zählen und per E-Mail versenden.

Wie und Wo muss ich die Überprüfung starten?

Wie lassen sich die Checkboxen zählen und ausgeben?

(Ich habe gehört, dass man die gezählten Checkboxen im Array ausgeben kann, leider weiß ich nicht wie das funktioniert!)

Ich würde mich sehr freuen, wenn Ihr mir dabei helfen könntet.

Vielen Dank im Voraus!

MFG

Florian

Anbei ein Ausschnitt aus meinem Quellcode:
Code: 
function kategorie_anzeigen(f) 
{
  var kategorie = f.kategorien.selectedIndex;
  document.getElementById('unterpunkte').innerHTML='';
  for (var i=1; i<beschriftung[kategorie].length; i++) 
  {
    document.getElementById('unterpunkte').innerHTML+='<input type="checkbox" name="unterpunkte" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
    
  }
}

function seite_laden(f){
   var kategorie = f.kategorien.selectedIndex;
   var unterpunkt = f.unterpunkte.selectedIndex;
}
//--></script>
</head>
<body>
<h1>Navigation mit Auswahllisten</h1>
<form name="input" action="ausgabe2.php" method="post">
<select name="kategorien"
onchange="kategorie_anzeigen(this.form);">
   <option>Bitte auswählen</option>
   <option>Kategorie 1</option>
   <option>Kategorie 2</option>
   <option>Kategorie 3</option>
</select>
<br />
<br />
<div id="unterpunkte"></div>
<p>
<input type="submit" value="Senden">
</form>
</body>
</html>
 
Hi,

zunächst solltest du in deiner HTML-Ausgabe den Name der Checkboxen mit eckigen Klammern abschliessen (name="unterpunkte[]". So erhälst du serverseitig - also in deinem Fall für PHP - ein Array, das du auswerten kannst.

Willst du dennoch die Checkboxen auf der Clientseite zählen und übermitteln, bietet sich ein verstecktes Feld an, in dem du die Anzahl hinterlegen kannst.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function checkBoxes(objForm){
  // Alle Input-Elemente im Formular ermitteln
  var arrInput = objForm.getElementsByTagName("input");
  var arrCB = new Array();

  // Input-Elemente durchlaufen
  for(var i=0; i<arrInput.length; i++){
    // Falls es sich um eine Checkbox handelt und diese markiert ist -> in CB-Array schreiben
    if((arrInput[i].type=="checkbox") && (arrInput[i].checked)){
      arrCB[arrCB.length] = arrInput[i];
    }
  }

  // Länge in verstecktes Feld eintragen
  objForm.hiddenLength.value = arrCB.length;

  return arrCB;
}


var beschriftung = [[], ['0.0', '0.1'], ['1.0', '1.1', '1.2'], ['2.0', '2.1']];
function kategorie_anzeigen(f){
  var kategorie = f.kategorien.selectedIndex;
  document.getElementById('unterpunkte').innerHTML = '';
  for (var i=0; i<beschriftung[kategorie].length; i++){
    document.getElementById('unterpunkte').innerHTML+='<input type="checkbox" name="unterpunkte[]" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
  }
}

 //-->
</script>
</head>
<body>
<form name="input" action="ausgabe2.php" method="post" onsubmit="checkBoxes(this);">
  <select name="kategorien" onchange="kategorie_anzeigen(this.form);">
    <option>Bitte auswählen</option>
    <option>Kategorie 1</option>
    <option>Kategorie 2</option>
    <option>Kategorie 3</option>
  </select>
  <input type="hidden" name="hiddenLength" value="-1">
  <br /><br />
  <div id="unterpunkte"></div>
  <p><input type="submit" value="Senden"></p>
</form>
</body>
</html>
Das Formular ruft im onsubmit-Event, also bevor es abgesendet wird, eine Funktion auf. Diese durchläuft alle im Formular enthaltenen Input-Elemente, prüft diese, ob es sich um markierte Checkboxen handelt und schreibt sie im Erfolgsfall in ein Array. Die Anzahl aller markierten Boxen wird dann ins versteckte Feld übertragen.

Ciao
Quaese
 
Hallo Quaese,

vielen vielen Dank für deine Hilfe!

Der Quellcode funktioniert einwandfrei!

Leider habe ich mich falsch ausgedrückt bei meiner Problematik. Ich möchte gerne die Checkboxen zählen und in der Ausgabe bzw. in der Mail die angehackten Checkbox - Werte ausgegeben haben.

Da man mehrere Checkboxen anhacken kann, muss in der Ausgabe eine Liste mit den angehackten Checkboxen erstellt werden!

Dennoch vielen Dank für die Hilfe!

P.S. auf der Hauptseite (index.html) möchte ich gerne noche eine Abfrage einbauen. Und zwar soll bei z.B. Punkt 2.2 ein Formularübersicht unter den Checkboxen angezeigt werden, sonst soll es im Hintergrund (unsichtbar) sein.

Geht das überhaupt im Zusammenhang mit JavaScript und dynamischen Checkboxen?

Wie kann ich die Abfrage aufbauen?

MFG

Florian
 
Hi,

eventuell reden wir tatsächlich aneinander vorbei. Aber was du letztendlich serverseitig, also in der ausgabe2.php mit den übermittelten Werten anstellst, ist clientseitig nicht zu beeinflussen.

Wenn es darum geht, im PHP-Script eine Liste zu erstellen, die anschliessend per Mail versendet werden kann, könntest du wie folgt vorgehen.
Code: 
<?php
  echo("<p>Es wurde <b>". $_POST['kategorien'] . "</b> ausgewählt.</p>");
  if(count($_POST['unterpunkte'])){
    echo("<p>Folgende <b>" . $_POST['hiddenLength'] . "</b> Werte wurden ausgewählt:</p>\n");
    echo("<ol>\n");
    foreach($_POST['unterpunkte'] as $strKey => $strEntry){
      echo("<li>".$strEntry."</li>\n");
    }
    echo("</ol>\n");
  }else{
    echo("Es wurden <b>keine</b> Unterpunkte gewählt.\n");
  }
?>

Zu deiner zweiten Anfrage: Vorausgesetzt, die Checkbox, die für das Einblenden verantwortlich sein soll, besitzt im value-Attribut den Wert "2.2", könnte folgender Ansatz helfen.

JS:
Code: 
function kategorie_anzeigen(f){
  var kategorie = f.kategorien.selectedIndex;
  document.getElementById('unterpunkte').innerHTML = '';
  for (var i=0; i<beschriftung[kategorie].length; i++){
    document.getElementById('unterpunkte').innerHTML+='<input type="checkbox" onclick="toggleInfo(this);" name="unterpunkte[]" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
  }
}

function toggleInfo(objCB){
  var strComp = "2.2";
  var strID   = "infoID";

  document.getElementById(strID).style.display = ((objCB.value == strComp) && objCB.checked)? "" : "none";
}

HTML:
Code: 
<div id="infoID" style="display: none;">Ich bin das Info-DIV für Punkt 2.2!</div>

Erklärung
Beim Anlegen der Checkboxen wird im onclick-Event eine Funktion aufgerufen, die prüft, ob es sich um die gewünschte Box handelt und ob diese auch angewählt ist. Im Erfolgsfall wird das versteckte Info-DIV mit der ID infoID eingeblendet, in allen anderen Fällen ausgeblendet.

Das Ganze kann sicherlich noch ausgefeilt werden, als Ansatz sollte es jedoch ausreichen.

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hallo Quaese,

vielen vielen Dank für promte Hilfe!

Die beiden Quellcodes haben mir sehr geholfen! Da ich leider in den Bereich JavaScript nicht alzu viele Erfahrungen habe und die Foren, Google usw. mir nicht weiter helfen konnten, hoffe ich, du kannst mir zum letzten mal helfen!

Das Div = InfoID verschwindet immer, wenn ich nach den Punkt 2.2 eine andere Checkbox anklicke.

Ist es möglich, dass wen ich die Checkbox 2.2 angeklickt habe, dass das DIV die ganze Zeit angezeigt wird?

Bei der Übermittlung kommt der Fehler auf, dass nix angezeigt wird!

Die IF - Anweisung ist einfach SUUPER! Leider bekomme ich es nicht hin, dass in der Mail die Liste angezeigt wird. Ich bekomme lediglich eine Fehlermeldung "syntax error, unexpected T_IF " oder es wird die IF - Anweiung mit übermittelt also als TExt und nicht als Code.

Ich kann nur sagen, VIELEN VIELEN Dank für deine Hilfe!

MFG

Florian

index.html
Code: 
function checkBoxes(objForm){
  // Alle Input-Elemente im Formular ermitteln
  var arrInput = objForm.getElementsByTagName("input");
  var arrCB = new Array();

  // Input-Elemente durchlaufen
  for(var i=0; i<arrInput.length; i++){
    // Falls es sich um eine Checkbox handelt und diese markiert ist -> in CB-Array schreiben
    if((arrInput[i].type=="checkbox") && (arrInput[i].checked)){
      arrCB[arrCB.length] = arrInput[i];
    }
  }

  // Länge in verstecktes Feld eintragen
  objForm.hiddenLength.value = arrCB.length;

  return arrCB;
}

  //Verbindung der Unterpunkte mit der Kategorie
var beschriftung = [[], ['0.1', '0.2'], ['1.1', '1.2', '1.3'], ['2.1', '2.2']];
function kategorie_anzeigen(f){
  var kategorie = f.kategorien.selectedIndex;
  document.getElementById('unterpunkte').innerHTML = '';
  for (var i=0; i<beschriftung[kategorie].length; i++){
    document.getElementById('unterpunkte').innerHTML+='<input type="checkbox" onclick="toggleInfo(this)" name="unterpunkte[]" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
  }
}

function toggleInfo(objCB){
  var strComp = "2.2";
  var strID   = "infoID";

  document.getElementById(strID).style.display = ((objCB.value == strComp) && objCB.checked)? "" : "none";
}
 //-->
</script>
</head>
<body>
<form name="input" action="ausgabe2.php" method="post" onsubmit="checkBoxes(this);">
  <select name="kategorien" onchange="kategorie_anzeigen(this.form);">
    <option>Bitte auswählen</option>
    <option>Buchaltung</option>
    <option>Rechtsabteilung</option>
    <option>Shop</option>
  </select>
  <input type="hidden" name="hiddenLength" value="-1">
  <br /><br />
  <div id="unterpunkte"></div>
  <div id="infoID" style="display: none;">Text (Formular)!</div>
  <p><input type="submit" value="Senden"></p>
</form>
</body>
</html>

ausgabe2.php
Code: 
<body>
  
  <h1>Die Daten wurden &uuml;bermittelt an die IT - Infrastruktur!</h1>
  <?php
  
  echo"<p>Es wurde <b>". $_POST[kategorien] . "</b> ausgewählt.</p>";
  
  if(count($_POST[unterpunkte]))
  {
  echo"<p>Folgende <b>" . $_POST[hiddenLength] . "</b> Werte wurden ausgewählt:</p>\n";
  echo"<ol>\n";
    foreach($_POST[unterpunkte] as $strKey => $strEntry)
    {
      echo"<li>".$strEntry."</li>\n";
    }
  echo"</ol>\n";
    }
     else
    {
      echo"Es wurden <b>keine</b> Unterpunkte gewählt.\n";
    }
  

        $empfaenger = "f.gaede@orlen-deutschland.de"; 
        $betreff = "Checkboxen";
        $text = "<p>Es wurde <b> $_POST[kategorien]</b> ausgewählt.</p>".if(count($_POST[unterpunkte]))."{<p>Folgende <b> $_POST[hiddenLength]</b> Werte wurden ausgewählt:</p><ol>foreach($_POST[unterpunkte] as $strKey => $strEntry){<li>$strEntry</li>}</ol>}else{Es wurden <b>keine</b> Unterpunkte gewählt.}";

          $foption = "From: TEST\r\n";
          $foption .= "Content-Type: text/html\r\nContent-Transfer-Encoding: 8bit\r\n";
          $foption .= "X-Mailer: PHP ". phpversion();
        
        mail($empfaenger, $betreff, $text, $foption);   
       ?>

    </body>
 
Hi,

das erste Problem lässt sich lösen, indem du beim Erstellen der Checkboxen derjenigen mit dem Value 2.2 eine ID (infoBoxID) zufügst, anhand derer du immer prüfen kannst, ob die Box gechecked ist.

In der Prüffunktion muss nun die Bedingung erweitert werden. Da diese Prüfung auf das Element mit der ID infoBoxID allerdings immer ausgeführt, auch wenn dieses Element gar nicht existiert, muss die Bedingung in einen try-catch-Block verpackt werden.
Code: 
var beschriftung = [[], ['0.0', '0.1'], ['1.0', '1.1', '1.2'], ['2.0', '2.1', '2.2']];
function kategorie_anzeigen(f){
  var kategorie = f.kategorien.selectedIndex;

  var strID   = "infoID";
  document.getElementById(strID).style.display = "none";

  document.getElementById('unterpunkte').innerHTML = '';
  for (var i=0; i<beschriftung[kategorie].length; i++){
    var strInsert = (beschriftung[kategorie][i]=="2.2")? " id=\"infoBoxID\"" : "" ;
    document.getElementById('unterpunkte').innerHTML+='<input type="checkbox"'+strInsert+' onclick="toggleInfo(this);" name="unterpunkte[]" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
  }
}

function toggleInfo(objCB){
  var strComp = "2.2";
  var strID   = "infoID";

  try{
    document.getElementById(strID).style.display = (document.getElementById("infoBoxID").checked ||((objCB.value == strComp) && objCB.checked))? "" : "none";
  }catch(objExc){}
}

Beim Auswertungsscript erstellst du am besten gleich innerhalb der if-Anweisung den Ausgabetext. Diesen kannst du dann so oft ausgeben wie du möchtest.
Code: 
<body>
  <h1>Die Daten wurden &uuml;bermittelt an die IT - Infrastruktur!</h1>
  <?php

  $text = "<p>Es wurde <b>". $_POST[kategorien] . "</b> ausgewählt.</p>";

  if(count($_POST[unterpunkte])){
    $text .= "<p>Folgende <b>" . $_POST[hiddenLength] . "</b> Werte wurden ausgewählt:</p>\n";
    $text .= "<ol>\n";
    foreach($_POST[unterpunkte] as $strKey => $strEntry)
    {
      $text .= "<li>".$strEntry."</li>\n";
    }
    $text .= "</ol>\n";

    echo($text);
  }else{
    echo"Es wurden <b>keine</b> Unterpunkte gewählt.\n";
  }

  $empfaenger = "f.gaede@orlen-deutschland.de";
  $betreff = "Checkboxen";

  $foption = "From: TEST\r\n";
  $foption .= "Content-Type: text/html\r\nContent-Transfer-Encoding: 8bit\r\n";
  $foption .= "X-Mailer: PHP ". phpversion();

  //mail($empfaenger, $betreff, $text, $foption);
  echo("<hr>" . $empfaenger . "<br>" . $betreff . "<br>" . $text . "<br>" . $foption);
  ?>
</body>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück