• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kontaktformular, Bilder der Dropdown Elemente verschwinden immer

C

correl

Neues Mitglied
Hallo zusammen,
ich verzweifel schon fast. Ich habe hier ein Formular gebaut. Wenn man die einzelnen Dropdown Boxen wählt, erscheint rechts im freien feld, das dazugehörige Bild, zb. Land Deutschland, dann kommt die deutsche Flagge.
Wähle ich nun im nächsten Feld Jalousieart einen Punkt, dann wird zwar das Bild für die Jalousieart gezeigt, aber die Deutschland Flagge verschwindet dann. Der Sinn dieser Unternehmung ist nun, die Bilder sollen pro Dropdown Feld sichtbar bleiben. Wenn ich dann alles gewählt habe und am Ende fällt mir ein, will doch ne andere Bedienseite, dann soll nur das Bild der Bedienseite ausgetauscht werden und die anderen bleiben unberührt.
Ich hoffe ihr könnt mir da helfen. Das ganze ist für eBay gedacht, deshalb muss man mit Javascript besonders vorsichtig umgehen, da ebay viele Scripte blockt.

Code: 
<style type="text/css">table.kontakt_form_zusammenhalt {
    border: solid #CCC 1px;
    width: 598px;
}
td.kontakt_form_titel {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #f04405;
    font-weight: 700;
}
td.kontakt_form_info {
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    color: #999
}
td.kontakt_form_left {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #999;
    width: 90px;
    text-align: right;
}
td.kontakt_form_right {
    width: 210px;
    text-align: left;
}
td.kontakt_form_right select {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
}
td.kontakt_form_right input {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
}
td.kontakt_form_right textarea {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
    height: 100px;
    resize: none
}
td.kontakt_form_right input.button {
    width: 100px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 12;
    color: #666
}
td.kontakt_form_right_big {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #999
}
div.kontakt_form_farben img {
    width: 120px;
}
</style>


  <script language="javascript">
var stat = false;
function form_auswahl(id) {
if (stat) document.getElementById(stat).style.display = "none";
document.getElementById(id).style.display = "";
stat = id;
}
</script>
  <form name="dwmailer" action="" enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
    <table class="kontakt_form_zusammenhalt">
      <tr>
        <td colspan="3" class="kontakt_form_titel">Kontaktformular für maßgefertige Aluminium Jalousien</td>
      </tr>
      <tr>
        <td colspan="3" class="kontakt_form_info">Bitte f&uuml;llen Sie alle mit * markierten Felder aus. (Pflichtfelder)</td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Anrede</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_anrede">
            <option value="Herr">Herr</option>
            <option value="Frau">Frau</option>
            <option value="Firma">Firma</option>
          </select></td>
        <td rowspan="12" align="right" valign="top" class="kontakt_form_right_big"><!-- Länder-->
          
          <div class="kontakt_form_flaggen"> <span style="display:none" id="Deutschland">Land<br>
            <img src="flagge_deutschland.jpg">
            <hr>
            </span> <span style="display:none" id="Österreich">Land<br>
            <img src="flagge_oesterreich.jpg">
            <hr>
            </span> <span style="display:none" id="Frankreich">Land<br>
            <img src="flagge_frankreich.jpg">
            <hr>
            </span> <span style="display:none" id="Italien">Land<br>
            <img src="flagge_italien.jpg">
            <hr>
            </span> <span style="display:none" id="Dänemark">Land<br>
            <img src="flagge_daenemark.jpg">
            <hr>
            </span>
             </div>
          
          <!-- Jalousieart-->
          
          <div class="kontakt_form_jalousieart"> <span style="display:none" id="Freihängend">Jalousieart<br>
            <img src="sol_jalousie_freihaengend.jpg">
            <hr>
            </span> <span style="display:none" id="Seitenführung">Jalousieart<br>
            <img src="sol_jalousie_seitenfuehrung.jpg">
            <hr>
            </span> </div>
          
          <!-- Montageart-->
          
          <div class="kontakt_form_montageart"> <span style="display:none" id="Rahmen">Montageart<br>
            <img src="http://sol_jalousie_freihaengend.jpg">
            <hr>
            </span> <span style="display:none" id="Rahmen-Klemmhalter">Montageart<br>
            <img src="sol_jalousie_seitenfuehrung.jpg">
            <hr>
            </span> <span style="display:none" id="Wand-Decke">Montageart<br>
            <img src="sol_jalousie_seitenfuehrung.jpg">
            <hr>
            </span> </div>
          
          <!-- Bedienseite-->
          
          <div class="kontakt_form_bedienseite"> <span style="display:none" id="Links">Bedienseite<br>
            <img src="sol_jalousie_links.jpg">
            <hr>
            </span> <span style="display:none" id="Rechts">Bedienseite<br>
            <img src="sol_jalousie_rechts.jpg">
            <hr>
            </span> </div>
          
          <!-- Lamellenfarben-->
          
          <div class="kontakt_form_farben"> <span style="display:none" id="1001">Lamellenfarbe<br>
            <img src="1001.jpg">
            <hr>
            </span> <span style="display:none" id="1005">Lamellenfarbe<br>
            <img src="1005.jpg">
            <hr>
            </span> <span style="display:none" id="1015">Lamellenfarbe<br>
            <img src="1015.jpg">
            <hr>
            </span> <span style="display:none" id="1106">Lamellenfarbe<br>
            <img src="1106.jpg">
            <hr>
            </span> </div></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Name*</td>
        <td class="kontakt_form_right"><input type="text" name="absender_name" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Ihre E-Mail*</td>
        <td class="kontakt_form_right"><input type="text" name="absender_mail" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Land</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_land" onchange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Deutschland">Deutschland</option>
            <option value="Österreich">Österreich</option>
            <option value="Frankreich">Frankreich</option>
            <option value="Italien">Italien</option>
            <option value="Dänemark">Dänemark</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">fertige Breite in cm</td>
        <td class="kontakt_form_right"><input type="text" name="absender_breite" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">fertige Höhe in cm</td>
        <td class="kontakt_form_right"><input type="text" name="absender_hoehe" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Jalousieart</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_jalousieart" onchange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Freihängend">Freihängend</option>
            <option value="Seitenführung">mit Seitenführung</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Montage</td>
        <td class="kontakt_form_right">
          <select  size="1" name="absender_montage" onchange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Rahmen">auf den Rahmen</option>
            <option value="Rahmen-Klemmhalter">auf den Rahmen mit Klemmhalter</option>
            <option value="Wand-Decke">Wand/ Decke</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Bedienseite</td>
        <td class="kontakt_form_right">
          <select onchange="form_auswahl(this[this.selectedIndex].value)"size="1" name="absender_bedienseite">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Links">Links</option>
            <option value="Rechts">Rechts</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Lamellenfarbe</td>
        <td class="kontakt_form_right">
          <select size="1" name="absender_farbe" onchange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="1001">1001 verkehrsweiß</option>
            <option value="1005">1005 signalweiß</option>
            <option value="1015">1015 weizen</option>
            <option value="1106">1106 elfenbein</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Ihr Anliegen</td>
        <td class="kontakt_form_right">
          <textarea name="ihre_bemerkung" id="ihre_bemerkung"></textarea></td>
      </tr>
    </table>
  </form>
 
Die Fehlersuche wäre einfacher, wenn du einen Link zu einer Seite hättest, die das Problem veranschaulicht. Gerade weil es hier darum geht, ob Bilder angezeigt werden oder nicht. Deine Bilder hat lokal keiner. Und ich persönlich würde mir ehrlich gesagt nicht die Mühe machen, andere Bilder einzubinden, nur um dein Problem nachvollziehen zu können. Vielleicht sehen das andere User verschieden.
 
