✔ Dynamische RadioButton Liste überprüfen

[xloouch]

Hallo zusammen

Ich hab ein kleines JavaScript Problem.

Also zur Beschreibung:

Ich generiere über PHP eine Form, welche mit einer dynamischen Anzahl von Radio-Buttons ausgestattet ist.

Nun will ich vor dem Submit abchecken, ob ein Radiobutton ausgewählt wurde. Falls ja-> return true..
falls nein -> return false (mit fehlermeldung)

Eigentlich müsste darin eingeschlossen sein, dass es noch eine Reihe von dynamischen Checkboxen gibt ( da es im Bereich der Checkboxen eine multiple Auswahlmöglichkeit gibt).

Hier ist mein bestehende JavaScript Code um noch eine Text-Area zu checken:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
function validate_form() {
  validity = true; // assume valid
  if (!check_empty(document.form.message.value)){ validity = false; alert('The Message is empty'); }
  return validity;
}
function check_empty(text) {
  return (text.length > 0); // gibt false zurück wenn leer
}

// -->

Kann mir jemand einen Ansatz dafür liefern oder einen Tipp geben?

Vielen Dank im Voraus für eure Hilfe

 

[Quaese]

Hi,

mit getElementsByTagName erhälst du Zugriff auf alle Elemente mit dem als Parameter übergebenen Tagname. Damit kannst du dir ein Array, bestehend aus allen input-Elemeten, erstellen.

Dieses Array wird in einer for-Schleife durchlaufen. Mit Hilfe der Eigenschaft type wird überprüft, ob es sich um einen Radiobutton handelt und ob dieser gesetzt ist. Wird ein gesetzter gefunden, so wird ein boolsches Testflag auf true gesetzt und die Schleife verlassen.

Beispiel:

function validate_radio(){
  var blnRet = false;
  var arrInputs = document.form.getElementsByTagName("input");

  for(var i=0; i<arrInputs.length; i++){
    // Falls es sich um einen Radiobutton handelt und dieser gesetzt ist
    // -> als validiert kennzeichnen und Schleife verlassen
      if((arrInputs[i].type.toLowerCase() == "radio") && arrInputs[i].checked){
    	blnRet = true;
    	break;
    }
  }

  return blnRet;
}

Voraussetzung ist ein existierendes Formular mit dem Name form.

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[xloouch]

Hallo Quaese

Danke für Deine Antwort..

Habe jetzt mal deinen Code so übernommen und es in mein validate_form Script eingebaut.

function validate_form() {
  validity = true; // assume valid
  if (!check_empty(document.form.message.value)){ validity = false; alert('The Message is empty'); }
  if (!validate_radio()){validity=false; alert('You haven\'t choosed an User to send a file to');}
  return validity;
}

Ich hoffe das geht so.. ( bin nich so der JavaScript God wie du )

Jetzt kommt die andere Frage.. Kann ich dementsprechend (Mit deinem Script) auch die Checkboxen abfragen?

Danke im Voraus für deine / eure Hilfe

 

[Chumper]

Dafür müsstest du "radio" in Quaeses Post vermutlich durch "check" oder "checkbox" ersetzen.

 

[xloouch]

Ok.. danke

Jetzt noch ein kleines Problem..

bei "getElementsByTagName()" bezieht sich auf das Input-Field, oder auf den Namen des Input Fields

Mein Inputfield wurde eben nach "group" benannt.. (also name="group" )

Habe es jetzt getestet.. aber leider funktionierte es nicht :-(

 

[Chumper]

getElementsByTagName() bezieht sich auf den Tag, in diesem Fall auf den Input-tag.
Wenn du alle p-Elemente auslesen wolltest, hättest du das hier geschrieben:
getElementsByTagName('p')

Schau mal hier

Alternativ dazu gibt es noch getElementsByName()

Zu deinem Code:

function validate_checkbox(){
  var blnRet = false;
  var arrInputs = document.form.getElementsByTagName("input");

  for(var i=0; i<arrInputs.length; i++){
    // Falls es sich um einen Radiobutton handelt und dieser gesetzt ist
    // -> als validiert kennzeichnen und Schleife verlassen
      if((arrInputs[i].type.toLowerCase() == "checkbox") && arrInputs[i].checked){
    	blnRet = true;
    	break;
    }
  }

  return blnRet;
}

Das wäre Quaeses Code für Checkboxen.

Was du geschrieben hast, muss jetzt noch erweitert werden.

function validate_form() {
  validity = true; // assume valid
  if (!check_empty(document.form.message.value)){ validity = false; alert('The Message is empty'); }
  if (!validate_radio()){validity=false; alert('You haven\'t choosed an User to send a file to');}
 if (!validate_checkbox()){validity=false; alert('Irgendeine Nachricht');}
  return validity;

}

Allerdings überprüft das Skript nur, ob ein Checkboxfeld angeklickt wurde, aber nicht wieviele.

 

[xloouch]

Dass mehrere Angeklickt sein müssen, muss nicht unbedingt sein. Es soll nur festgestellt werden, ob überhaupt etwas angeklickt wurde..

Danke dir für die Hilfe. Werde es gleich in den Source einarbeiten und kontrollieren.

 

[xloouch]

Hallo zusammen

Habe gestern bis heute getestet.. Aber leider funktioniert das ganze nicht..

Habe es schon probiert zu ändern, oder anzupassen. Aber hat nichts gebracht.

Gibt es noch eine andere Möglichkeit, oder benötigt ihr den php-Code, welches die radio's und checkboxen erstellt?

Danke für die Umstände

 

[Chumper]

Was gibt er denn für Fehlermeldungen aus? Bzw. gibt er welche aus? Hast du Firebug für den FF installiert?
Ein bisschen PHP-Code ist nicht schlecht, wird aber wohl nicht allzu viel bringen.

 

[xloouch]

Falls man das Text-Area leer gelassen hat, kommt die Fehlermeldung, dass der Text fehlt (alert message) dann klickt man auf "OK" und das Post wird trotzdem ausgeführt, obwohl keine einzige Checkbox oder Radiobutton markiert wurde...


Hier einen Auszug aus dem Quelltext für die Radiobuttons:

<div id="tcontent1" class="tabcontent" style="height:195px;">

<ul id="groups_tree" class="treeview">

<li>SYS (Subgroups: 2)
<ul><li><input type="radio" name="group" value="50" />SYS</li>
<li><input type="radio" name="group" value="51" />TEST-Group</li>
</ul>
</li>
</ul>
</div>

Hier der Auszug aus den Checkboxen

<div id="tcontent2" class="tabcontent" style="height:195px;">
                    
<ul id="users_tree" class="treeview">
<li>stram (User: 92)

<ul><li><input type="checkbox" name="User[]" value="368" />USER 368</li>
<li><input type="checkbox" name="User[]" value="33" />USER 33</li>
<li><input type="checkbox" name="User[]" value="3" />USER 3</li>
<li><input type="checkbox" name="User[]" value="4" />USER 4</li>
<li><input type="checkbox" name="User[]" value="530" />USER 530</li>
</ul>
</div>