Automatische Markierung eines Radiobuttons bei Klick in Textfeld

[marc_013]

Hallo!

Ich habe ein Formular, indem aus verschiedenen Optionen per Radiobutton eine ausgewählt werden kann. Einige dieser Optionen erfordern wiederum eine Eingabe in ein Textfeld oder die Auswahl aus einer Select-Liste.
Nun klicken die User sehr gerne in das Textfeld oder bedienen die Select-Liste, machen ihre Eingabe und schicken das Forumlar ab, ohne den dazugehörigen Radiobutton ausgewählt zu haben.

Wie kann ich zumindest bei denen, die JavaScript aktiviert haben, dafür sorgen, dass, wenn man den Cursor in eins der Textfelder setzt, automatisch der dazugehörige Radiobutton aktiviert wird?

Das Formular sieht bislang so aus:

<form name="postordner" action="postordner.php" method="post">

<div id="formular">
  <p style="text-align:center;text-decoration:underline;">
   Ordneroptionen
  </p>

<p>
    <input type="radio" name="option" value="ordner_neu">
    Neuen Ordner anlegen:
    <input type="text" size="24" name="ordnername1" value="Ordnername" class="postordner">
  <p>

<p>
      <input type="radio" name="option" value="ordner_rename">
      Diesen Ordner umbenennen in
      <input type="text" size="24" name="ordnername2" value="Ordnername" class="postordner">
    <p><p>
      <input type="radio" name="option" value="ordner_delete">
      Diesen Ordner samt Inhalt l&ouml;schen
    <p><p>
      <input type="radio" name="option" value="ordner_move">

Diesen Ordner l&ouml;schen und Inhalt nach
       <select size="1" name="zielordner">
        <option value="Standard">Hauptordner</option>  </select>
      verschieben
    <p>  <p style="text-align:center">
     <input type="hidden" name="current" value="Privat">
   <input type="image" src="../../img/uebernehmen.gif" alt="&Auml;nderungen &uuml;bernehmen">
  </p>

</div>
 </form>

Da der Rest der Seite, insbesondere der Head-Bereich per include eingebunden wird, und auf praktisch jeder Seite der Homepage benutzt wird, wäre es gut, wenn das JavaScript in dem Formular untergebracht werden könnte.

Danke!

marc.

[Cheatah]

Hi,

Wie kann ich zumindest bei denen, die JavaScript aktiviert haben, dafür sorgen, dass, wenn man den Cursor in eins der Textfelder setzt, automatisch der dazugehörige Radiobutton aktiviert wird?

was hast Du versucht, und woran ist es gescheitert? Du solltest übrigens nicht den Zeitpunkt des Cursor-Setzens wählen, sondern den der Texteingabe, da ansonsten eine Tastatursteuerung praktisch unmöglich wird.

Cheatah

[Ashura]

Hallo Cheatah.

Du solltest übrigens nicht den Zeitpunkt des Cursor-Setzens wählen, sondern den der Texteingabe, da ansonsten eine Tastatursteuerung praktisch unmöglich wird.

Oh, stimmt. Da hast du Recht, onfocus ist in der Tat etwas ungeeignet.

Einen schönen Sonntag noch.

Gruß, Ashura

[Cybaer]

Hi,

Oh, stimmt. Da hast du Recht, onfocus ist in der Tat etwas ungeeignet.

Man kann den Eventhandler aber auch löschen und erneut fokussieren bzw. wohl auch den Radiobutton beim Fokussieren wieder defokussieren. Dann ist vermutlich das zuletzt vorher fokussierte Element wieder fokussiert (also die Textarea).

Gruß, Cybaer

[marc_013]

was hast Du versucht, und woran ist es gescheitert? Du solltest übrigens nicht den Zeitpunkt des Cursor-Setzens wählen, sondern den der Texteingabe, da ansonsten eine Tastatursteuerung praktisch unmöglich wird.

Um ehrlich zu sein, hab ich nur ziellos versucht, über eine Suchmaschine was rauszukriegen. Aber mir fehlt das JavaScript-Wissen um überhaupt sinnvoll suchen zu können.

Ich denke aber, mit Ashuras Stichworten werde ich jetzt was rausfinden.

Danke Euch beiden!

marc.

[Ashura]

Hallo marc_013.

Wie kann ich zumindest bei denen, die JavaScript aktiviert haben, dafür sorgen, dass, wenn man den Cursor in eins der Textfelder setzt, automatisch der dazugehörige Radiobutton aktiviert wird?

Am einfachsten wirst du es wohl haben, wenn du jeder Radiobox eine ID verpasst, worauf du dann mittels getElementById zugreifen kannst.

Dort kannst du dann auch mittels setAttribute das Attribut checked auf „checked“ setzen.

Achja, der Wechsel sollte wohl am Besten mittels onfocus realisiert werden.

Das Formular sieht bislang so aus:

[...]

Anmerkung: nutze bitte das label-Element.

BTW: Ich danke dir für den aussagekräftigen Threadtitel, dies ist leider eine Seltenheit.

Einen schönen Sonntag noch.

Gruß, Ashura

[marc_013]

Hallo, Ashura,

danke erstmal für Deine Hinweise.

Mein JavaScript-Wissen ist leider noch recht beschränkt. Nach einigem Recherchieren hab ich jetzt dies probiert:

<p>
    <input type="radio" name="option" value="ordner_neu" id="neu">
    Neuen Ordner anlegen:
    <input type="text" size="24" name="ordnername1" value="Ordnername" class="postordner"
     onChange = "document.getElementById('neu')[0].setAttribute( 'checked', true );">
  </p>

Aber das funktioniert nicht. Kannst Du mir nochmal auf die Sprünge helfen, was daran nicht stimmt?

Danke!

marc.

[Ashura]

Hallo marc_013.

<p>

<input type="radio" name="option" value="ordner_neu" id="neu">
    Neuen Ordner anlegen:
    <input type="text" size="24" name="ordnername1" value="Ordnername" class="postordner"
     onChange = "[code lang=javascript]document.getElementById('neu')[0].setAttribute( 'checked', true );

>   </p>[/code]  
>   
> Aber das funktioniert nicht. Kannst Du mir nochmal auf die Sprünge helfen, was daran nicht stimmt?  
  
Du solltest dir noch einmal verinnerlichen, [wofür](http://de.selfhtml.org/html/attribute/allgemeine.htm#uebersicht) ID steht und welche besondere Eigenschaft diesem Attribut innewohnt.  
  
  
Einen schönen Sonntag noch.  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)  
Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0  
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)

[marc_013]

Ich hab's. Danke schön!

[Cybaer]

Hi,

Ich hab's. Danke schön!

Funktioniert aber unnötigerweise nur in modernen Browsern (was Du natürlich vorher geprüft hast?!), nicht z.B. mit Netscape Navigator 4.

Einfacher: <textarea onfocus="document.forms["formname"].elements[2].checked;">

Statt "2" halt die richtige Nummer des gewünschten Radiobuttons eintragen.

Gruß, Cybaer

[wahsaga]

hi,

Nun klicken die User sehr gerne in das Textfeld oder bedienen die Select-Liste, machen ihre Eingabe und schicken das Forumlar ab, ohne den dazugehörigen Radiobutton ausgewählt zu haben.

die reine (theoretische) HTML-lösung:
input in ein label schachteln, dass dem radio-button zugeordnet ist.

mozilla kann's; IE zeigt beim überfahren des input eine art hover-effekt für den radiobutton an, kreuzt ihn beim reinklicken ins input aber nicht an; opera reagiert darauf gar nicht.

na ja, theorie und praxis halt ...

gruß,
wahsaga

[marc_013]

die reine (theoretische) HTML-lösung:

Auch nicht schlecht. Werd mir das mal angucken.
Deine Signatur ist übrigens großartig. :-)

marc.