Radiobutton automatisch auf checked setzen

[Momo]

Hi, ich habe ein kleines JavaScript Problem.

Ich habe zwei Radiobuttons, zu dem jeweils ein Textfeld gehört.

Oft passiert es, dass User zwar etwas in das Textfeld schreiben, aber vergessen den dazugehörigen Radiobutton zu aktivieren.

Daher wäre es sinnvoll, wenn ein User etwas in das Textfeld schreibt, dass der dazugehörige Radiobutton automatisch auf checked gesetzt wird.

Kennt jemand dazu einen Lösungsansatz in JavaScript?

[Dennis]

Hi Momo,

Kennt jemand dazu einen Lösungsansatz in JavaScript?

1. Du setzt zu Beginn mit Javascript das Textfeld auf disabled, und per Klick auf das den Radio Button wird es wieder re-disabled (*g*)

2. Du löst durch onBlur bei dem Textfeld eine Javascript Funktion aus, die überprüft, ob das Textfeld nicht leer ist und dann den entsprechenden Radio Button auswählt.

Das wären so die beiden Grundmöglichkeiten, wie du vorgehen kannst.

MfG, Dennis.

[Momo]

Hallo Dennis,
2. Lösung würde wohl ehr zusagen, leider bin ich nicht so der JavaScript Guru.... wie könnte sowas als Beispiel aussehen?

2. Du löst durch onBlur bei dem Textfeld eine Javascript Funktion aus, die überprüft, ob das Textfeld nicht leer ist und dann den entsprechenden Radio Button auswählt.

[Dennis]

Hi Momo,

2. Du löst durch onBlur bei dem Textfeld eine Javascript Funktion aus, die überprüft, ob das Textfeld nicht leer ist und dann den entsprechenden Radio Button auswählt.

(Diese) Lösung würde wohl ehr zusagen, leider bin ich nicht so der JavaScript Guru.... wie könnte sowas als Beispiel aussehen?

Nun, erst brauchst du eine Javascript Funktion zum prüfen:

function pruefen(wert,element)
{
  if(wert != "")
  {
     document.getElementById(element).checked = true;
  }
}

Dann müsstest du dein Formular in etwas so aufbauen:

<input type="radio" name="irgendwas" id="radiobutton1" value="ja">Ja
<input type="radio" name="irgendwas" id="radiobutton2" value="nein">Nein

<textarea cols="30" rows="5" name="text" onBlur="pruefen(this.value,'radiobutton1');"></textarea>

Die Funktion bewirkt folgendes:

Der als 1. Parameter übergebene Wert wird überprüft ob er nicht leer ist, wenn er nicht leer ist, wird das Element mit der ID, die als 2. Parameter übergeben wurde auf ckecked gesetzt.

Du könntest du Funktion also auch so aufrufen:

pruefen("irgendein wert", "idvonirgendeinemradiobutton");

Statt als ersten Parameter einen String anzugeben, wird dort einfach mit this.value Rückbezug auf das Value des aktuellen Elements genommen.

Du kannst diese Funktion also universell einsetzen.

Wenn noch was unkklar sein sollte, dann frag halt nochmal nach ;-)

MfG, Dennis.

[Momo]

Hi Dennis,

erstmal vielen Dank, dass du dir Heiligabend die Zeit für einen JavaScript Dummy nimmst ;-)

Also.. im Prinzip ist es das was ich möchte, aber der RadioButton soll sobald der User ins Feld klick aktiviert werden. OnFocus funktioniert leider nicht. Wenn du dazu noch eine Lösung hättest, wäre es genial

[Dennis]

Hi Momo,

erstmal vielen Dank, dass du dir Heiligabend die Zeit für einen JavaScript Dummy nimmst ;-)

Bitte :-)

Also.. im Prinzip ist es das was ich möchte, aber der RadioButton soll sobald der User ins Feld klick aktiviert werden. OnFocus funktioniert leider nicht. Wenn du dazu noch eine Lösung hättest, wäre es genial

Ok, dann mach es so:

function set_checked(element)
{
  if(document.getElementById(element))
  {
    document.getElementById(element).checked = true;
  }
}

function controll_checked(wert, element)
{
  if(!wert.match(/^\s+$/) && wert != "")
  //Wenn wert nicht nur aus White Spaces besteht und nicht leer ist
  {
     document.getElementById(element).checked = true;
  }
  else
  {
   document.getElementById(element).checked = false;
  }
}

Dann kannst du für die Textarea verwenden:

<textarea rows="4" cols="30" onFocus="set_checked('radiobutton1');" onBlur="controll_checked(this.value, 'radiobutton1');"></textarea>

Was jetzt passieren sollte ist, dass beim Anwählen des Elementes der Radiobutton mit der ID "radiobutton1" ausgewählt werden sollte und beim Verlassen des Textfeldes wird überprüft, ob im Textfeld etwas drin steht, ist dies nicht der Fall, wird der Radio button wieder re-ausgewählt.

MfG, Dennis.

[Momo]

Ja perfekt :-)

Na dann mal ein frohes Fest ;-)

[Dennis]

Hi Dennis,

function controll_checked(wert, element)
{
  if(!wert.match(/^\s+$/) && wert != "")
  //Wenn wert nicht nur aus White Spaces besteht und nicht leer ist
  {
     document.getElementById(element).checked = true;
  }
  else
  {
   document.getElementById(element).checked = false;
  }
}

Hier dürfte es noch zu Fehlern kommen, falls das Element nicht existiert, deshalb besser das Ganze noch so schreiben:

function controll_checked(wert, element)
{
  if(!wert.match(/^\s+$/) && wert != "")
  //Wenn wert nicht nur aus White Spaces besteht und nicht leer ist
  {
    if(document.getElementById(element)) //Wenn element existiert
    {
      document.getElementById(element).checked = true;
    }
  }
  //Sonst element auf nicht-ausgewählt setzen
  else
  {
    if(document.getElementById(element)) //Wenn element existiert
    {
      document.getElementById(element).checked = false;
    }
  }
}

MfG, Dennis.

[Ingo Turski]

Hi,

Also.. im Prinzip ist es das was ich möchte, aber der RadioButton soll sobald der User ins Feld klick aktiviert werden.

Wozu soll das gut sein? Wozu benötigst Du überhaupt einen Radio-Button? Wenn der User das Eingabefeld leer läßt ist das doch bereits ausreichend um zu erkennen, daß dieser Punkt nicht benötigt wird.

freundliche Grüße
Ingo

[Momo]

Dies macht Sinn, wenn es zu weiteren Radiobutton abhänigen Eingaben kommt. Z.B. verschiedene Zahlarten. Einige Zahlarten benötigen weiteren Eingaben des User.

Sicher ist es nicht zwingend nötig, aber es trägt zur Usability eines Formulares bei.

Und da wir ja alle wissen, dass Formulare der kritischte Faktor beim E.Business sind, sollte man sie so einfach und benutzerfreundlich wie möglich gestalten

Button? Wenn der User das Eingabefeld leer läßt ist das doch bereits ausreichend um zu erkennen, daß dieser Punkt nicht benötigt wird.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

Dies macht Sinn, wenn es zu weiteren Radiobutton abhänigen Eingaben kommt. Z.B. verschiedene Zahlarten. Einige Zahlarten benötigen weiteren Eingaben des User.

Ok, da hast Du Recht. Wobeoi ich davon ausgehe, daß Du noch serverseitig die Eingaben auf Plausibilität überprüfst.

freundliche Grüße
Ingo

[Momo]

Bisher sieht es so aus und funktioniert auch.

<form name="TestForm" action="">
<input type="radio" name="testradiobutton" value="">
Name: <input type="text" name="Eingabe" onFocus="CheckInhalt(this.value)"><br>
</form>
<script type="text/javascript">
function CheckInhalt(Feld){
document.getElementsByName("testradiobutton")[0].click();
}
</script>

Nu habe ich aber mehere Radiobuttons und die anderen müssen dann natürlich deaktiviert werden... Hilfe?