✔ bei onChange vorherige Auswahl zurücksetzen

F

frankys9

Mitglied
Hallo Leute,

ich habe mir ein Formular gebastelt und mit einiger Hilfe auch eine JavaScript Funktion integriert (danke noch mal an alle die geholfen haben).

Das ganze schaut wie folgt aus:
HTML: 
<script type="text/javascript">  
<!--  

function setDisplay(theValue){ 
    if (theValue == "a") { 
        document.getElementById("xBereich").style.display="none"; 
        document.getElementById("yBereich").style.display="none"; 
    } else (theValue == "b") { 
        document.getElementById("xBereich").style.display="block"; 
        document.getElementById("yBereich").style.display="none";     
    } else (theValue == "c") { 
        document.getElementById("xBereich").style.display="none"; 
        document.getElementById("yBereich").style.display="block"; 
    } else (theValue == "d") { 
        document.getElementById("xBereich").style.display="none"; 
        document.getElementById("yBereich").style.display="none"; 
    } 
} 
//-->  
</script> 
 
<body onload="setDisplay('a')"> 

<div> 
  <form id="kontakt" action="" method="post"> 
  <h2>Reiseanfrage</h2> 
  <fieldset id="reiseart"> 
  <legend>Gew�nschte Reiseart</legend> 
  <div> 
   <select id="mySelect" onchange="setDisplay(this.value)"> 
     <option value="a" selected="selected">gewünschte Reiseart wählen</option> 
     <option value="b">Gruppenreise</option> 
     <option value="c">Individuelle Reise</option> 
     <option value="d">Nur Flug</option> 
   </select> 
  </div> 
  <div id="xBereich"> 
<input id="smallgroup" name="xgroup" value="kleine Gruppe" type="radio" /><label for="smallgroup">kleine Gruppe</label> 
<input id="biggroup" name="xgroup" value="grosse Gruppe" type="radio" /><label for="biggroup">grosse Gruppe</label><br /> 
<input id="deutsch" name="lang" value="deutschsprachig" type="radio" /><label for="deutsch">deutschsprachig</label> 
<input id="englisch" name="lang" value="englischsprachig" type="radio" /><label for="englisch">englischsprachig</label><br /> 
<input id="camping" name="place" value="Campingunterkunft" type="radio" /><label for="camping">Campingunterkunft</label> 
<input id="middleclass" name="place" value="Hotel Mittelklasse" type="radio" /><label for="middleclass">Hotel Mittelklasse</label> 
<input id="heightclass" name="place" value="Hotel Luxoriös" type="radio" /><label for="heightclass">Hotel Luxuriös</label><br /> 
   <p> 
Bitte beachten Sie, dass Reisen, die in kleinen Gruppen durchgeführt werden sowie deutschsprachig geführte Reisen immer preislich etwas über liegen als 
    englischsprachige Reisen und Reisen in größeren Gruppen. 
   </p> 
  </div> 
  <div id="yBereich"> 
   <input id="pkw" name="indicar" value="mit PKW" type="radio" /><label for="pkw">mit PKW</label> 
   <input id="camper" name="indicar" type="radio" /><label for="camper">mit Camper</label> 
   <input id="4wd" name="indicar" type="radio" /><label for="4wd">mit 4 WD</label><br /> 
  </div> 
    </fieldset> 
    </form> 
</div>
Das Script funktioniert soweit auch super, nun moechte ich es aber ganz gern erweitern und bin mir nicht sicher ob und wie es möglich ist.

Also wenn z.B. der xBereich eingeblendet ist und der User dort ein Radio Button auswaehlt soll dieser wieder zurueckgesetzt werden wenn eine neue auswahl erfolgt (also der Bereich wieder ausgeblendet wird).

Ist das moeglich? Wenn ja koennt Ihr mir sagen wie ich das anstellen kann ?

Vielen Dank
 
Hi,

definiere Dir eine neue Funktion, der du das Objekt enthält, welches die Radiobuttons enthält, die zurück
gesetzt werden sollen. In der Routine ermittelst Du ein Array mit allen Inputelementen. Das Feld wird durchlaufen
und alle Radiobuttons zurück gesetzt.
Code: 
function setDisplay(theValue){
    if (theValue == "a") {
        document.getElementById("xBereich").style.display="none";
        document.getElementById("yBereich").style.display="none";
        resetRadio(document.getElementById("xBereich"));
        resetRadio(document.getElementById("yBereich"));
    } else if(theValue == "b") {
        document.getElementById("xBereich").style.display="block";
        document.getElementById("yBereich").style.display="none";
        resetRadio(document.getElementById("yBereich"));
    } else if(theValue == "c") {
        document.getElementById("xBereich").style.display="none";
        document.getElementById("yBereich").style.display="block";
        resetRadio(document.getElementById("xBereich"));
    } else if(theValue == "d") {
        document.getElementById("xBereich").style.display="none";
        document.getElementById("yBereich").style.display="none";
        resetRadio(document.getElementById("xBereich"));
        resetRadio(document.getElementById("yBereich"));
    }
}

function resetRadio(objDiv){
  // Alle Input-Elemente innerhalb des übergebenen Objektes ermitteln
  arrRadio = objDiv.getElementsByTagName("input");
  // Input-Kollektion durchlaufen
  for(i=0; i<arrRadio.length; i++){
    // Falls es sich um einen Radiobutton handelt -> zurücksetzen
    if(arrRadio[i].type.toLowerCase() == "radio")
      arrRadio[i].checked = false;
  }
}

In Deiner Funktion müssen die else-Zeige durch else if ersetzt werden.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Hallo Quaese,

ich habe inzwischen mein Problem wie folgt gelöst:

PHP: 
if (theValue == "b") {
        document.getElementById("xBereich").style.display="block";
        document.getElementById("yBereich").style.display="none";
        document.getElementById("pkw").checked = false;
        document.getElementById("camper").checked = false;
        document.getElementById("4wd").checked = false;
Das ist sicher nicht die Beste Lösung aber ich kenne mich mit JavaScript auch noch nicht so gut aus.

Verbesserungsvorschläge sind natürlich auch sehr willkommen!

Trotzdem Vielen Dank für deine Mühe!!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück