Check Function für Grafik-Checkbox

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Check Function für Grafik-Checkbox

    Hallo,

    vorab: bin ein absoluter newbie was Javascript betrifft, muss mich jedoch zur Zeit damit auseinandersetzen, da ich für meine Diplomarbeit eine Online-Umfrage erstelle.

    Nun zur Sache: ich habe für ein Formular statt der normalen Checkboxen selbstgebastelte Grafiken als Checkboxen definiert. Dabei habe ich zwei Wege gefunden, um dies zu realiseren:

    1) Der erste Weg läuft über span onmouseover, getElementById, onmouseout:

    Code:
    	

<input type="hidden" id="studierendAusbildung" name="studierendAusbildung" value="" /> 

<span onmouseover="var el=document.getElementById('studierendAusbildung'); 

var im=document.getElementById('studierendAusbildung_img'); 

im.src=(el.value==1)?'images/checked-over.gif':'images/unchecked-over.gif';" 

onmouseout="var el=document.getElementById('studierendAusbildung');

var im=document.getElementById('studierendAusbildung_img');

im.src=(el.value==1)?'images/checked.gif':'images/unchecked.gif';" 

onclick="var el=document.getElementById('studierendAusbildung'); 
var im=document.getElementById('studierendAusbildung_img');

if (el.value==1) { el.value= ' '; im.src='images/unchecked-over.gif'; } 

else { el.value=1; im.src='images/checked-over.gif'; } 

"style="cursor:default; height: 30px">

<img id="studierendAusbildung_img" src="images/unchecked.gif" alt="" width="20" height="20" align="middle"/>

</span>
    2) Der zweite Weg funktioniert mittels eines Links und des OnClick-Eventhandlers:

    Code:
    	

<script language="JavaScript">
<!--
function CheckBox(feld)
{
 if(document.form1[feld].value == 'true')
 {
  document.form1[feld].value = 'false';
  document.images[feld].src = 'images/unchecked.gif';
 }
 else
 {
  document.form1[feld].value = 'true';
  document.images[feld].src = 'images/checked.gif';
 }
}
// -->
</script>

</head>

<body>

<form name="form1" action="--WEBBOT-SELF--" method="POST"> 

<input type="hidden" value="false" name="cb1">

<a href="#" onclick="CheckBox('cb1'); return false">

<img src="images/unchecked.gif" border="0" name="cb1" width="20" height="20"> 

Text für Checkbox 1
</a>

</form>
</body>
    Nun möchte ich gerne mittels Javascript eine Checkfunktion haben, so dass der User mit einem alert aufgefordert wird mindestens eine Checkbox anzukreuzen. Ich habe "2Tage gegooglet!!!!" und nichts gefunden, wie man eine Checkfunction für ein hidden field definiert. Dann dachte ich mir, dass es bei dem zweiten Weg (Link + onclick) vielleicht die Möglichkeit gebe, eine Funktion zu schreiben, die prüft ob der Link geklickt wurde, aber auch diesbezüglich habe ich nichts gefunden.

    Die Lösung müsste unbedingt über Javascript funktionieren, da mein Server-Paket kein PHP anbietet.

    Ich hoffe einer von euch wird mir helfen können!!!!! Bin echt für jeden Ansatz dankbar!!!

    Grüße
    Stichworte: -
  • #2
    Re: Check Function für Grafik-Checkbox

    Also dein erster Code ist mir erst mal viel zu unübersichtlich, um mir das genauer anzuschauen.
    So viel Code sollte man nicht in einem Eventhandler notieren - da ist die Auslagerung in eine Funktion schon der deutlich bessere Weg.

    Nun möchte ich gerne mittels Javascript eine Checkfunktion haben, so dass der User mit einem alert aufgefordert wird mindestens eine Checkbox anzukreuzen.
    Vermutlich in dem Moment, wo er das Formular abschickt?
    Dazu kannst du onSubmit benutzen.

    Dann dachte ich mir, dass es bei dem zweiten Weg (Link + onclick) vielleicht die Möglichkeit gebe, eine Funktion zu schreiben, die prüft ob der Link geklickt wurde, aber auch diesbezüglich habe ich nichts gefunden.
    Wenn der Link geklickt wird (*), rufst du doch eine Javascript-Funktion auf - also setze dir in dieser eine globale Variable, die du dann onSubmit wieder abprüfen kannst.


    (*) Wozu überhaupt der Link, wenn es gar kein vernünftiges Linkziel gibt? Du kannst onClick auf so gut wie jedem Element benutzen, also auch direkt auf dem Bild - also lasse den sinnfreien Link drumherum weg.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      Vielen Dank für deine Antwort und sorry wegen der Unübersichtlichkeit..

      Das mit dem Link werde ich beherzigen.

      Mit onSubmit ist mir das klar, nur nicht wie eine funktionierende Check Function aussehen könnte. Mit document.form.name.checked ==false funktioniert es ja nicht, da ich als input type "hidden" habe.

      Nun zu der globalen Variable. Wie gesagt ich bin ein absoluter Newbie... Könntest du das näher erklären und vielleicht ein Beispiel posten?

      thanks

      Kommentar

      • #4
        Setze dir im <script>-Bereich im head der Seite eine Variable als Flag:
        Code:
        var mindestensEinKlick = false;
        Die Funktion, die du onClick aufrufst, ändert den Wert dieses Flags von false auf true:
        Code:
        function CheckBox(...) {
   mindestensEinKlick = false;
   ... // weiterer Funktionscode
}
        Und beim Absenden kontrollierst du mittels onSubmit, ob dieses Flag jetzt true ist:

        Code:
        function CheckForm() {
  if(!mindestensEinKlick) {
    alert("Bitte kreuze mindestens eine Checkbox an!");
    return false; // dies verhindert das Abschicken des Formulars
  }
  else {
    return true; // damit wird das Formular zum Abschicken freigegeben
  }
}
        und im Formular der Aufruf dieser Funktion:
        Code:
        <form onSubmit="return CheckForm()" ...>
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar

        • #5
          Danke!!!

          Jetzt ist mir das Ganze etwas klarer. Werde ich gleich mal ausprobieren und posten, obs gefunzt hat!

          Grüße
          Sonja

          Kommentar

          Vorherige template Weiter
          Lädt...
          X