Willkommen in der Webstatt Zum Webstatt Blog und Stories
web4 am 21.11.06 15:26

hi!

ich habe ein selected formularfeld - mit allen Ländern. Wenn man jetzt USA auswählt, muss man einen Bundestaat auswählen, wenn nicht USA, dann hat man ein textfeld um den kanton oder das bundesland einzutippen.

Also in codesprache:

if(dasformfeld.value == 'United States') {
<selected>....</selected>
}
else {
<input...</input>
}

versteht ihr mich?
Ich hasse den JS Syntax!!ich komm auf keinen grünen zweig...
hat mir jemand ein codeschnipsel, oder einen tipp, wie man das am besten umsetzten könnte?

Vielen Dank im voraus
web4

netcup.de Warum gibt es hier Werbung?
Spark am 22.11.06 11:11

Hilft dir das weiter? :)

<script langauge="javascript" type="text/javascript">
var cantonSelect = '<select name="canton">' +
' <option value="bl1">Bundesland1</option>' +
' <option value="bl2">Bundesland2</option>' +
' <option value="bl3">Bundesland3</option>' +
'</select>';
var cantonWrite = '<input type="text" name="canton"/>';

function checkState() {
var state = document.getElementById('state').value;
if(state == "USA") {
document.getElementById('canton').innerHTML = cantonSelect;
} else {
document.getElementById('canton').innerHTML = cantonWrite;
}
}
</script>

<select id="state" onChange="checkState()">
<option value="GER">Germany</option>
<option value="USA">United States of America</option>
</select>
<br/><br/>
<div id="canton"></div>

web4 am 22.11.06 13:01

genial =) das ist genau das, was ich suchte! tausend dank!:)

web4 am 05.01.07 22:05

ist zwar schon ne weile her, sitz aber immer noch am selben problem:)
das skript von spark funktioniert gut, jedoch mit einem haken.

wenn man ein land selected hat, zeigt er kein formularfeld an. Sprich, Standard (selected) wäre Deutschland - dann zeigt er logischerwiese mit diesem Code gar kein Formularfeld an. Bis man von Hand das Land nochmals auswählt.

Ich dachte mir, es reicht alleine den Eventhandler auf onLoad zu stellen - ohne erfolg.

hat jemand eine idee, wie man dieses problem beheben könnte?
gruss
web4

der_nic der_nic am 05.01.07 22:13

mach entweder bei <body onload="chechState()"> oder (was ich persönlich schöner finde) im Head einen JS teil mit dem inhalt window.onload = checkState;

Achtung: bei dem Aufruf der Funktion im head der Seite keine () am Schluss der Funktion

web4 am 05.01.07 22:22

profi!:)

es funktioniert, ohne probleme:) nicht verzagen yannic fragen;)
thx!!

benjamin

der_nic der_nic am 05.01.07 22:28

Quote
Original von web4
profi!:)

es funktioniert, ohne probleme:) nicht verzagen yannic fragen;)
thx!!

benjamin

endlich mal jemand der mein Genie erkennt :P

bitte;)

web4 am 06.01.07 13:51

hehe:)

ohne probleme war nicht ganz korrekt:) im Mozzi läufts nicht.

ich finde eigentlich nichts, was der mozzi nicht lesen könnte... jemand eine idee?

der_nic der_nic am 06.01.07 14:59

welcher Teil läuft den nicht? Das ganze oder nur das onload?

web4 am 06.01.07 15:57

onload sollte laufen, habe beide einbindungsmethoden ausprobiert. wahrscheinlich ist es schon das skript.

der_nic der_nic am 07.01.07 18:59

bist du sicher das du keinen Fehler gemacht hast?

weil das da:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
var cantonSelect = '<select name="canton">' +
' <option value="bl1">Bundesland1</option>' +
' <option value="bl2">Bundesland2</option>' +
' <option value="bl3">Bundesland3</option>' +
'</select>';
var cantonWrite = '<input type="text" name="canton"/>';

function checkState() {
var state = document.getElementById('state').value;
if(state == "USA") {
document.getElementById('canton').innerHTML = cantonSelect;
} else {
document.getElementById('canton').innerHTML = cantonWrite;
}
}
window.onload = checkState;
</script>

</head>

<body>
<select id="state" onChange="checkState()">
<option value="GER">Germany</option>
<option value="USA" selected="selected">United States of America</option>
</select>
<br/><br/>
<div id="canton"></div>
</body>
</html>


funktioniert einwandfrei im FF2 + IE6

web4 am 08.01.07 16:18

hmm, ich habe das skript noch etwas erweitert... seltsam... werde mal auf fehlersuche gehen..

falls jemand anders ihn per zufall finden möchte ^^
(imcontacts.com/registrieren.html )

web4 am 21.01.07 00:29

hmm ich habs immer wieder versucht, ich habe zwar den fehler, aber keine lösung.

http://www.imcontacts.com/staff/form.php

Beim Mozilla funktioniert es nur nach einem Refresh. Wie könnte man dies umgehen?

Beim Mozilla wird es gerade gegewärtig ausgeführt, bei Mozilla, wie erwähnt, nur nach refresh?
Gibt es dafür eine Lösung?

Bin über jeden Tip dankbar.
Vielen Dank
web4

Michael Michael am 21.01.07 11:15

Guten Morgen,
Mit JS HTML zu schreiben sollte vermieden werden, das macht den Code einfach nur unübersichtlich und sperrt Benutzer mit deaktiviertem JS vollkommen aus.
Mein Vorschlag: du machst zwei Felder (dann mit unterschiedlichen NAME und ID) und blendest diese dynamisch ein und aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">
<!--
function disable_all() {
var element = document.getElementById('kanton_us');
if(element) {
element.style.display = 'none';
}
element = document.getElementById('kanton');
if(element) {
element.style.display = 'none';
}
}
function enable_element(element) {
disable_all();
if(element) {
element.style.display = 'block';
}
}
function update_form() {
var element = document.getElementById('state');
if(element) {
if(element.value == 'United States') {
enable_element(document.getElementById('kanton_us'));
} else {
enable_element(document.getElementById('kanton'));
}
}
}
function init_form() {
disable_all();
update_form();
}
-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IMContacts - Kostenlos Mitglied werden</title>
</head>
<body>

<form action="#" method="post" enctype="multipart/form-data" name="registrieren">
<select onchange="update_form()" id="state" class="formularfeld" name="land" size="1">
<option name="value" value="United Arab Emirates">United Arab Emirates</option>
<option name="value" value="United Kingdom">United Kingdom</option>
<option name="value" value="United States">United States</option>
</select>

<select name="kanton_us" id="kanton_us" class="formularfeld">
<option value="Alabama">Alabama</option>
<option value="Alabama">Alabama</option>
<option value="Alabama">Alabama</option>
</select>

<input type="text" class="formularfeld" name="kanton" id="kanton"/>

</form>

<script language="JavaScript">
init_form();
</script>

</body>
</html>



Dennoch zu dem Fehler: Meiner Meindung nach liegt es an dem ONLOAD Handler. Wenn ihr (anstelle von ONLOAD) die Funktion nach der Definition aller nötigen Felder aufruft sollte es klappen.

web4 am 21.01.07 12:10

Hallo,

stimmt! obwohl deine lösung eigentlich auf der hand lag, habe ich mir das gar nie überlegt.

auf jeden fall! tausend Dank!! Es funktioniert einwandfrei! Ich hasse JS-Syntax - aber dein Beispiel konnte es mir einleuchtend "erklären".:)

Nochmals Danke! :)
Gruss
benjamin

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt