PHP Checkbox mit JS prüfen

[akonze]

Hallo zusammen,

Ich programmiere derzeit einen Formulargenerator in PHP und bin dabei auf ein schwieriges Problem gestoßen:

Vorspiel: Wahlweise sollen Feldeingaben durch Javascript überprüft werden. Leider kenne ich mich in JS sehr wenig aus und habe daher eine Standardlösung:

function akovalidate() {
  var form = document.akoform;
  if (form.formid.value == "") {
    alert( "FormID is missing." );
  } else if (form.AKF1.value == "") {
    alert( "Bitte Feld 1 ausfüllen" );
  } else if (form.AKF2.value == "") {
    alert( "Bitte Feld 2 ausfüllen" );
...
  } else {
    document.akoform.submit();
  }
}

Ich fange den Submit Button per onclick ab und leite dann an die obige Funktion weiter. Die entsprechenden Prüfabfragen werden in einer PHP Schleife in die Funktion geschrieben (also die IF1 - ALERT1, IF2 - ALERT2, usw.. Zeilen). Eigentlich klappt das ganz gut...

Problem: Erstelle ich ein Formularfeld mit mehreren Checkboxen, versagt die obige Funktion. In PHP wird der Name des Feldes bei mehreren Checkboxen als Array angelegt (also: name=feldname[]). Ich weiß leider nicht, wie ich es realisieren soll. Scheinbar kann JS mit der obigen Funktion nicht prüfen, ob mindestens eine der Checkboxen angeklickt ist.

Obwohl ich hier im Forum schon auf einige interessante Artikel diesbezüglich gestoßen bin, habe ich doch nicht das richtige für mich gefunden (oder habe es wegen mangelnder Kenntnis nicht gemerkt).

Es wäre nett, wenn ihr JS Profis mir helfen würdet.

Mittelfristig möchte ich auch gerne die ganze Funktion so modifizieren, daß ein Felbasierter Prüf-Prozessor die für das Feld notwendige Javascript Abfrage enthält (also Email Felder nicht nur auf Inhalt, sondern auch auf die korrekte Adresse geprüft werden).

 

[Fabian H]

Hallo,

das kannst du mit einer for-Schleife machen:

function checkboxChecked(a_sForm, a_sName)
{
    oCheckbox = window.document.forms[a_sForm].elements[a_sName];

    for (i=0; i<oCheckbox.length; i++) {
        if (oCheckbox[i].checked) {
            return true;
        }
    }

    return false;
}

Dieser Funktion uebergibt man den Namen des Formulares und den, der Checkboxen
und sie gibt true zurueck, falls eine der Checkboxen abgehakt ist.

Beispiel:

if (!checkboxChecked(akoform, checkboxname)) {
    window.alert('Bitte eine Checkbox der Gruppe xy abhaken.');
}

 

[akonze]

Hallo,

erstmal danke für die schnelle Antwort. Ich habe das eben mal eingebaut und bekomme nun einen "Feldname ist undefiniert" Fehler. Am besten ich poste hier mal kurz den entsprechenden Code. Zunächst der JS Code, den mein PHP Script generiert hat:

<script language='javascript' type='text/javascript'>
  function checkboxChecked(a_sForm, a_sName) {
    oCheckbox = window.document.forms[a_sForm].elements[a_sName];
    for (i=0; i<oCheckbox.length; i++) {
      if (oCheckbox[i].checked) { return true; }
    }
    return false;
  }
  function akovalidate() {
    if (document.akoform.formid.value == ""){
      window.alert( "FormID is missing." );
    } else if (!checkboxChecked(akoform, AKF3)) {
      window.alert( "Please fill all required fields: Test" );
    } else {
      document.akoform.submit();
    }
  }
</script>

Noch den HTML Code aus dem Formular:

<form action='index.php?option=com_akoforms&func=processform&Itemid=' name='akoform' id='akoform' method='post' enctype='multipart/form-data'>
  <input type='hidden' value='1' name='formid'>
  <input type='checkbox' name='AKF3[]' value='11111' style='' />11111<br />
  <input type='checkbox' name='AKF3[]' value='22222' style='' />22222<br />
  <input type='checkbox' name='AKF3[]' value='33333' style='' />33333<br />
  <input type='checkbox' name='AKF3[]' value='44444' style='' />44444<br />
  <input type='checkbox' name='AKF3[]' value='55555' style='' />55555<br />
  <input type='button' name='send' value='Send' class='button' onclick='akovalidate()' />
  <input type='reset' value='Clear' name='reset' class='button'>
</form>

 

[Fabian H]

Setz die beiden Variablen mal in Quotes:

    } else if (!checkboxChecked('akoform', 'AKF3')) {

 

[akonze]

Hi,

Sorry, das war dumm von mir, aber bin leider in Javascript nicht fit. Trotzdem war aber dies noch nicht die endgültige Lösung. Jetzt spring JS zwar in die Funtkion rein sobald ich auf 'Send' klicke, aber bringt trotzdem einen Fehler:

'oCheckbox.length' ist Null oder kein Objekt

Habe nur die Apostroph's hinzugefügt, ansonsten ist alles beim alten.

 

[akonze]

Weiß denn niemand hier eine Antwort auf dieses Problem? Bitte helft mir doch dabei.

 

[mukay]

JS vs. PHP

ich habe das gleiche Problem. Es liegt am Namen, der für die Gruppe vergeben wird. Da spielen JS und PHP nicht ordentlich zusammen. Wenn man für eine Gruppe von Checkboxen den selben Namen vergibt (ohne []) kennt dies Javascript als Feld, php jedoch nicht. PHP kennt das nur als Feld mit den [] was ich auch sauberer finde. Ich habe das Problem dass ich mit einem link alle checkboxen auf einmal anklicken lassen möchte. Dies funktioniert anscheinend nur über Javascript, wo ich fast mit der selben function wie oben von jedem feldelement die checked komponente auf true setze. Um die Auswahl jedoch nach einem submit mit php auswerten zu können brauche ich den Feldtyp mit [] bei den input tags vom Formular. Mich würde jetzt auch interessieren ob man die JS function so schreiben kann, dass sie auch mit den [] arbeitet.

 

[Sven Mintel]

@akonze

beim Checkbox-Namen fehlen die eckigen Klammern:

function akovalidate() {
    if (document.akoform.formid.value == ""){
      window.alert( "FormID is missing." );
    } else if (!checkboxChecked('akoform','AKF3[]')) {
      window.alert( "Please fill all required fields: Test" );
    } else {
      document.akoform.submit();
    }
  }

@mukay

Du kannst die Klammern auch in Javascript verwenden....

allerdings darfst du dann nicht so auf diese Elemente zugreifen:

document.formularName.feldName[].eigenschaft

sondern musst dies so tun:

document.formularName.elements['feldName[]'].eigenschaft

..wie Fabian das in seinem Beispiel tut.

In jedem Fall muss ein Element mit seinem kompletten Namen angesprochen werden.... dazu gehören auch die Klammern(falls vorhanden)


Ansonsten ....vielleicht ist dieses Tutorial ja was für euch.