• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Formular mit Radiobuttons: Feedback bei fehlenden Angaben

P

p<0.05

Neues Mitglied
Liebes Forum,

ich habe ein Problem mit HTML Formularen:

Ich möchte den TeilnehmerInnen an einer Umfrage per Javascript ein Feedback geben, falls sie vergessen haben Angaben zu machen. Falls die Teilnehmenden die Angaben absichtlich leer gelassen haben, sollen Sie in der Lage sein, das Formular unvollständig abzusenden, wenn sie die Angaben jedoch tatsächlich vergessen haben, sollen sie die Möglichkeit haben, die fehlenden Angaben zu ergänzen.

Das Formular besteht aus mehreren Blöcken von Radiobuttons und die HTML sieht gerade so aus:

HTML: 
<form method="post" id="myForm" onsubmit="return validateForm()">

<table border="0" width="100%" height="70%" align="center">


<tr>
<td colspan="10">Geben Sie bitte für jede Aussage an, wie sehr Sie ihr zustimmen. Bitte lassen Sie keine Frage aus.
1 = völlige Ablehnung und 7 = völlige Zustimmung. </td>
</tr>


<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td></td>
<td colspan="5">völlige</td>
<td colspan="5" align="right">völlige</td>
</tr>
<tr>
<td></td>
<td colspan="5">Ablehnung</td>
<td colspan="5" align="right">Zustimmung</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 1</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="7" >7</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 2</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="7" >7</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 3</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="7" >7</td>
</tr>


<tr><td><br><br><br></td></tr>

<tr><td><input type=submit value="Weiter"></td></tr>


</table></form>

Mir wurde in einem anderen Forum (ich poste nun hier, weil dort niemand mehr geantwortet hat) geraten eine javascript Funktion "validateForm" zu schreiben, die beim submit ausgeführt wird. Diese Funktion soll also:
  1. Prüfen, ob alle Radiobutton-Gruppen beantwortet wurden.
  2. Falls alle beantwortet wurden, soll das Formular gepostet werden und zur nächsten Seite gegangen werden.
  3. Falls jedoch nicht alle Fragen beantwortet wurden soll gefragt werden: "Sie haben nicht alle Fragen auf dieser Seite beantwortet, möchten Sie fortfahren, ohne diese Fragen zu bearbeiten?"
  4. Wenn der oder die UserIn nun "Ja" klickt soll die Seite unverändert abgeschickt werden und bei "Nein" soll, sie nicht abgeschickt werden (sie kann dann weiter bearbeitet werden).
Dafür wurden verschiedene Vorschläge gemacht, die ich aber nicht verstanden habe. Hier einer davon:
HTML: 
     $('YOUR FORM').on('submit',function(){
        var isChecked = validateForm();
          if(!isChecked){
           confirm('Please note that you didn't answer all of the questions on this page');
           }
        });
        function validateForm() {
              var isValid = true;
              $('.form-field').each(function() {
                if ( $(this).val() === '' )
                    isValid = false;
              });
              return isValid;
            }
(mehr Vorschläge sind hier zu finden: http://stackoverflow.com/questions/...h-feedback-if-user-didnt-answer-all-questions)

Ich verstehe aber, wie gesagt, nicht wie und wo ich diesen Code einbauen soll. Kann mir jemand von euch/Ihnen weiterhelfen? Am hilfreichsten wäre es, wenn ihr in eurer Antwort den Code, den ich oben gepostet habe verwendet.

Danke im Voraus!
Gruß Benjamin
 
Zuletzt bearbeitet:
Eine Prüfung per JavaScript ist ja ganz fein, aber bitte die serverseitige Prüfung nachher nicht vernachlässigen.

Dein oben genannter Vorschlag wäre ein Lösung mit jQuery. jQuery musst du erst in deinem Dokumt einbinden, bevor du es nutzen kannst. (Dazu mal ein Link http://www.html-seminar.de/jquery-tutorial.htm) Der Vorschlag von oben prüft alle Felder daraufhin ob sie leere Strings enthalten,und gibt dann ein boolschen Wert zurück. Wenn dies der Fall ist bekommt der Benutzer eine Nachricht, das einige Felder noch leer sind. Aufgerufen wird die Prüfung dann beim Klicken des Submit-Buttons(on.submit).
 
Danke Nitamud! Das hat schon geholfen. Ich habe jQuery heruntergeladen und lokal im selben Verzeichnis wie die html abgespeichert. Den Quellcode habe ich abgeändert, aber es erscheint kein Hinweis, wenn ich auf "Weiter" klicke.

Was könnte denn noch falsch sein?

Hier der komplette HTML Quellcode:

HTML: 
<style>body, table, {
font: 14pt Arial; color: #000040;
background: #FFFFF;  margin: 10px;
}

input, textarea, select, submit  {
font: 14pt Arial;
    color: #004000;
    margin-top: .33em}
        
input.radio, input.checkbox {
  height:1em; width:1em}

a, a:active, a:visited {color: #000040; text-decoration: underline}
a:hover    {color: #004000}
</style>



<head>
    <meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
    <title>ASI22</title>
    <link rel='stylesheet' type='text/css' href='css/main_effectance.css' media='screen' charset='iso-8859-1' />
    <link rel='stylesheet' type='text/css' href='css/bogus.css' media='screen' charset='iso-8859-1' />

<script type="text/javascript" src="jquery-1.11.2.js">
     $('myForm').on('submit',function(){
        var isChecked = validateForm();
          if(!isChecked){
           confirm('Please note that you did not answer all of the questions on this page');
           }
        });
        function validateForm() {
              var isValid = true;
              $('.form-field').each(function() {
                if ( $(this).val() === '' )
                    isValid = false;
              });
              return isValid;
            }
</script>   
   
   
</head>
<body>
    <!-- der Uni-Header -->
    <div id="unibi"> </div>
    <div id="hline"> </div>
    <!-- Seiteninhalt -->
    <div id="content">


<form method="post" id="myForm" onsubmit="return validateForm()">

<table border="0" width="100%" height="70%" align="center">


<tr>
<td colspan="10">Geben Sie bitte für jede Aussage an, wie sehr Sie ihr zustimmen. Bitte lassen Sie keine Frage aus.
1 = völlige Ablehnung und 7 = völlige Zustimmung. </td>
</tr>


<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td colspan="10"> </td>
</tr>

<tr>
<td></td>
<td colspan="5">völlige</td>
<td colspan="5" align="right">völlige</td>
</tr>
<tr>
<td></td>
<td colspan="5">Ablehnung</td>
<td colspan="5" align="right">Zustimmung</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 1</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="7" >7</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 2</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="7" >7</td>
</tr>

<tr><td><br></td></tr>

<tr>
<td>Question 3</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="7" >7</td>
</tr>


<tr><td><br><br><br></td></tr>

<tr><td><input type=submit value="Weiter"></td></tr>


</table></form> 
</body>
 
Beheb erstmal die Fehler im Html: http://validator.w3.org/#validate_by_input
Zudem solltest du dir überlegen ob die tabellarische Form, die richtige Umsetzung ist.

Es handelt sich hier schließlich nicht um Inhalte, die man normalerweise tabellarisch ausgibt.
Eine Formatierung kann man dann per CSS erreichen. Zudem benutzt du einige veraltete Elemente
wie die aligns im HTML-Code. Probier das durch die im Validator gezeigten Fehler zu beheben,
bevor du dich an die Auswertung machst :)
 
Sorry, aber ich bin leider Anfänger. Ich weiß nicht wie ich es mit CSS bewerkstelligen soll. Ist das nötig? Es geht mir hauptsächlich um die Rückmeldung per jQuery. Könntest du evtl. ein Minimalbeispiel bringen? Ich komme mit dem Validator auch nicht zurecht - ja, da werden einige Fehler angezeigt, aber ich weiß nicht wie ich die behebe...
 
Mithilfe von Markup Validation Service bin ich jetzt auf dem folgenden Stand:
HTML: 
<!DOCTYPE HTML SYSTEM>
<html>

<head>
    <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
    <title>ASI22</title>
    <link rel='stylesheet' type='text/css' href='css/main_effectance.css' media='screen' charset='iso-8859-1'>
    <link rel='stylesheet' type='text/css' href='css/bogus.css' media='screen' charset='iso-8859-1'>
<script type="text/javascript" src="jquery-1.11.2.js">
     $('myForm').on('submit',function(){
        var isChecked = validateForm();
          if(!isChecked){
           confirm('Please note that you did not answer all of the questions on this page');
           }
        });
        function validateForm() {
              var isValid = true;
              $('.form-field').each(function() {
                if ( $(this).val() === '' )
                    isValid = false;
              });
              return isValid;
            }
</script> 
  
  
</head>
<body>
    <!-- der Uni-Header -->
    <div id="unibi"> </div>
    <div id="hline"> </div>
    <!-- Seiteninhalt -->
<form action="" method="post" id="myForm" onsubmit="return validateForm()">
<table border="0" width="100%" align="center">
<tr>
<td colspan="10">Geben Sie bitte für jede Aussage an, wie sehr Sie ihr zustimmen. Bitte lassen Sie keine Frage aus.
1 = völlige Ablehnung und 7 = völlige Zustimmung. </td>
</tr>
<tr>
<td colspan="10"> </td>
</tr>
<tr>
<td colspan="10"> </td>
</tr>
<tr>
<td colspan="10"> </td>
</tr>
<tr>
<td colspan="10"> </td>
</tr>
<tr>
<td></td>
<td colspan="5">völlige</td>
<td colspan="5" align="right">völlige</td>
</tr>
<tr>
<td></td>
<td colspan="5">Ablehnung</td>
<td colspan="5" align="right">Zustimmung</td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>Question 1</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_01" value="7" >7</td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>Question 2</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_02" value="7" >7</td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>Question 3</td>
<td></td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="1" >1</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="2" >2</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="3" >3</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="4" >4</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="5" >5</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="6" >6</td>
<td width="40" align="center"><input type=radio class = "form-field"  name="<ml.varname>_03" value="7" >7</td>
</tr>
<tr><td><br><br><br></td></tr>
<tr><td><input type=submit value="Weiter"></td></tr>
</table></form>
</body>
</html>

Allerdings funktioniert das javascript immer noch nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben