CONTENIDO Forum

Das Diskussionsforum zum Open Source Content Management System
https://forum.contenido.org/

Problem mit Show / Hide

https://forum.contenido.org/viewtopic.php?f=104&t=32017

Seite 1 von 1

Problem mit Show / Hide

Verfasst: Mi 18. Apr 2012, 11:19
von padrich
Hallo zusammen

Ich habe ein kleines Problem.

Und zwar möchte ich ein Anmeldeformular machen bei welchem man sich alleine, zu Zweit, zu Dritt oder zu Viert anmelden kann.
Hier noch ein kleines Bild zur Illustration:
Bild

So soll es werden:
Beim aufrufen des Formulars sollten die Textboxen "Name / Vorname" der 2., 3. und 4. Person ausgeblendet sein.
Beim Klick auf Single soll dann alles so bleiben.
Beim Klick auf 2-er Team soll die Textbox "Name / Vorname (der 2. Person)" eingeblendet werden und auch zwingend anzugeben sein.
Beim Klick auf 3-er Team sollen die Textboxen "Name / Vorname (der 2. Person)" und "Name / Vorname (der 3. Person)" eingeblendet werden und auch zwingend anzugeben sein.
Beim Klick auf 4-er Team sollen die Textboxen "Name / Vorname (der 2. Person)", "Name / Vorname (der 3. Person)" und "Name / Vorname (der 4. Person)" eingeblendet werden und auch zwingend anzugeben sein.

Ich hoffe es ist einigermassen verständlich formuliert... :)

Danke euch im Voraus!

LG
Patrick

Re: Problem mit Show / Hide

Verfasst: Mi 18. Apr 2012, 11:31
von Oldperl
Hallo Patrick,

zuerst einmal willkommen im Contenido Forum. :)
padrich hat geschrieben:Ich hoffe es ist einigermassen verständlich formuliert... :)
Ja sehr schön, es sollen Formularelemente bei Bedarf angezeigt werden. Na wenn du das soweit fertig hast kannst du uns ja mal den zugehörigen Quellcode zeigen. 8)
padrich hat geschrieben:Danke euch im Voraus!
Wofür? Da du keine Frage gestellt oder einen Wunsch benannt hast mußt du dich auch nicht im Voraus bedanken. :wink:

Gruß aus Franken

Ortwin

Re: Problem mit Show / Hide

Verfasst: Mi 18. Apr 2012, 11:36
von padrich
Hallo Oldperl

Haha vor lauter Formulierung habe ich tatsächlich die Frage vergessen.

Wie geht das???? :)

Kann man das ganze innerhalb des HTML-Codes lösen?

Hier mal noch der HTML-Code:

Code: Alles auswählen

<table width="100%" border="0" style="width: 100%;">
<tbody>
<tr>
<td>Name (Teamleiter):</td>
<td>###name:Name; type:text; valid:simpletext; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Vorname:</td>
<td>###name:Vorname; type:text; valid:simpletext; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Strasse:</td>
<td>###name:Strasse; type:text; valid:text; size:40; mandatory:true###</td>
</tr>
<tr>
<td>PLZ / Ort:</td>
<td>###name:PLZ; type:text; valid:numbers; size:15;&nbsp;maxlength:4;&nbsp;mandatory:true### /&nbsp;###name:Ort; type:text; valid:simpletext; size:16; mandatory:true###</td>
</tr>
<tr>
<td>E-Mail:</td>
<td>###name:E-Mail; type:text; valid:email; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Team:</td>
<td>
<p>###name:Team; type:radio; valid:text; value:single ### Single<br>###name:Team; type:radio; valid:text; value:2-er### 2-er Team<br>###name:Team; type:radio; valid:text; value:3-er### 3-er Team<br>###name:Team; type:radio; valid:text; value:4-er### 4-er Team</p>
</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 2. Person):</td>
<td>###name:Name2; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname2; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 3. Person):</td>
<td>###name:Name3; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname3; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 4. Person):</td>
<td>###name:Name4; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname4; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<div></div>
<tr>
<td>Bemerkungen:</td>
<td>###name:bemerkungen; type:textarea; valid:text; rows:6; cols:30###</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<p align="center"><input type="submit" value="senden"></p>
</td>
</tr>
</tbody>
</table>
Und nochmals danke im Voraus ;-)

Re: Problem mit Show / Hide

