JS - Hinweise in Formular bei Falscheingabe @ tutorials.de: Tutorials, Forum & Hilfe

ildottore · 25.12.11 19:41

Hallo Leute!

Ich bastle gerade ein umfangreiches Formular mit relativ vielen Radiobuttons.

Bei 3 Auswahlen die besonders wichichtig sind kommt eine Alert Message.
Bei einigen anderen soll auch eine Benachrichtigung kommen, aber ich möchte dies nicht mit Alert umsetzen, da es sonst für den User sehr nervig wird.

Ich hab da an so eine Art einblendung neben den Radiobuttons gedacht, die auftaucht, wenn diese angeklickt wird.

Mit stehen HTML/JavaScript/CSS zur Verfügung. Mit JQuery bin ich noch nicht vertaut.

Das 2. was ich gerne im Script hätte, wäre eine Prozentbalken der sich je nachdem wieviele Checkboxen oder Felder man schon angeklickt/ausgefüllt hat füllt.

Kann man das mit den Mittel die mir zur Verfügung stehen umsetzen?
Wenn ja - wie mach ich es?

Danke schon mal

javaDeveloper2011 · 25.12.11 20:33

Hi,

füge einfach neben den radiobuttens ein SPAN ein und gieb ihm eine ID.
Sprich das dann per JS über die ID an und setze innerHTML.
Ganz oben im Scipt sollten dann wieder all innerHTML auf "" gesetzt werden, damit keine alten Fehlermeldungen bestehen bleiben.

Ne Progress-Bar ist auch nicht so schwahr:

einfache Variante: ein andersfarbiges div im anderen.
Dann per JS die style.width des inneren DIV prozentual zur festen des äußeren DIV setzen. (Je nach dem wie viel schon richtig ausgefüllt wurde)

schönere Variante:
jQuery-ProgressBar

Gruß javaDeveloper2011

ildottore · 25.12.11 21:55

Hi!

Danke für die schnelle Antwort.

Ich bin schon beim herumprobieren

Jetzt tut sich aber gleich zu Beginn ein Problem auf.

Mein Radio Button hat eine ID und der SPAN Tag.
Wie spreche ich nun beide Elemente in JS korrekt an?

Wenn ich getElementById auf den SPAN Tag mache, dann erscheint der Hinweis egal welchen Radiobutton man drückt.

lg

javaDeveloper2011 · 25.12.11 22:09

Hi,

du brauchst natürlich für jeden Radiobutton ein eigenes Span bzw. für jeden Ort, an dem eventuell ne Fehlermeldung erscheinen soll!
IDs müssen grundsätzlich dokument-weit einzigartig sein.

ildottore · 25.12.11 23:08

Hallo!

Nachdem ich nicht ganz zusammenkomme poste ich hier mal ein Beispiel.
Ziel wäre, dass wenn man auf NEIN bei der 2. Frage klickt eine Meldung daneben erscheint.

Wenn dann auf JA geklickt wird soll die Meldung wieder verschwinden.

Hier der Code:

HTML-Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uebung</title>

</head>
<script type="text/javascript">

function show(divid) {
obj = document.getElementById(divid);
obj.style.display = 'block';}
 
function hide(divid) {obj =
document.getElementById(divid);
obj.style.display = 'none';
}

function ghost() {
hide('checkbutton');
}

function checkme() {

check = 1;


if (document.getElementById('italytrue').checked == false && document.getElementById('italyfalse').checked == false) { check = 0; }

if (document.getElementById('bierTRUE').checked == false && document.getElementById('bierFALSE').checked == false) { check = 0; }


  if (check==1) {
                        show('checkbutton');
                        }
                        else { hide('checkbutton');
						 }
}


function ausgabe() {
	
	
if (document.getElementById('italytrue').checked == true) var urlaub = "Du bist also schon mal in Italien gewesen.";
if (document.getElementById('italyfalse').checked == true) var urlaub = "Fahr doch mal hin!";

if (document.getElementById('bierTRUE').checked == true) var getraenk = "Ausgezeichnet!";
if (document.getElementById('bierFALSE').checked == true) var getraenk = "Schade...";

var text = "Deine Antwort:" + "<p>" + urlaub + "<p>" + getraenk;	

document.write(text);
}


</script>

<body onload="ghost();">

<p>&nbsp;</p>
<table width="839" height="176" border="0">

  <form id="TEST" name="TEST" method="post" action="">
     <tr>
       <td width="303" height="40" class="beschriftung">Warst du schon mal in Italien?</td>
       <td width="174"><span class="beschriftung">
        <input type="radio" name="Land" id="italytrue" value="italytrue" onclick="javascript:checkme()" />
         ja
           <input type="radio" name="Land" id="italyfalse" value="italyfalse" onclick="javascript:checkme()" />
           nein</label>
    
    </td>
       <td width="348">&nbsp;</td>
     </tr>
     <tr>
       <td height="59" class="beschriftung">Trinkst du gerne Bier?</td>
       <td class="beschriftung"><input type="radio" name="drink" id="bierTRUE" value="bierTRUE" onclick="javascript:checkme()" />
         ja
         <input type="radio" name="drink" id="bierFALSE" value="bierFALSE" onclick="javascript:checkme()" />
         nein</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
       <td height="54"><input type="submit" name="Senden" id="checkbutton" onclick="ausgabe();" value="Senden" /></td>
     </tr>
  </form>

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

Danke für eure Unterstützung.

javaDeveloper2011 · 25.12.11 23:38

Hi,

was hältst du davon:

Code :

<tr>
    <td height="59" class="beschriftung">Trinkst du gerne Bier?</td>
    <td class="beschriftung">
        <input type="radio" name="drink" id="bierTRUE" value="bierTRUE" onclick="checkme(); document.getElementById('message').innerHTML = 'Ich bin eine Meldung!';">ja
        <input type="radio" name="drink" id="bierFALSE" value="bierFALSE" onclick="checkme(); document.getElementById('message').innerHTML = '';" />nein</td>
    <td class="beschriftung" id="message"></td>
</tr>

ildottore · 26.12.11 16:38

Hello

Jap, so hats funktionert.
Besten Dank!
Das es doch so einfach geht, hätt ich nicht gedacht.
Meine ersten Ansätze waren da viel zu kompliziert...

ildottore · 27.12.11 10:50

Hello again

Nun probier ich die Fortschrittsanzeige in meinem Formular.

Ich hab nun 2 DIV Container erstellt.
Einen für den Hintergrund (weiss) und einen mit Farbe, der den Fortschritt anzeigt.

Was mit jetzt noch fehlt wäre eine Funktion, welche den "width" Wert ändert, sobald man einen Radiobutton anklickt bzw. etwas in ein Feld schreibt.
In Summe sind es 13 Elemente die ich in meinem Formular habe.

Ich hätte mir gedacht, dass man bei jedem Element sowas wie onClick=erhöhe width um 7,70%

Ist sowas mit HTML/JS/CSS möglich, oder bedingt das jQuery?

Danke schon mal!

lg

ildottore · 27.12.11 11:38

Update

Aktueller Stand:

Wenn das Formular aufgerufen wird, dann ist der Balken leer (0%).
Wenn man den ersten Radiobutton anklickt baut sich der Statusbalken auf 7,7% auf.

- soweit passt es mal

Klickt man einen weiteren Radiobutton an passiert nichts.

meine Formularelemente haben folgenden Eventhandler:

HTML-Code:

onClick="javascript:checkme(); javascript:progressbar(7.7);

Die Funktion dazu schaut so aus:

HTML-Code:

function progressbar(percent) {

document.getElementById('progress').style.width = percent+"%";	
	
}

Wie füge ich nun eine Addition ein, dass 7.7% + 7.7% etc... gerechnet wird, je nachdem welche Radiobuttons angeklickt werden?

Update

Ich hab jetzt mal die Werte in den Klammern geändert bzw. bei jedem Element erhöht.
Wenn man in der Korrekten Reihenfolge durchklickt kommt man zum Ergebnis.

Schöner würd ichs aber finden, wenn die funktion die werte addiert.

Martin Honnen · 27.12.11 16:20

Definiere eine Variable

Code :

<html>
<head>
...
<script type="text/javascript">
var progress = 0;
 
function progressbar(percent) {
  progress += percent;
  document.getElementById('progress').style.width = progress + '%';
}
</script>
...

ildottore · 21.01.12 20:43

Hallo!

Ich habe es nun mit dem Code von Martin versucht.

Dabei sind ein paar Probleme aufgetaucht:

Irrt man sich in einer Radio-Button Gruppe und selektiert eine andere Checkbox, wird dies in meinem Fortschrittsbalken 2-fach gewertet.

Schreibt man etwas in ein Textfeld wird dies im Balken korrekt angezeigt. -> löscht man den Inhalt wieder, dann geht der Balken jedoch nicht zurück.

Dies war bei meiner "starren" Variante nicht so.

Was kann ich dagegen tun?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Falscheingabe in einem Jtextfield abfangen

Webapplikation - bei Falscheingabe Web-Applikation mit Fehlerausgabe beenden?

Excel Drop Down Feld Falscheingabe verhindern

Word: Hinweise am Rand?

unsinnige Hinweise auf Netiquette ?!

E-Mail:

Abonnieren Abbestellen