kostenloser Webspace werbefrei: lima-city

Formular max. 4 Elemente auswählen?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   sofortkredit

   sofortkredit hat kostenlosen Webspace.

   13:01, 20.3.2012

   Hallo
   
   wie kann ich es hinbekommen, das bei einem Formular
   in dem mehr as 4 Elemente zur Auswahl stehen
   es nur möglich ist, maximal 4 Elemente auszuwählen
   (schon bei Eingabe prüfen, nicht nach Senden)
   
   
   Beispiel:
   

   <br />
   
   <form name="form1" method="post" action="">
     Bitte maximal 4 Elemente ausw&auml;hlen: <br />
     <br />
     <input type="checkbox" name="option[box1]" id="box1" value="ja" /> Auswahl Nr. 1 <br />  
     <input type="checkbox" name="option[box2]" id="box2" value="ja" /> Auswahl Nr. 2 <br />  
     <input type="checkbox" name="option[box3]" id="box3" value="ja" /> Auswahl Nr. 3 <br />  
     <input type="checkbox" name="option[box4]" id="box4" value="ja" /> Auswahl Nr. 4 <br />  
     <input type="checkbox" name="option[box5]" id="box5" value="ja" /> Auswahl Nr. 5 <br />  
     <input type="checkbox" name="option[box6]" id="box6" value="ja" /> Auswahl Nr. 6 <br />  
     <br />
     <input type="hidden" name="sendform1" value="ok" />
     OK ......... <input type="submit" value="Abschicken" />
   </form>
   
   <br />

   
   
   welchen Code (JavaScript ?) muss ich einbauen,
   damit der User im Formular maximal 4 Elemente auswählen kann ?
   
   ... so, dass wenn schon 4 Elemente "aktiv" markiert wurden,
   beim Versuch ein 5tes Element als "aktiv" zu markieren
   eine Meldung kommt wie z.B: ... Sie dürfen maximal 4 Elementa auswählen
   und vorallem, dass diese 5te Auswahl nicht "angenommen" wird
   
   also so, das man das Formular nur mit maximal 4 ausgwählten Elementen absenden kann
   ... wie kann ich das machen .... ist das kompliziert ? ... jemand ne Idee ?!
   
   Danke

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. copynpaste

   

   copynpaste hat kostenlosen Webspace.

   13:28, 20.3.2012

   Kurz googlen kann helfen:
   (http://www.quaese.de/HTML-Design/texte/js/formular/max_checkboxes/max_checkboxes.html)
   
   

   <form action="" method="">
     <h1>Mit welchen Tätigkeiten gestalten Sie am häufigsten Ihre Freizeit (max. 5):</h1>
     <input type="checkbox" value="a" onclick="countChecks(this)">Lesen<br>
     <input type="checkbox" value="b" onclick="countChecks(this)">Computer spielen<br>
     <input type="checkbox" value="c" onclick="countChecks(this)">Kochen<br>
     <input type="checkbox" value="d" onclick="countChecks(this)">TV sehen<br>
     <input type="checkbox" value="e" onclick="countChecks(this)">Musik hören<br>
     <input type="checkbox" value="f" onclick="countChecks(this)">Sport<br>
     <input type="checkbox" value="g" onclick="countChecks(this)">Familie<br>
     <input type="checkbox" value="h" onclick="countChecks(this)">Heimwerken<br>
     <input type="checkbox" value="i" onclick="countChecks(this)">Schlafen<br>
     <input type="checkbox" value="j" onclick="countChecks(this)">Freunde besuchen<br>
     <input type="checkbox" value="k" onclick="countChecks(this)">Ausgehen<br>
     <input type="checkbox" value="l" onclick="countChecks(this)">Theater/Kino<br>
   </form>

   
   

   var intAnzahl = 0;  // Anzahl gesetzter Checkboxen
   var intGesamt = 5;  // Gesamtanzahl Checkboxen, die gesetzt werden dürfen
   
   function countChecks(objCheck){
     // Falls die Checkbox angewählt wurde
     if(objCheck.checked == true){
       intAnzahl++;
       // Falls die Gesamtanzahl überschritten wurde
       if(intAnzahl > intGesamt){
         alert("Maximal " + intGesamt + " Checkboxes auswählen!");
         intAnzahl--;                // Anzahl wieder zurücksetzen
         objCheck.checked = false;   // Checkbox wieder abwählen
       }
     // Falls eine Checkbox wieder abgewählt wird
     }else{
       intAnzahl--;  // Anzahl dekrementieren
     }
   }

4. Autor dieses Themas

   sofortkredit

   sofortkredit hat kostenlosen Webspace.

   14:00, 20.3.2012

   Vielen Dank
   
   .... damit geht es .... super Sache !!! .... Danke DIr !!!
   
   ich habe es noch bischen erweitert bzw. geändert, weil ich alert() Meldungen nicht mag
   jetzt mit Ausgabe, wieviele Checkboxen noch möglich sind
   in einem <div id="infofeld">...</div>
   und diese Ausgabe wird auch bei uncheck aktualisiert
   
   

   <script type="text/javascript">
   /* <![CDATA[ */
   
   var intAnzahl = 0;  // Anzahl gesetzter Checkboxen
   var intGesamt = 4;  // Gesamtanzahl Checkboxen, die gesetzt werden dürfen
   var intOffene = intGesamt;  // Anzahl noch mögliche Checkboxen
   
   function countChecks(objCheck){
     // Falls die Checkbox angewählt wurde
     if(objCheck.checked == true){
       intAnzahl++;
   	intOffene = (intGesamt - intAnzahl); 
   	document.getElementById('infofeld').innerHTML = "<p>Sie k&ouml;nnen noch " + intOffene + " Checkboxes ausw&auml;hlen!</p>";
       // Falls die Gesamtanzahl überschritten wurde
       if(intAnzahl > intGesamt){
         // alert("Bitte nur maximal " + intGesamt + " Checkboxes ausw&auml;hlen!");
   	  document.getElementById('infofeld').innerHTML = "<p>Sie d&uuml;rfen maximal " + intGesamt + " Checkboxes ausw&auml;hlen!</p>";
         intAnzahl--;                // Anzahl wieder zurücksetzen
         objCheck.checked = false;   // Checkbox wieder abwählen
       }
     // Falls eine Checkbox wieder abgewählt wird
     }else{
       intAnzahl--;  // Anzahl dekrementieren
   	intOffene = (intGesamt - intAnzahl); 
   	document.getElementById('infofeld').innerHTML = "<p>Sie k&ouml;nnen noch " + intOffene + " Checkboxes ausw&auml;hlen!</p>";
     }
   }
   
   /* ]]> */
   </script>

   
   
   
   so gefällt mir das schon ganz gut :)
   

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?