Verfasst: Mi 18. Apr 2012, 12:31
von Oldperl
Hallo Patrick,
padrich hat geschrieben:Haha vor lauter Formulierung habe ich tatsächlich die Frage vergessen.
Tja, soll vorkommen... :P
padrich hat geschrieben:Kann man das ganze innerhalb des HTML-Codes lösen?
Jein.
HTML selbst kann das nicht, du benötigst dafür Javascript und CSS um Formelemente dynamisch anzuzeigen.
Du kannst das mit sogenannten Eventhandlern lösen :arrow: http://de.selfhtml.org/javascript/sprac ... andler.htm

Du nutzt aber offensichtlich das Formularmodul von kummer aus dem Forum, dort wird der von dir erstellte HTML-Quelltext nochmal geparst um entsprechende Elemente anzuzeigen. Eventuell solltest du den dortigen Thread zuerst einmal lesen inwieweit du da mit Eventhandlern arbeiten kannst.

Gruß aus Franken

Ortwin

Re: Problem mit Show / Hide

Verfasst: Do 19. Apr 2012, 15:35
von padrich
Hallo zusammen

So also habe nun einen Code gefunden / gebastelt welcher auch funktioniert.

Nur leider im Contenido selber funktioniert der nicht...

Hier mal der gesamte Code (vom funktionierenden):

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
  
    $(document).ready(function(){
          $('.button1').click(function() {
          $('.inout2').hide('normal');
          $('.inout3').hide('normal');
          $('.inout4').hide('normal');
          return true;
        });
      });
    $(document).ready(function(){
          $('.button2').click(function() {
          $('.inout2').show('normal');
          $('.inout3').hide('normal');
          $('.inout4').hide('normal');
          return true;
        });
      });
       $(document).ready(function(){
          $('.button3').click(function() {
          $('.inout3').show('normal');
          $('.inout2').hide('normal');
          $('.inout4').hide('normal');
          return true;
        });
      });
       $(document).ready(function(){
          $('.button4').click(function() {
          $('.inout4').show('normal');
          $('.inout2').hide('normal');
          $('.inout3').hide('normal');
          return true;
        });
      });

    </script>

  </head>
  <body>
	<input name="Team" type="radio" a href="#" class="button1" value="single"> Single<br> 
	<input name="Team" type="radio" a href="#" class="button2" value="2er"> 2-er Team<br>
	<input name="Team" type="radio" a href="#" class="button3" value="3er"> 3-er Team<br>
	<input name="Team" type="radio" a href="#" class="button4" value="4er"> 4-er Team<br>
 

    <div style="display:none" class="inout2" id="container1">
        <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
    </div>
    
    <div style="display:none" class="inout3" id="container2">
        <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
	<p>Vorname / Nachname (der 3. Person)<br><input name="vorname3" type="text" size="30" maxlength="30"><input name="nachname3" type="text" size="30" maxlength="30"></p>
    </div>

    <div style="display:none" class="inout4" id="container3">
        <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
	<p>Vorname / Nachname (der 3. Person)<br><input name="vorname3" type="text" size="30" maxlength="30"><input name="nachname3" type="text" size="30" maxlength="30"></p>
 	<p>Vorname / Nachname (der 4. Person)<br><input name="vorname4" type="text" size="30" maxlength="30"><input name="nachname4" type="text" size="30" maxlength="30"></p>
   </div>

  </body>
</html>
Nun habe ich den Javascript-Teil ins Modul eingefügt.

Das Problem ist jetzt aber, dass ich nicht weiss, wie ich den obigen HTML-Code im Contenido wiedergeben kann.

Dort habe ich folgenden Code:

Code: Alles auswählen

<div></div>
<table width="100%" border="0" style="width: 100%;">
<tbody>
<tr>
<td>Name (Teamleiter):</td>
<td>###name:Name; type:text; valid:simpletext; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Vorname:</td>
<td>###name:Vorname; type:text; valid:simpletext; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Strasse:</td>
<td>###name:Strasse; type:text; valid:text; size:40; mandatory:true###</td>
</tr>
<tr>
<td>PLZ / Ort:</td>
<td>###name:PLZ; type:text; valid:numbers; size:15;&nbsp;maxlength:4;&nbsp;mandatory:true### /&nbsp;###name:Ort; type:text; valid:simpletext; size:16; mandatory:true###</td>
</tr>
<tr>
<td>E-Mail:</td>
<td>###name:E-Mail; type:text; valid:email; size:40; mandatory:true###</td>
</tr>
<tr>
<td>Team:</td>
<td>
<p>###name:Team; type:radio; valid:text; value:single; class:button1### Single<br>###name:Team; type:radio; valid:text; value:2-er; class:button2### 2-er Team<br>###name:Team; type:radio; valid:text; value:3-er; class:button3### 3-er Team<br>###name:Team; type:radio; valid:text; value:4-er; class:button4### 4-er Team</p>
</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 2. Person):</td>
<td>###name:Name2; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname2; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 3. Person):</td>
<td>###name:Name3; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname3; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<tr>
<td>Name / Vorname<br>(der 4. Person):</td>
<td>###name:Name4; type:text; valid:simpletext; size:15; mandatory:false### / ###name:Vorname4; type:text; valid:simpletext; size:15; mandatory:false###</td>
</tr>
<tr>
<td>Bemerkungen:</td>
<td>###name:bemerkungen; type:textarea; valid:text; rows:6; cols:30###</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<p align="center"><input type="submit" value="senden"></p>
</td>
</tr>
</tbody>
</table>
Wie kann ich das ganze so zusammenführen, dass dies auch wirklich funktioniert?

Re: Problem mit Show / Hide

Verfasst: Do 19. Apr 2012, 20:37
von McHubi
Hallo padrich,

wenn ich das jetzt so richtig verstanden habe wie Du das beschreibst, willst Du Deinen ersten Codeblock - "Hier mal der gesamte Code (vom funktionierenden)" - in das Modul packen, oder? - Dann lass einfach die überflüssigen HTML-Schnipsel/ Bereiche wie <head> <body> usw. weg und kopiere den Rest einfach in den Output:

Code: Alles auswählen

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript">
     
        $(document).ready(function(){
              $('.button1').click(function() {
              $('.inout2').hide('normal');
              $('.inout3').hide('normal');
              $('.inout4').hide('normal');
              return true;
            });
          });
        $(document).ready(function(){
              $('.button2').click(function() {
              $('.inout2').show('normal');
              $('.inout3').hide('normal');
              $('.inout4').hide('normal');
              return true;
            });
          });
           $(document).ready(function(){
              $('.button3').click(function() {
              $('.inout3').show('normal');
              $('.inout2').hide('normal');
              $('.inout4').hide('normal');
              return true;
            });
          });
           $(document).ready(function(){
              $('.button4').click(function() {
              $('.inout4').show('normal');
              $('.inout2').hide('normal');
              $('.inout3').hide('normal');
              return true;
            });
          });

        </script>

       <input name="Team" type="radio" a href="#" class="button1" value="single"> Single<br>
       <input name="Team" type="radio" a href="#" class="button2" value="2er"> 2-er Team<br>
       <input name="Team" type="radio" a href="#" class="button3" value="3er"> 3-er Team<br>
       <input name="Team" type="radio" a href="#" class="button4" value="4er"> 4-er Team<br>


        <div style="display:none" class="inout2" id="container1">
            <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
        </div>
       
        <div style="display:none" class="inout3" id="container2">
            <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
       <p>Vorname / Nachname (der 3. Person)<br><input name="vorname3" type="text" size="30" maxlength="30"><input name="nachname3" type="text" size="30" maxlength="30"></p>
        </div>

        <div style="display:none" class="inout4" id="container3">
            <p>Vorname / Nachname (der 2. Person)<br><input name="vorname2" type="text" size="30" maxlength="30"><input name="nachname2" type="text" size="30" maxlength="30"></p>
       <p>Vorname / Nachname (der 3. Person)<br><input name="vorname3" type="text" size="30" maxlength="30"><input name="nachname3" type="text" size="30" maxlength="30"></p>
       <p>Vorname / Nachname (der 4. Person)<br><input name="vorname4" type="text" size="30" maxlength="30"><input name="nachname4" type="text" size="30" maxlength="30"></p>
       </div>

Re: Problem mit Show / Hide

Verfasst: Fr 20. Apr 2012, 00:22
von Oldperl
Pssst, Markus, du hast aber schon gesehen das sein Codeschnipsel im 1. Post ein Formulartemplate für kummers dynamisches Formularmodul ist??? :roll:
Da kannste nicht einfach mal ein komplettes Formular so reinhauen... :?

Gruß aus Franken

Ortwin

Re: Problem mit Show / Hide

Verfasst: Fr 20. Apr 2012, 07:32
von McHubi
Guuuuuut... war schon spät. Dachte er wollte bloß seinen funktionierenden Code in EIN Modul packen und nicht in DAS Modul ... Bild

Problem mit Show / Hide

Verfasst: Fr 20. Apr 2012, 08:51
von padrich
Hallo zusammen

Genau ich möchte kummers Formular mit meinem Code ergänzen. Ist wohl eher ein schwieriger Fall?

Kennt ihr sonst noch eine andere Lösung wie das funktionieren könnte?

Danke für eure Hilfe!

Gruss
Patrick

Re: Problem mit Show / Hide

Verfasst: Fr 20. Apr 2012, 13:37
von Oldperl
padrich hat geschrieben:Genau ich möchte kummers Formular mit meinem Code ergänzen. Ist wohl eher ein schwieriger Fall?
Keine Ahnung. Da ich dieses Modul eher selten nutze bin ich auch in der Materie nicht drin. Daher auch keine Aussage von mir zu einer Umsetzung. Und im Moment auch nicht die Zeit um das "mal schnell" zu machen.

Gruß aus Franken

Ortwin

Re: Problem mit Show / Hide

Verfasst: Fr 20. Apr 2012, 14:35
von padrich
Okay, ist kein Problem...
Ich verzweifle fast.
Das Formular erscheint immer ganz normal als wäre der Code nicht vorhanden.

Eine andere Möglichkeit wäre, dass wenn der "2-er Team" Radiobutton angewählt wird, die Eingabe von Name / Vorname der 2. Person zwingend wird.
Beim Klick auf "3-er Team"
Leider finde ich auch hierzu nichts wirklich hilfreiches im Internet...
Hat jemand für diesen Fall eine Lösung?

Danke im Voraus für die Lösungsvorschläge :)

Gruss
Patrick

Re: Problem mit Show / Hide

Verfasst: So 22. Apr 2012, 11:39
von onlyme
Hallo,

zum Teil "Pflichteingaben", an welcher Stelle werden denn die eingaben verarbeitet?
Dort musst Du lediglich prüfen welcher Radiobutton geklickt wurde -> also den Value der Variable "Team" prüfen.
Das ganze packst Du in ne for Schleife. Du solltest den Value für die Radio Buttons übrigens nicht mit "single/2er" usw. belegen, sondern einfach nur 1,2,3,4.
Jetzt überprüfst Du nach dem Post den Inhalt von "$_POST["Team"]" in der for Schleife. Ich weiß jetzt natürlich nicht wie in diesem Modul
Pflichtfelder behandelt werden, deshalb der Code recht allgemein um den Sinn wieder zu geben...
Damitdas in ner Schleife geht, müssten noch die namen der input Felder vornname und nachname geändert werden in: name="vorname[]" und name="nachname[]",
so das diese alsarrayübergeben werden.
Angenommen es gibt eine Variable "$send", die true sein müsste um das Formular abzuschicken. Wenn False, wird nichts versendet und eineFehlermeldung kommt.

Code: Alles auswählen

//vorherigerCode
$send = true; //senden wirdauf true gesetzt
//Pflichtfelder prüfen
for($i=1;$i<=$_POST["Team"];$i++){ 
   if($_POST["vorname[".$i."]] == "" || $_POST["nachname[".$i."]] == ""}
      $send = false;//eines der Felder ist leer, also nicht senden
}
//weiterer Code um Fehlermeldungaus zu geben z.B.
if($send != true)
   echo "Bitte alle Pflichtfelder ausfüllen";
else
//senden
Der Code ist auf diese Art und Weise recht flexibel und Du könntest noch hunderte weitere Team Buttons einfügen, sie werden alle geprüft.

Zum Thema zeigen und verstecken:

Das javascript finde ich übrigens ein bissl umständlich (oder denke ich nur so ;))
Da sollte es reichen, wenn Du Dir ne Funktion baust z.B.

Code: Alles auswählen

funktion unhide(elID){
var myelement= document.getElementById(elID);
 if (myelement) {
 myelement.className=(myelement.className=='hidden')?'unhide';
 }
}
Lege zwei Klassen an, .hide { display: none; } .unhide { display: block; }, jetzt einen Div umd die Vorname/Nachname Inputfelder, der bekommt zunächst die Class .hide und ne ID z.B. "t1", der nächste "t2" usw..
jetzt noch in die Radio Buttons nen onClick Handler: onClick="hideandunhide("t1")".
Also ungefähr so:

Code: Alles auswählen

//der Radio Button:
<input type="radio"  onClick="unhide("t2")">
<div id="t2"><td>Name, Vorname 2. Person</td><td><input name="name[]"><input name="vorname[]"></td></div>
Ich hoffe Du konntest meinen Gedanken folgen? Der Code ist nicht getestet und muss natürlich von Dir angepasst werden :D

Viel Erfolg
Alle Zeiten sind UTC+01:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de