JS - Hinweise in Formular bei Falscheingabe

I

ildottore

Grünschnabel
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 :D
 
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
 
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
 
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.
 
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: 
<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.
 
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>
 
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...
 
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
 
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 :D

Klickt man einen weiteren Radiobutton an passiert nichts.

meine Formularelemente haben folgenden Eventhandler:

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

Die Funktion dazu schaut so aus:

HTML: 
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.
 
Zuletzt bearbeitet:
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>
...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück