Checkboxen überprüfen

elijakiki · #1 (**permalink**) 09.07.2012, 08:57

Guten Tag

Ich bin gerade an einer Homepage dran. Es sollte ein Formular werden aus 3 Teilen, beim ersten Teil kann man die Unterordnung wählen, um was es gehen soll.

Dort habe ich 4 Checkboxen. Nun möchte ich machen, dass wenn man den Absenden/Überprüfen Button klickt, es weiter geht ABER nur wenn mindestens eine Checkbox angeklickt wurde.

Falls keine Checkbox angeklickt wurde möchte ich, dass oben ein roter Text (Error Message) kommt, wie z.B "sie müssen zuerst eine Checkbox auswählen"

Wäre dies machbar?

bis jetzt siehts so aus: (am anfang sind die checkboxen, nacher kommt das formular etc.)

HTML-Code:

<html>

<head><title>Formulare</title>

<script type="text/javascript">

function checkForm() {

  var strFehler='';

  if (document.forms[0].firma.value=="")

    strFehler += "Feld Firma ist leer!\n";

  if (document.forms[0].ansprech.value=="")

    strFehler += "Feld Ansprechsperson ist leer!\n";

  if (document.forms[0].tel.value.length<10)

    strFehler += "Feld Telefon ist nicht korrekt ausgefüllt!\n";

  if (!validEmail(document.forms[0].email.value)) {

    strFehler += "Die E-Mail Adresse ist falsch!\n";

  if (document.forms[0].text.value=="")

    strFehler += "Bitte beschreiben Sie das Problem!";

  }  

  if (strFehler.length>0) {

    alert("Festgestellte Probleme: \n\n"+strFehler);

    return(false);

  }

}

function validEmail(email) {

  var strReg = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$";

  var regex = new RegExp(strReg);

  return(regex.test(email));

}

function check() {
        document.write("checked: " + document.form.cb.checked);
    }


</script>

</head>

<body>

<form action='anmelden.php' onsubmit='return checkForm()'>

<h2>Formular</h2>

    <input type ="checkbox" name="tele"  id="cb" onclick="check();"/>&nbsp;&nbsp;Telesysteme<br />
                <input type ="checkbox" name="video" id="cb" onclick="check();"/>&nbsp;&nbsp;Videosysteme<br />
                <input type ="checkbox" name="patient" id="cb" onclick="check();"/>&nbsp;&nbsp;Patientenrufsysteme<br />
                <input type ="checkbox" name="anderes" id="cb" onclick="check();"/>&nbsp;&nbsp;Anderes Thema<br /> <p>

                <input type="button" value="Überprüfen"><br>

<hr noshade width="100%">
<br>
<p>Was wollen Sie?</p>
    <input type ="checkbox" name="wollen" />&nbsp;&nbsp;Gesamtsystem<br />
                <input type ="checkbox" name="wollen" />&nbsp;&nbsp;Endgeräte<br />
                <input type ="checkbox" name="wollen" />&nbsp;&nbsp;Software<br /><p>
                <input type='submit' value='Absenden'/><br>


<p>
<p>Was für ein System haben Sie?</p>
Modell:
  <select>
    <option value="wert1">HP
    <option value="wert2">Dell
    <option value="wert3">Acer
    <option value="wert3">Asus
  </select>
<br>
<p>
Marke:
 <select>
    <option value="wert1">pro
    <option value="wert2">super
    <option value="wert3">low
  </select>
<p>
<input type='submit' value='Absenden'/>

<hr noshade width="100%">
<br>

<table border="0" cellpadding="5" cellspacing="0" >
<tr>

<td align="right">Firma: &nbsp;
<td><input name='firma' type="text" size="30" maxlength="30">
<align="right">&nbsp; &nbsp; Ansprechsperson: &nbsp;
<input name='ansprech' type="text" size="30" maxlength="30"></td>
</tr>
<tr>
<td align="right">Telefon: &nbsp;
<td><input name='tel' type="text" size="30" maxlength="15">
<align="right">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-Mail: &nbsp;

<input name='email' type="text" size="30" maxlength="30">
</form>
</tr>
<tr>
<td align="right" valign="top">Problem:</td>
<td><textarea name='text' rows="10" cols="66"></textarea></td>
</tr>
<tr>
<td align="right">Formular:</td>
<td>
<p><p><input type='submit' value='Absenden'/>
<input type="reset" value=" Abbrechen"></p></p>
</td>
</tr>
</table>
</form>

</body>

</html>

Marcus · #2 (**permalink**) 18.07.2012, 08:55

Natürlich ist das machbar, am elegantesten vielleicht mit einer Schleife über alle Checkboxen (sie sollten unterschiedliche IDs haben!).

Code:

boxes = document.getElementsByTagName('wollen');
var chk = 0;
x = boxes.length;
for (var i = 0; i < x; i++) {
    if(boxes[i].checked)  chk++;
}
if (chk == 0) {
    strFehler += "Wenigsten eine Auswahl sollte getroffen sein!";
}

Getestet habe ich den Code nicht, aber die Grundidee ist, dass du erst die Elemente sammelst und dann in einer Schleife prüfst, ob die Box angeklickt ist, oder nicht.

Maxefix · #3 (**permalink**) 18.07.2012, 09:34

"getElementsByTagName()" selektiert Elemente mit einem bestimmten HTML-Tag. Mit nem name-Attribute hat das nichts zu tun. Du musst also wenn dann alle inputs holen und die dann entsprechend filtern (auf type="checkbox").

Gruß,
Max

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
formular tabindex mit checkboxen usw...	sepp88	(X)HTML	6	13.01.2010 12:22
Liste (mit Checkboxen) in Spalten anzeigen	nonce	CSS	10	04.04.2009 19:45
Checkboxen in Tabelle verschieben sich im IE	dooz	CSS	4	03.06.2008 16:37
Kontaktformular mit Checkboxen erweitern	ChOpSueY!	Serveradministration und serverseitige Scripte	4	10.04.2008 18:18
Radiobuttons und Checkboxen im Kontaktformular	Peter Klein	Serveradministration und serverseitige Scripte	5	04.07.2007 15:13