Hallo,
oh entschuldige, ja mit Grafiken geht es besser. Hab mal ein paar externe Grafiken eingebunden. Nun sollte es klar sein was ich möchte :-)
Code: 
<style type="text/css">table.kontakt_form_zusammenhalt {    border: solid #CCC 1px;
    width: 598px;
}
td.kontakt_form_titel {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #f04405;
    font-weight: 700;
}
td.kontakt_form_info {
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    color: #999
}
td.kontakt_form_left {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #999;
    width: 90px;
    text-align: right;
}
td.kontakt_form_right {
    width: 210px;
    text-align: left;
}
td.kontakt_form_right select {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
}
td.kontakt_form_right input {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
}
td.kontakt_form_right textarea {
    width: 200px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 11;
    color: #999;
    height: 100px;
    resize: none
}
td.kontakt_form_right_big {
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
    color: #999
}
div.kontakt_form_farben img {
    width: 120px;
}


div.kontakt_form_flaggen img {
    width: 120px;
}


div.kontakt_form_jalousieart img {
    width: 120px;
}


div.kontakt_form_montageart img {
    width: 120px;
}
</style>




  <script language="javascript">
var stat = false;
function form_auswahl(id) {
if (stat) document.getElementById(stat).style.display = "none";
document.getElementById(id).style.display = "";
stat = id;
}
</script>
  <form>
    <table class="kontakt_form_zusammenhalt">
      <tr>
        <td colspan="3" class="kontakt_form_titel">Kontaktformular für maßgefertige Aluminium Jalousien</td>
      </tr>
      <tr>
        <td colspan="3" class="kontakt_form_info">Bitte f&uuml;llen Sie alle mit * markierten Felder aus. (Pflichtfelder)</td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Anrede</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_anrede">
            <option value="Herr">Herr</option>
            <option value="Frau">Frau</option>
            <option value="Firma">Firma</option>
          </select></td>
        <td rowspan="12" align="right" valign="top" class="kontakt_form_right_big"><!-- Länder-->
          
          <div class="kontakt_form_flaggen"> <span style="display:none" id="Deutschland">Land<br>
            <img src="http://www.welt-blick.de/flaggen/deutschland2.gif">
            <hr>
            </span> <span style="display:none" id="Österreich">Land<br>
            <img src="http://www.flaggen-server.de/europa2/oesterreich_g.gif">
            <hr>
            </span> <span style="display:none" id="Frankreich">Land<br>
            <img src="http://www.nationalflaggen.de/media/flags/flagge-frankreich.gif">
            <hr>
            </span> <span style="display:none" id="Italien">Land<br>
            <img src="http://www.nationalflaggen.de/media/flags/flagge-italien.gif">
            <hr>
            </span> <span style="display:none" id="Dänemark">Land<br>
            <img src="http://www.nationalflaggen.de/media/flags/flagge-daenemark.gif">
            <hr>
            </span>
             </div>
          
          <!-- Jalousieart-->
          
          <div class="kontakt_form_jalousieart"> <span style="display:none" id="Freihängend">Jalousieart<br>
            <img src="http://www.jalousieshop.net/UserFiles/Image/montageanleitungen/jalousieshop-montage-jalousie-freihaengend-img02.jpg">
            <hr>
            </span> <span style="display:none" id="Seitenführung">Jalousieart<br>
            <img src="http://sonnenschutz-meisterbetrieb.de/images/product_images/original_images/4656_0.gif">
            <hr>
            </span> </div>
          
          <!-- Montageart-->
          
          <div class="kontakt_form_montageart"> <span style="display:none" id="Rahmen">Montageart<br>
            <img src="http://www.jalousien-star.de/images/montage-rahmen-g.jpg">
            <hr>
            </span> <span style="display:none" id="Rahmen-Klemmhalter">Montageart<br>
            <img src="http://www.jalousien-star.de/images/montage-klemm-g.jpg">
            <hr>
            </span> <span style="display:none" id="Wand-Decke">Montageart<br>
            <img src="http://www.jalousien-star.de/images/montage-vorNische-g.jpg">
            <hr>
            </span> </div>
          
          <!-- Bedienseite-->
          
          <div class="kontakt_form_bedienseite"> <span style="display:none" id="Links">Bedienseite<br>
            <img src="http://www.handelsring.com/jalousie/konfigurator/modelle_gr/rechteck_zw_l.png">
            <hr>
            </span> <span style="display:none" id="Rechts">Bedienseite<br>
            <img src="http://www.handelsring.com/jalousie/konfigurator/modelle_gr/rechteck_zw_r.png">
            <hr>
            </span> </div>
          
          <!-- Lamellenfarben-->
          
          <div class="kontakt_form_farben"> <span style="display:none" id="1001">Lamellenfarbe<br>
            <img src="http://www.hellweg.de/out/pictures/generated/product/2/665_665_75/463267_jalousie_alu_rot_03.png">
            <hr>
            </span> <span style="display:none" id="1005">Lamellenfarbe<br>
            <img src="http://ecx.images-amazon.com/images/I/41k6BcHANbL._SL500_AA300_.jpg">
            <hr>
            </span> <span style="display:none" id="1015">Lamellenfarbe<br>
            <img src="http://www.cg-sonnenschutz.de/public/pictures/1/mint.jpg">
            <hr>
            </span> <span style="display:none" id="1106">Lamellenfarbe<br>
            <img src="http://www.hellweg.de/out/pictures/generated/product/2/665_665_75/578875_jalousie_alu_gelb_03.png">
            <hr>
            </span> </div></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Name*</td>
        <td class="kontakt_form_right"><input type="text" name="absender_name" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Ihre E-Mail*</td>
        <td class="kontakt_form_right"><input type="text" name="absender_mail" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Land</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_land" onChange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Deutschland">Deutschland</option>
            <option value="Österreich">Österreich</option>
            <option value="Frankreich">Frankreich</option>
            <option value="Italien">Italien</option>
            <option value="Dänemark">Dänemark</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">fertige Breite in cm</td>
        <td class="kontakt_form_right"><input type="text" name="absender_breite" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">fertige Höhe in cm</td>
        <td class="kontakt_form_right"><input type="text" name="absender_hoehe" maxlength="100"></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Jalousieart</td>
        <td class="kontakt_form_right"><select  size="1" name="absender_jalousieart" onChange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Freihängend">Freihängend</option>
            <option value="Seitenführung">mit Seitenführung</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Montage</td>
        <td class="kontakt_form_right">
          <select  size="1" name="absender_montage" onChange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Rahmen">auf den Rahmen</option>
            <option value="Rahmen-Klemmhalter">auf den Rahmen mit Klemmhalter</option>
            <option value="Wand-Decke">Wand/ Decke</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Bedienseite</td>
        <td class="kontakt_form_right">
          <select onChange="form_auswahl(this[this.selectedIndex].value)"size="1" name="absender_bedienseite">
            <option value="">Bitte w&auml;hlen</option>
            <option value="Links">Links</option>
            <option value="Rechts">Rechts</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Lamellenfarbe</td>
        <td class="kontakt_form_right">
          <select size="1" name="absender_farbe" onChange="form_auswahl(this[this.selectedIndex].value)">
            <option value="">Bitte w&auml;hlen</option>
            <option value="1001">1001 rot</option>
            <option value="1005">1005 schwarz</option>
            <option value="1015">1015 grün</option>
            <option value="1106">1106 gelb</option>
          </select></td>
      </tr>
      <tr>
        <td align="right" valign="top" class="kontakt_form_left">Ihr Anliegen</td>
        <td class="kontakt_form_right">
          <textarea name="ihre_bemerkung" id="ihre_bemerkung"></textarea></td>
      </tr>
    </table>
  </form>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben