✔ Kombinierte Radio Buttons mit URL-Weiterleitung

J

julchen84

Grünschnabel
Hallo Leute,

nehmts mir bitte nicht übel, aber ich bin ein absoluter Javascript-Neulinge und steh deswegen irgendwie auf dem Schlauch... :-(

Also hier zu meiner Frage:
Auf meiner Startseite sollen die User mittels Radiobuttons ein Bundesland und eine Branche auswählen. Beim Klick auf den Submit-Button, soll dann die entsprechende Url aufgehen, also z. B. Nutzer wählt "Berlin" und "Handwerker" und wird dann auf die Seite berlin.html#handwerker weitergeleitet. Wenn entweder kein Bundesland oder keine Branche ausgwählt wurde, soll eine Fehlermeldung erscheinen.

Leider weiß ich gar nicht wie ich anfangen soll und ob javascript überhaupt das richtige dafür ist. :( Kann mir von euch jemand helfen? Wäre total klasse!

Danke schonmal im Voraus
Jule
 
Hi,

in die value-Attribute der Radiobuttons könntest du die gewünschten Teile der URL schreiben (bayern, nrw oder handwerker, arzt).

In einer Funktion werden die Radiogruppen durchlaufen und geprüft, ob und welcher gewählt wurde. Mit dem Wert eines gecheckten Button wird die URL entsprechend erweitert.

Beispiel:
Code: 
<html>
<head>
<script type="text/javascript">
<!--
function mySubmit(objForm){
  // Array, das die zu prüfenden Radiogruppen enthält
  // [index][0] -> Name der Gruppe
  // [index][1] -> Teil vor dem Ausgabestring
  // [index][2] -> Teil nach dem Ausgabestring
  var arrCheck = [["radBL", "", ".html"], ["radBeruf", "#", ""]];

  var blnCheck = false;
  var strURL = "";

  // Testarray durchlaufen
  for(var j=0; j<arrCheck.length; j++){
    // Testvariable zurücksetzen
    blnCheck = false;

    // Radiogruppe durchlaufen
    for(var i=0; i<objForm.elements[arrCheck[j][0]].length; i++){
      // Falls der aktuelle Radiobutton gesetzt ist
      if(objForm.elements[arrCheck[j][0]][i].checked){
        // URL ergänzen
        strURL += arrCheck[j][1] + objForm.elements[arrCheck[j][0]][i].value + arrCheck[j][2]; //".html";
        blnCheck = true;
      }
    }

    // War kein Radiobutton gewählt -> Funktion verlassen
    if(!blnCheck) return false;
  }
  // Auf gewünschte URL weiterleiten
  window.location = strURL;

  return false;
}
//-->
</script>

</head>
<body>
<form name="formTest" action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post">
  <p><input type="Radio" name="radBL" value="bayern">Bayern
  <input type="Radio" name="radBL" value="nrw">NRW</p>
  <p><input type="Radio" name="radBeruf" value="handwerker">Handwerker
  <input type="Radio" name="radBeruf" value="arzt">Arzt</p>
  <input type="submit" name="cmdTest" value="GO" onclick="return mySubmit(this.form);">
</form>
</body>
</html>

Die wichtigsten Passagen sind im Quellcode kommentiert und sollten leicht verständlich sein.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück