Prüfen ob ein Radio Feld markiert ist

[steffi arnold]

Hallo Webbies,

ich habe einige Radio Boxen, z.B.:

<input type="radio" name="auswahl" value="frage">
<input type="radio" name="auswahl" value="antwort">
<input type="radio" name="auswahl" value="angebot">

Nun versuche im mit javscript zu prüfen ob ein Feld ausgefüllt wurde, aber es geht nicht

function chkPayment()
{
   alert(document.form1.auswahl.value);
}

Er sagt immer das das Feld nicht definiert.

Wie kann ich prüfen ob ein Radio Element angeklickt ist.

Steffi

[Dennis]

Hi steffi,

function chkPayment()
{
   alert(document.form1.auswahl.value);
}

Er sagt immer das das Feld nicht definiert.

Richtig, denn da es ja mehrere Elemente mit dem selben Namen gibt, werden die so angesprochen:

document.form1.auswahl[0].value;  
document.form1.auswahl[1].value;  
document.form1.auswahl[2].value;

Auf diese Art und Weise kannst du also nicht rausfinden, welches Element angeklickt ist.

Wie kann ich prüfen ob ein Radio Element angeklickt ist.

Du kannst die Eigenschaft checked abfragen - die ist true oder false, je nachdem, ob das Element angeklickt ist oder nicht.

Was du also machen musst, ist nacheinander alle Felder abzufragen und so herrauszufinden, welches ausgewählt ist - denke aber auch daran, dass keins der Elemente ausgewählt sein kann.

So könnte das ungefähr aussehen:

function chkPayment()  
{  
   for(var i = 0; i < document.getElementsByName('auswahl').length; i++)  
   {  
     if(document.getElementsByName('auswahl')[i].checked == true)  
     {  
        return document.getElementsByName('auswahl')[i].value;  
     }  
   }  
   return false;  
}

Diese kleine Funkion liefert dir entweder den Wert des Value Attributes von dem Feld zurück, welches ausgewählt ist, oder false, wenn kein Radio Buttons ausgewählt ist.

MfG, Dennis.

[steffi arnold]

hi dennis,

ich habe dein beispiel mal umgebaut, so wie es bei mir lauten müsste:

function chkPayment()
{
   var okay = false;
   for(var i = 0; i < document.formpayment.getElementsByName('payment').length; i++)
   {
     if(document.formpayment.getElementsByName('payment')[i].checked == true)
     {
        okay = true;
     }
   }
   if (okay == false)
   {
      alert("Sie haben keine Zahlungsart ausgewählt");
      return false;
   }
}

Die Funktion wird ausgeführt, sobald der Form abgeschickt wird. Leider wird keine Meldung angezeigt, wenn ich nichts ausgewählt habe.

Ist da noch was dran falsch?

steffi

Hi steffi,

function chkPayment()
{
   alert(document.form1.auswahl.value);
}

Er sagt immer das das Feld nicht definiert.

Richtig, denn da es ja mehrere Elemente mit dem selben Namen gibt, werden die so angesprochen:

document.form1.auswahl[0].value;

document.form1.auswahl[1].value;
document.form1.auswahl[2].value;

>   
> Auf diese Art und Weise kannst du also nicht rausfinden, welches Element angeklickt ist.  
>   
>   
> > Wie kann ich prüfen ob ein Radio Element angeklickt ist.  
>   
> Du kannst die Eigenschaft checked abfragen - die ist true oder false, je nachdem, ob das Element angeklickt ist oder nicht.  
>   
> Was du also machen musst, ist nacheinander alle Felder abzufragen und so herrauszufinden, welches ausgewählt ist - denke aber auch daran, dass keins der Elemente ausgewählt sein kann.  
>   
> So könnte das ungefähr aussehen:  
>   
> ~~~javascript

function chkPayment()  

> {  
>    for(var i = 0; i < document.getElementsByName('auswahl').length; i++)  
>    {  
>      if(document.getElementsByName('auswahl')[i].checked == true)  
>      {  
>         return document.getElementsByName('auswahl')[i].value;  
>      }  
>    }  
>    return false;  
> }

Diese kleine Funkion liefert dir entweder den Wert des Value Attributes von dem Feld zurück, welches ausgewählt ist, oder false, wenn kein Radio Buttons ausgewählt ist.

MfG, Dennis.

[Dennis]

Hi steffi,

Die Funktion wird ausgeführt, sobald der Form abgeschickt wird. Leider wird keine Meldung angezeigt, wenn ich nichts ausgewählt habe.

Die Funktion an sich scheint ok zu sein - ich sehe da keinen (logischen) Fehler drin.

Ich vermute, der Fehler ist beim Abschicken des Formulars zu suchen - wie bindest du die Javascript Funktion denn ein? Etwa so:

<input type="submit" value="Abschicken" onClick="chkPayment()">

Dann dürfte es vermutlich so sein, dass zu dem Zeitpunkt wo chkPayment aufgerufen wird, das Formular schon abgeschickt wird und somit die Meldung gar nicht mehr kommen kann.

Bau es mal so ein:

<input type="submit" value="Abschicken" onClick="return chkPayment()">

Dazu müsstest du die Javascript Funktion noch ein bisschen anpassen:

function chkPayment()  
{  
  var okay = false;  
  for(var i = 0; i < document.formpayment.getElementsByName('payment').length; i++)  
  {  
    if(document.formpayment.getElementsByName('payment')[i].checked == true)  
    {  
       okay = true;  
    }  
  }  
  if (okay == false)  
  {  
    alert("Sie haben keine Zahlungsart ausgewählt");  
    return false;  
  }  
  return true;  
}

MfG, Dennis.

PS: Verzichte bitte auf solche "Full-Quotes", also dass du einfach das komplette Posting des Vorgängers noch unten dran stehen hast. Du kannst dich auf einzelne Textstellen beziehen, so wie ich es jetzt auch gemacht habe. Ansonste lösche das Vorposting aus der Textarea einfach ganz raus.

[steffi arnold]

Hi Dennis,

der sagt mir immer, dass das Objekt diese Eigenschaft oder Methode nicht unterstützt. Ich habe mal eine abgespeckte Version gebaut:

test.htm
-------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
<!--
function chkPayment()
{
   var okay = false;
   for(var i = 0; i < document.form_payment.getElementsByName('payment').length; i++)
   {
     if(document.form_payment.getElementsByName('payment')[i].checked == true)
     {
        okay = true;
     }
   }
   if (okay == false)
   {
      alert("Sie haben keine Zahlungsart ausgewählt");
      return false;
   }
   return true;
}

//-->
</script>

<br><br>
<form name="form_payment" action="continue.php" method="post" onSubmit="return chkPayment()">
  <table border="0" width="500">
    <tr>
      <td colspan="2" valign="top" class="main" height="9"><b><font size="4">Schritt
        2: W&auml;hlen Sie eine Zahlart</font></b><br>
        &nbsp;<a href="javascript:chkPayment()"><img src="test.gif" border="0"></a>
      </td>
    </tr>
  </table>
  <br>
  <table width="500" border="0">
    <tr class="moduleRow">
      <td width="32">
        <input type="radio" name="payment" value="banktransfer">
      </td>
      <td class="main" width="921"><b>Lastschriftverfahren</b></td>
    </tr>
    <tr class="moduleRow">
      <td width="32">
        <input type="radio" name="payment" value="cc">
      </td>
      <td class="main" width="891"><b>Kreditkarte (Euro Card, Visa)</b></td>
    </tr>
    <tr class="moduleRow">
      <td width="32">
        <input type="radio" name="payment" value="moneyorder">
      </td>
      <td class="main" width="867"><b>Vorkasse</b></td>
    </tr>
  </table>
  <br>
  <table border="0" width="500">
    <tr>
      <td nowrap>
        <input type="image" src="continue.gif" border="0">
      </td>
    </tr>
  </table>
   </form>
   </body>
</html>
-------------------

Habe oben in der ersten Tabelle mal ein Bild eingefügt und die Funktion testweise aufzurufen und dann kommen auch schon die Fehler.

Vielleicht siehst du da ja was dran.

Liebe Grüße

Steffi

Hi steffi,

Die Funktion wird ausgeführt, sobald der Form abgeschickt wird. Leider wird keine Meldung angezeigt, wenn ich nichts ausgewählt habe.

Die Funktion an sich scheint ok zu sein - ich sehe da keinen (logischen) Fehler drin.

Ich vermute, der Fehler ist beim Abschicken des Formulars zu suchen - wie bindest du die Javascript Funktion denn ein? Etwa so:

<input type="submit" value="Abschicken" onClick="chkPayment()">

Dann dürfte es vermutlich so sein, dass zu dem Zeitpunkt wo chkPayment aufgerufen wird, das Formular schon abgeschickt wird und somit die Meldung gar nicht mehr kommen kann.

Bau es mal so ein:

<input type="submit" value="Abschicken" onClick="return chkPayment()">

Dazu müsstest du die Javascript Funktion noch ein bisschen anpassen:

function chkPayment()

{
  var okay = false;
  for(var i = 0; i < document.formpayment.getElementsByName('payment').length; i++)
  {
    if(document.formpayment.getElementsByName('payment')[i].checked == true)
    {
       okay = true;
    }
  }
  if (okay == false)
  {
    alert("Sie haben keine Zahlungsart ausgewählt");
    return false;
  }
  return true;
}

>   
>   
> MfG, Dennis.  
>   
> PS: Verzichte bitte auf solche "Full-Quotes", also dass du einfach das komplette Posting des Vorgängers noch unten dran stehen hast. Du kannst dich auf einzelne Textstellen beziehen, so wie ich es jetzt auch gemacht habe. Ansonste lösche das Vorposting aus der Textarea einfach ganz raus.

[Siechfred]

Tag steffi.

der sagt mir immer, dass das Objekt diese Eigenschaft oder Methode nicht unterstützt.

"Der" hat Recht:

[...] document.form_payment.getElementsByName('payment').length [...]

getElementsByName() ist eine Methode des document-Objektes. So, wie du es schreibst, wäre es eine Eigenschaft des form-Objektes, was es aber definitiv nicht ist. Du meinst vermutlich die Eigenschaft checked. Vereinfacht:

function check_payment() {  
  var payment_ok = false;  
  var payment_array = document.Formularname.Name_der_Radiobuttons;  
  for( i = 0; i<payment_array.length; i++) {  
    if( payment_array[i] == true ) payment_ok = true;  
  }  
  return payment_ok;  
}

Und der Aufruf der Funktion:

if( !check_payment() ) alert("Bitte waehlen Sie eine Zahlungsart aus.");

Siechfred