Formular: checkbox verlangt "required" Eingabenfeld-Eintrag

mAtt.ch

Hallo zusammen.

Soviel mal vorweg: meine JavaScript-Programmierfähigkeiten sind seeeehr minimal. Muss für Freunde ein online Forumlar als Anmeldung für ein Badmintonturnier... Das klappt soweit ganz gut, allerdings habe ich ein kleines Problem. Man muss irgendwo per Checkbox die Kategorie auswählen (Einzel, Doppel, Mixed oder Senator). Davon darf man maximal 2 auswählen. Wird was ausgewählt, sollte automatisch das dazugehörende Eingabefeld (Name/Vorname PartnerIn) sowie die Radiobuttons "Level" (also A, B+, B-, C+ oder C-) als Pflichtfeld erscheinen...

Wer kann mir da weiter helfen?

Vielen Dank

Matthias

synaptic

kaum umfangreich das ganze

was vom code haste denn bisher schon bewerkstelligt? gibt es dafür nen framework, wie jquery?
zeig bitte was du hast ( am besten mit codetags umschlossen für bessere lesbarkeit )

mAtt.ch

So sieht der ganze Quelltext mit allem drum und dran aus...

Code

<!--
// Überprüfung der email-Adresse auf richtige Eingabe
function checkform()
{
var email1 = document.getElementById('email1').value;
var email2 = document.getElementById('email2').value;


var returnval;


  var chkZ = 1;
  for (i = 0; i < document.form.gebtag.value.length; ++i)
    if (document.form.gebtag.value.charAt(i) < "0" ||
        document.form.gebtag.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Keine korrekte Datumsangabe!");
    document.form.gebtag.focus();
    return false;
  }


  var chkZ = 1;
  for (i = 0; i < document.form.gebmonat.value.length; ++i)
    if (document.form.gebmonat.value.charAt(i) < "0" ||
        document.form.gebmonat.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Keine korrekte Monatsangabe!");
    document.form.gebmonat.focus();
    return false;
  }


  var chkZ = 1;
  for (i = 0; i < document.form.gebjahr.value.length; ++i)
    if (document.form.gebjahr.value.charAt(i) < "0" ||
        document.form.gebjahr.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Keine korrekte Jahresangabe!");
    document.form.gebjahr.focus();
    return false;
  }


  var chkZ = 1;
  for (i = 0; i < document.form.telvorwahl.value.length; ++i)
    if (document.form.telvorwahl.value.charAt(i) < "0" ||
        document.form.telvorwahl.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Keine korrekte Telefonvorwahl!");
    document.form.telvorwahl.focus();
    return false;
  }


  var chkZ = 1;
  for (i = 0; i < document.form.tel.value.length; ++i)
    if (document.form.tel.value.charAt(i) < "0" ||
        document.form.tel.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Keine gültige Telefonnummer!");
    document.form.tel.focus();
    return false;
  }


  if (document.form.email1.value.indexOf("@") == -1) {
    alert("Keine gültige E-Mail-Adresse!");
    document.form.email1.focus();
    return false;
  }


if (email1 == '') {
alert('Bitte gib deine Emailadresse ein!');
document.getElementById('email1').focus();
returnval = false;
} else if (email2 == '') {
alert('Bitte wiederhole deine Emailadresse!');
document.getElementById('email2').focus();
returnval = false;
}
else if ( email1 == email2) {
returnval = true;
} else
{
alert("Die E-Mail-Adressen sind nicht identisch!");


returnval = false;
}
return returnval;
}


// -->
</script>
<style type="text/css">
<!--
.style1 { font-family: 'Tahoma'; font-size:10; font-weight:200; letter-spacing:0.2em; color:#699602; }
.style2 { font-family: 'Tahoma'; font-size:14; font-weight:600; letter-spacing:0.3em; color:black; }
.style3 { font-family: 'Tahoma'; font-size:10; font-weight:200; letter-spacing:0.2em; color:black; }
.style4 { font-family: 'Tahoma'; font-size:10; font-weight:200; letter-spacing:0.2em; color:black; }
.style5 { font-family: 'Tahoma'; font-size:10; font-weight:200; letter-spacing:0.2em; color:#699602; }
-->
a:link { text-decoration:none; color:#699602; }
a:visited { text-decoration:none; color:#699602; }
</style>
</head>
<body bgcolor="#FFFFFF">
<form action="mailto:info@mattphotography.ch" method="post" enctype="text/plain" name="form" onSubmit="return checkform();">


<table width=1032 border=0 cellpadding=0 cellspacing=0>
<tr>
  <th colspan=3 height=30></th>
</tr>


<tr>
  <th rowspan=25 width=30></th>
  <th rowspan=25 width=440 height=700 align="left" valign="top"><a href="../index.html" target="_self"><img src="flyer.jpg" border="0"></a></th>
  <th class="style1" colspan=4 width=500 height=100 align="left" valign="top">
    | <a href="index.html" target="self">home </a>
    | <a href="seiten/news.html" target="self">news </a>
    | <a href="seiten/training.html" target="self">training </a>
    | <a href="seiten/turnier.html" target="self">turniere </a>
    | <a href="seiten/liga.html" target="self">liga </a>
    | <a href="seiten/galerie.html" target="self">galerie </a>
    | <a href="seiten/kontakt.html" target="self">kontakt </a>
    | <a href="seiten/link.html" target="self">links |</a></th>
</tr>


<tr>
  <th class="style2" colspan=4 width=500 height=70 align="left" valign="top">SPIELERANMELDUNG<br><text class="style4">deutsch | <a href="index_2e.html" target="self">english </a>
  </th>
</tr>




<tr>
   <td valign="top" align="left" width="120"><text class="style3">Name <text class="style1">*</td>
   <td valign="top" align="left" width="180"><input name="name" type="text" size="20" maxlength="30" required="required"></td>
   <td valign="top" align="left" width="120"><text class="style3">Vorname <text class="style1">*</td>
   <td valign="top" align="left" width="170"><input name="vorname" type="text" size="20" maxlength="30" required="required"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Geschlecht <text class="style1">*</td>
   <td valign="top"><input type="radio" name="geschlecht" value="maennlich" required="required"><text class="style3"> m&auml;nnlich <input type="radio" name="geschlecht" value="weiblich"><text class="style3"> weiblich</td>
   <td valign="top" align="left" width="120"><text class="style3">Geburtsdatum <text class="style1">*</td>
   <td valign="top"><input name="gebtag" id="gebtag" type="text" size="1" maxlength="2" required="required">.<input name="gebmonat" id="gebmonat" type="text" size="1" maxlength="2" required="required">.<input name="gebjahr" id="gebjahr" type="text" size="3" maxlength="4" required="required" value="19"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Adresse <text class="style1">*</td>
   <td valign="top" colspan="3"><input name="adresse" type="text" size="64" maxlength="50" required="required"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">PLZ/Wohnort <text class="style1">*</td>
   <td valign="top"><input name="plz" type="text" size="5" maxlength="6" required="required"> <input name="wohnort" type="text" size="11" maxlength="30" required="required"></td>
   <td valign="top" align="left" width="120"><text class="style3">Land <text class="style1">*</td>
   <td valign="top"><input name="vorname" type="text" size="20" maxlength="30" required="required"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Mobiltelefon </td>
   <td valign="top"  colspan="3"><input name="telvorwahl" type="text" size="3" maxlength="30" value="00">
<input name="tel" type="text" size="13" maxlength="20"><text class="style3"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">E-Mail <text class="style1">* </td>
   <td valign="top"><input name="email" id="email1" type="text" size="20" maxlength="50" required="required"></td>
   <td valign="top" align="left" width="120"><text class="style3">E-Mail Best. <text class="style1">*</td>
   <td valign="top"><input name="email2" id="email2" type="text" size="20" maxlength="50" required="required"></td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Verein</td>
   <td valign="top"><input name="verein" type="text" size="20" maxlength="30"></td>
  <td valign="top" align="left" colspan="4"><text class="style1">* Pflichtfelder</td>
</tr>


<tr>
  <td valign="top" align="left" width="120"><text class="style1"><br>Kategorie</td>
  <td valign="top" width="180"><text class="style1"><br>Name/Vorname PartnerIn</td>
  <td valign="top"><text class="style1"><br>Level</td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><input type="checkbox" name="kategorie" value="einzel"><text class="style3"> Einzel</td>
  <td valign="top" width="180"></td>
  <td valign="top" colspan="2">
    <input type="radio" name="einzellevel" value="einzellevel_a"><text class="style3"> A 
    <input type="radio" name="einzellevel" value="einzellevel_b+"><text class="style3"> B+ 
    <input type="radio" name="einzellevel" value="einzellevel_b-"><text class="style3"> B- 
    <input type="radio" name="einzellevel" value="einzellevel_c+"><text class="style3"> C+ 
    <input type="radio" name="einzellevel" value="einzellevel_c-"><text class="style3"> C-
  </td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><input type="checkbox" name="kategorie" value="doppel"><text class="style3"> Doppel</td>
  <td valign="top" width="180"><input name="doppelpartner" type="text" size="20" maxlength="30"></td>
  <td valign="top" colspan="2">
    <input type="radio" name="doppellevel" value="doppellevel_a"><text class="style3"> A 
    <input type="radio" name="doppellevel" value="doppellevel_b+"><text class="style3"> B+ 
    <input type="radio" name="doppellevel" value="doppellevel_b-"><text class="style3"> B- 
    <input type="radio" name="doppellevel" value="doppellevel_c+"><text class="style3"> C+ 
    <input type="radio" name="doppellevel" value="doppellevel_c-"><text class="style3"> C-
  </td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><input type="checkbox" name="kategorie" value="mixed"><text class="style3"> Mixed</td>
  <td valign="top" width="180"><input name="mixedpartner" type="text" size="20" maxlength="30"></td>
  <td valign="top" colspan="2">
    <input type="radio" name="mixedlevel" value="mixedlevel_a"><text class="style3"> A 
    <input type="radio" name="mixedlevel" value="mixedlevel_b+"><text class="style3"> B+ 
    <input type="radio" name="mixedlevel" value="mixedlevel_b-"><text class="style3"> B- 
    <input type="radio" name="mixedlevel" value="mixedlevel_c+"><text class="style3"> C+ 
    <input type="radio" name="mixedlevel" value="mixedlevel_c-"><text class="style3"> C-
  </td>
</tr>


<tr>
  <td valign="top" align="left" width="120"><input type="checkbox" name="kategorie" value="senator"><text class="style3"> Senator</td>
  <td valign="top" width="180"><input name="senatorpartner" type="text" size="20" maxlength="30"></td>
  <td valign="top" colspan="2"><text class="style3">keine Leveleinteilung</td>
</tr>


<tr>
  <td></td>
  <td valign="top" align="left" colspan="3"><text class="style1">Die h&ouml;here Einzelspielst&auml;rke bestimmt das Level f&uuml;r Doppel/Mixed.</td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3"><br>Turnier</td>
   <td valign="top" colspan="3"><text class="style3"><br><input type="checkbox" name="anmeldung" value="turnier"><text class="style3"> EUR 50.00 (inkl. ESC-Party und Abendessen)</td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Brunch</td>
   <td valign="top"><text class="style3"><input type="checkbox" name="anmeldung" value="brunch"><text class="style3"> EUR 15.00</td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">T-Shirt</td>
   <td valign="top"><text class="style3"><input type="checkbox" name="anmeldung" value="shirt"><text class="style3"> EUR 12.50</td>
  <td valign="top" colspan="2"><input type="radio" name="shirtgroesse" value="shirtgroesse_s"><text class="style3">S <input type="radio" name="shirtgroesse" value="shirtgroesse_m"><text class="style3"> M <input type="radio" name="shirtgroesse" value="shirtgroesse_l"><text class="style3"> L <input type="radio" name="shirtgroesse" value="shirtgroesse_xl"><text class="style3"> XL </td>
</tr>


<tr>
  <td></td>
  <td valign="top" align="left" colspan="3"><text class="style1">Bei mehreren T-Shirt-Bestellungen bitte die Anzahl sowie die gew&uuml;nschten Gr&ouml;ssen in die Kommentarbox eintragen.</td>
</tr>


<tr>
   <td valign="top" align="left" width="120"><text class="style3">Kommentar <text class="style1">*</td>
   <td valign="top" colspan="4"><textarea name="kommentar" cols="56" rows="2"></textarea></td>
</tr>


<tr>
   <td align="left" width="120"></td>
   <td><input type="submit" value="absenden"><input type="reset" value="abbrechen"></td>
</tr>


</table>
</form>
</body>
</html>

Alles anzeigen

synaptic

Zitat von synaptic

( am besten mit codetags umschlossen für bessere lesbarkeit )

editiere bitte dein posting, so werd ich nich helfen können wollen

mAtt.ch

hmmm... ich hab das nicht gemacht, weil ich dir ein Ei legen wollte... Mir war (naja, ganz ehrlich gesagt: IST) nicht ganz klar, was du genau willst... Sind die codetags nicht die <style>s und <body>s usw.? Hab jetzt einfach mal den ganzen Quelltext reingehauen... Kein Ahnung, ob ich dir damit nen Gefallen gemacht hab... Hmmm... wie du siehst: es war nicht gelogen, dass ich nicht allzuviel Ahnung hab...

synaptic

so isses schon richtig.. codetags sind die bb-tags vom forum, damit der code nicht unformatiert als reintext dasteht.
die anderen tags sind html-tags

ich schau es mir heute abend nach der Arbeit mal an

edit: hab mir jetzt die sources geholt, kam was dazwischen...
meld mich sobald ich dir hier n bissi infos bieten kann

synaptic

soo update
vorab noch die info: ich hab dir bisher keinen code geschrieben, da ich dir auf dem weg das selber zu meistern helfen möchte. statt dir einfach irgendwelchen code hinzuwerfen

also zur herangehensweise: (mit jQuery wäre übrigens wesentlich einfacher umzusetzen, aber dafür musst du erstmal normales javascript verstehen, denke ich)
du kannst bei den checkboxes eine ID mitliefern
damit du über document.getElementById an die dinger drankommst. alternativ kannst du den dingern auch ne klasse geben und mit document.getElementsByClassName('NAME_DERKLASSE'); darauf zugreifen.

bei einem klick auf eines dieser elemente musst du prüfen, wieviele von denen angehakt sind...
weil du kein jquery hast und somit kein document.ready-event verfügbar ist bleiben dir drei möglichkeiten:
das registrieren der funktionalität in window.onlod zu stopfen, direkt an die elemente ein onclick-attribut zu hängen und die funktionalität in eine function zu schreiben oder aber den code ans ende vors schliessende body-tag zu setzen.
die onload-variante könnte so aussehen (ungetestet)

Code

window.onload=function(){
    var boxes = document.getElementsByClassName('js_cat');
    var counter = 0;
    console.log(boxes);
    for(e in boxes){
        boxes[e].onclick = function(){
            if(this.checked == true){
                console.log(this.name + ' : ' + this.value + ' is checked');
                counter++;
            }else{
                counter--;
            }

            console.log(counter + ' boxes are checked');
        };
    }
}

Alles anzeigen

console.log ist eine debug-ausgabe, die nur funktioniert, wenn eine konsole verfügbar ist (zB im Firebug, nem addon fürn firefox) oder in den entwickler-tools vom IE
vorsicht: es gibt fehler, wenn die konsole nicht bekannt ist.

wenn du also im firefox deine seite öffnest, den code in dein scripttag ballerst, müsstest du bei jedem klick auf eine deiner mit der klasse 'js_cat' versehenen inputboxen eine ausgabe bekommen.
einmal wird dir gesagt welches element du geklickt hast und zum anderen wird dir der aktuelle counter ausgegeben.
ganz am anfang siehst du die repräsentation deiner input-felder also DOM-Objekte gelistet (also wenns klappt.. is ja ungetestet^^)
DOM = Document Object Model

also damit kannst du schomma herausfinden, was angeklickt wurde und wieviel boxen aktiv sind, also checked.

dann gehst weiter damit, dass du nun andere bereiche deaktivieren musst (verbliebene checkboxen etc. der auswahl entsprechend brauchst du jetzt neue pflichtfelder usw.)

damit das hier nicht in einem roman ausartet, kannst du ja jetzt mal schreiben, ob du alles verstanden hast, wo evtl. fragen sind und mach dir mal weiterführende gedanken, was deine nächsten schritte sein sollten. vielleicht bringst du ja auch etwas mehr code hervor, um fortschritte zu machen

mAtt.ch

Hallo Synaptic!

Hmmmmm... erst Mal danke für deine Mühen... Aber ich muss ganz ehrlich sein: Viel mehr als Bahnhof kann ich leider nicht verstehen... Ich stimme mit dir absolut überein, der Lerneffekt soll nicht fehlen - ich würde gerne ein bisschen mehr JavaScript verstehen. Aber wie in meinem ursprünglichen "Hilfeschrei" erwähnt: meine Fähigkeiten sind seeeeeeehr bescheiden. Hmmm... Vielleicht sollte ich besser sagen: komplett inexistent. Ich habe mich noch nie mit der Funktionsweise von Java auseinandergesetzt. Kann nicht unterscheiden, was Befehle, was Verweise, was eigene Namen usw. sind... Bevor ich fähig bin, mir irgendwelche weiterführende Gedanken zu machen, muss ich mich erstmal in die Basics einarbeiten (die paar wenigen Java Sripts die ich bisher gebraucht habe, habe ich mir wie gesagt immer so im aus versch. Foren zusammengesucht. Daher muss ich die Frage wohl andersrum stellen (da mir mitlerweile auch ein bisschen die Zeit davon läuft - das Ding muss online gehen und wäre mit den Zusätzen natürlich ein bisschen "profesioneller" (würd aber in der Not auch ohne gehen!).): wie lautet der Quellcode, damit das Formular tut, was ich gerne von ihm hätte? Lernen würde dann wohl eher in der nächsten Stufe kommen...

Meinste, du könntest/möchtest mir unter diesen Bedingungen immer noch weiterhelfen?

Lieben Gruss

Matthias

synaptic

also in dem fall is das eher was fürs jobforum.. mit gegenleistung und co..

bis wann brauchste das denn?

mAtt.ch

nächstes Wochenende müsst's online sein... Wie gesagt, was steht reicht an und für sich auch schon... Hab mir gedacht, dass ich da leichter ne Lösung finde, bzw. dass sich ein Crack das anguckt und sagt: "meine Güte, ist ja n Klacks!" und 30 Sekunden später stehts... Man möge mich auch naiv nennen...

synaptic

naja des sind halt alles abhängigkeiten, die dann entsprechend zu klären sind und mit dem bisherigen code ist das dann auch keine 0-8-15-integration.

ich schau mal, was ich tun kann, aber versprechen kann ich dir nichts. mit vollzeitjob, frau, haus und tierschutzprojekt bleibt nicht viel zeit für kostenlose mehraufwände

mAtt.ch

Versteh ich voll und ganz... so geht's mir ja grad mit diesem Formular... Zwar ohne Frau und Kind, dafür selbstständig - und das ist dummerweise immer mehr als 40 stunden die woche aufwand... Bin Fotograf - vielleicht kann ich mich ja irgendwie so revanchieren... Let me know! Und auf jeden Fall tausen Dank für den Support!

Tags