Probleme mit Show/hide in Formularen

Radagast

Hallo,

bin leider in JavaScript Laie daher komme ich nicht weiter.
Ich möchte das in einem Formular mit Auswahlfeld, bei einer bestimmten Auswahl ein weiteres Textfeld erscheint.

Code

if(document.getElementById('Test')[3].selected == true) {     
       document.getElementById('layer').style.visibility = 'visible';}

Code

<select name="Test" id="Test" onchange="divZeigen()"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
</select> 
<div id="layer" style="visibility:hidden"> 
  <br><input type="text" name="Test1" size="45" value="Bitte angeben" onFocus="if(this.value==defaultValue)this.value='';">
</div>

Funktioniert auch, jedoch klickt der User auf 8 und dann auf aktualisieren, dann steht im Auswahlfeld auch 8, aber der 2. Layer ist weg.

Wie kann ich das machen, damit dieser da bleibt?

Danke bereits jetzt für Eure Hilfe!!!!

lg

Radagast

synaptic

HTML

<html>
<head>
  <title></title>
  <script>
  function divZeigen(){
          if(document.getElementById("Test").selectedIndex == 3) {   
             document.getElementById("layer").style.visibility = 'visible';
         }

  }
  </script>
</head>
<body>
<select name="Test" id="Test" onchange="divZeigen();"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
</select> 
<div id="layer" style="visibility:hidden;"> 
  <br>
  <input type="text" name="Test1" size="45" value="Bitte angeben" onFocus="if(this.value=='Bitte angeben')this.value='';">
</div>
</body>
</html>

Alles anzeigen

so wird beim ausgewählten index von 3 (also der vierte eintrag des dropdowns) des ding angezeigt...!

edit:
ach moment.. hab nur die hälfte auf anhieb kapiert...
des soll ja nachm aktualisieren auch so bleiben...
das kannste mit javascript nicht realisieren solange du nur ein fenster hast...
da brauchste nen zweites fenster für oder eben was serverseitiges wie php...

Radagast

Hallo,

danke für Deine Antwort.
Bin nun auf folgendes draufgekommen.
Erstellt man 2 solche Auswahlfelder, klickt beim ersten auf 4 erscheint das Textfeld. Drückt man dann auf aktualisieren, steht beim ersten Auswahlfeld zwar 4 aber das Textfeld ist weg. Klickt man beim 2. Auswahlfeld auf B erscheinen beide Textfelder.
Kann das einer erklären, wieso? Kann man da draus was machen dass es doch funktioniert?

HTML

<html>
<head>
  <title></title>
  <script>
function divZeigen() {
    if(document.getElementById('Test')[3].selected == true) {     
      document.getElementById('layer').style.visibility = 'visible';}  


    if(document.getElementById('Test2')[1].selected == true) {     
      document.getElementById('layer2').style.visibility = 'visible';}  


}
             </script>
</head>
<body>
<select name="Test" id="Test" onchange="divZeigen();"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
</select> 
<div id="layer" style="visibility:hidden;"> 
  <br>
  <input type="text" name="Test-1" size="45" value="Bitte angeben" onFocus="if(this.value=='Bitte angeben')this.value='';">
</div>


<select name="Test2" id="Test2" onchange="divZeigen();"> 
  <option>A</option> 
  <option>B</option> 
  <option>C</option> 
  <option>D</option> 
</select> 
<div id="layer2" style="visibility:hidden;"> 
  <br>
  <input type="text" name="Test2-1" size="45" value="Bitte angeben" onFocus="if(this.value=='Bitte angeben')this.value='';">
</div>
</body>
</html>

Alles anzeigen

synaptic

die problematik bei der ganzen sache ist, dass du bei nem reoad der seite alles was mit dem script zu tun hat zurücksetzt. mir kommt grad die idee der cookies in den sinn..
da hab ich gestern nicht dran gedacht, weil ich noch nie wirklich damit gearbeitet habe.
du könntest beim auswählen der textfelder nen cookie schreiben und das dann beim laden der seite direkt auslesen lassen, dadurch könntest du dann entsprechend die visibility der divs steuern, die auswahl der dropdowns bleibt ja bestehen (obwohl bei der geingen mende an infos kannste auch die position der dropdowns speichern)

Radagast

danke für Deine Hilfe,

habs jetzt so ähnlich via asp-Script gemacht und funktioniert ganz gut

danke!!!:D

synaptic

kannst ja mal für die allgemeinheit deine lösung posten...

Radagast

gerne...

muß gestehen, dass das Problem mit dem aktualisieren nicht gelöst ist, mir ist es mehr darum gegangen dass bei Kontrolle der Felder die angegebenen Daten wieder zu sehen sind, und das funktioniert jetzt:

in asp:

HTML

<%
Co2 = true


if Request.Form("Weiter") <> "" then


    Control = true
    strTest = Request("Test")
    strVorname = Request("Vorname")
    strTesta = Request("Testa")


    if strVorname = "" then
        Control = false
        Co2 = false
    end if


    if Control = true then Response.write "Super"

end if


%>
<html>
<head>
<title></title>
<script type="text/javascript">
    function divZeigen() {
      if(document.getElementById('Test')[3].selected == true) {     
    document.getElementById('layer').style.visibility = 'visible';}  
        else {document.getElementById('layer').style.visibility = 'hidden';}
    }
</script>


</head>




<body>
    <form name="form1" method="post" action="">
        Test <select name="Test" id="Test" onchange="divZeigen();"> 
          <option<% if strTest = "1" then Response.write " selected" %>>1</option> 
          <option<% if strTest = "2" then Response.write " selected" %>>2</option> 
          <option<% if strTest = "3" then Response.write " selected" %>>3</option> 
          <option<% if strTest = "4" then Response.write " selected" %>>4</option> 
        </select> 
<% if strTest = "4" then %>                         
        <div>
<% else %>
        <div id="layer" style="visibility:hidden;"> 
<% end if
     if strTesta <> "" then 
         strVal = strTesta
     else
        strVal = "Bitte angeben"
     end if
%>


          <br>
          <input type="text" name="Testa" size="45" <% Response.write "value='" & strVal & "'" %> onFocus="if(this.value=='Bitte angeben')this.value='';">
        </div>


       Name <input type="text" name="Vorname" size="45"<% if strVorname <>"" then Response.write "value='" & strVorname & "'" %>>
<%
     if Co2 = false then
        Response.write "<span class=TextFehler>------ Bitte eingeben!</span>"
     end if
%>              
        <input type="submit" name="Weiter" value=" Weiter ">
    </form>
</body>
</html>

Alles anzeigen

Man sieht ein Formular mit 1 Auswahlfeld und 1 Textfeld.
Wählt man im Auswahlfeld 4 dann kommt ein zusätzliches Textfeld.
Gibt man im "Name"-Textfeld nichts an und klickt auf absenden, dann kommt dieselbe Seite nochmal mit der Bitte um Eingabe. Dabei bleibt das erste Auswahlfeld+evtl. Textfeld erhalten.

Auf dass es irgendjemanden nutzen möge.

lg

Radagast

synaptic

sollte ich heut früh genug mit dem after-sylvester-hausputz fertig werden probier ich mal die cookie-variante.. denn asp is ja auch serverside

synaptic

also mit cookies funzt des ganze auch, habs jetzt aber nur auf deine version speziell zugeschnitten...

HTML

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function getVerfall(){
            var verf = new Date();
            verf.setTime(verf.getTime()+ (1000*60)); //Keks für 1 minute gültig 
            return verf;
        }


        function divZeigen(index, obj, layer) {
            if(document.getElementById(obj).selectedIndex == index) {   
                document.getElementById(layer).style.visibility = 'visible';
                setzeKeks(obj, index, getVerfall());
            }
        }


        function setzeKeks(name, wert, verfall){
            document.cookie = escape(name) + "=" +escape(wert) + ";path=/" +
            ((verfall == null) ? "" : "; verfall=" +verfall.toGMTString()); 
        }


        function holKeks(name){
            var keksname = name + "=";
            var dc = document.cookie;
            var anfang;
            var ende;
            if(dc.length > 0){
                anfang = dc.indexOf(keksname);
                if(anfang != -1){
                    anfang += keksname.length;
                    ende = dc.indexOf(";", anfang);
                    if(ende == -1){
                        ende = dc.length;
                    }
                return unescape(dc.substring(anfang, ende));
                }
            }
            return null;
        }

        function checkKekse(){
            var targets = document.getElementsByTagName("select");
            for(i = 0; i < targets.length; i++){
                if(targets[i].id == "Test"){
                    divZeigen(holKeks("Test"), targets[i].id, 'layer');
                }
                if(targets[i].id == "Test2"){
                    divZeigen(holKeks("Test2"), targets[i].id, 'layer2');
                }
            }
        }
    </script>
</head>
<body onload="checkKekse();">
    <select name="Test" id="Test" onchange="divZeigen(3, 'Test', 'layer');"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
    </select> 
    <div id="layer" style="visibility:hidden;"> 
        <br>
        <input type="text" name="Test-1" size="45" value="Bitte angeben" onFocus="if(this.value=='Bitte angeben')this.value='';">
    </div>
    <br>
    <select name="Test2" id="Test2" onchange="divZeigen(1, 'Test2', 'layer2');"> 
        <option>A</option> 
        <option>B</option> 
        <option>C</option> 
        <option>D</option> 
    </select> 
    <div id="layer2" style="visibility:hidden;"> 
        <br>
        <input type="text" name="Test2-1" size="45" value="Bitte angeben" onFocus="if(this.value=='Bitte angeben')this.value='';">
    </div>
</body>
</html>

Alles anzeigen

Probleme mit Show/hide in Formularen

Tags

Benutzer online in diesem Thema