Webstatt.org - Community seit 2006 - 2012 (2024?)

Selected Formularfeld und JS

user-344
21.11.2006 14: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'zwinkern {
<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 user-158k im voraus
web4

user-307
22.11.2006 10:11

Hilft dir das weiter? lächeln

<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'zwinkern.value;
if(state == "USA"zwinkern {
document.getElementById('canton'zwinkern.innerHTML = cantonSelect;
} else {
document.getElementById('canton'zwinkern.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>

.., Spark
user-344
22.11.2006 12:01

genial =) das ist genau das, was ich suchte! tausend dank!lächeln

user-344
05.01.2007 21:05

ist zwar schon ne weile her, sitz aber immer noch am selben problemlächeln
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

Avatar user-162
05.01.2007 21: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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
user-344
05.01.2007 21:22

profi!lächeln

es funktioniert, ohne problemelächeln nicht verzagen yannic fragenzwinkern
thx!!

benjamin

Avatar user-162
05.01.2007 21:28

Original von user-344
profi!lächeln

es funktioniert, ohne problemelächeln nicht verzagen yannic fragenzwinkern
thx!!

benjamin

endlich mal jemand der mein Genie erkennt frech

bittezwinkern

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
user-344
06.01.2007 12:51

hehelächeln

ohne probleme war nicht ganz korrektlächeln im Mozzi läufts nicht.

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

Avatar user-162
06.01.2007 13:59

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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
user-344
06.01.2007 14:57

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

Avatar user-162
07.01.2007 17: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'zwinkern.value;
if(state == "USA"zwinkern {
document.getElementById('canton'zwinkern.innerHTML = cantonSelect;
} else {
document.getElementById('canton'zwinkern.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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
user-344
08.01.2007 15: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 )

user-344
20.01.2007 23: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 user-158k
web4

Avatar user-253
21.01.2007 10:15

Guten Morgen,
Mit JS HTML zu schreiben sollte vermieden werden, das macht den Code einfach nur unübersichtlich und sperrt user-129utzer 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'zwinkern;
if(element) {
element.style.display = 'none';
}
element = document.getElementById('kanton'zwinkern;
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'zwinkern;
if(element) {
if(element.value == 'United States'zwinkern {
enable_element(document.getElementById('kanton_us'zwinkern);
} else {
enable_element(document.getElementById('kanton'zwinkern);
}
}
}
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.

user-344
21.01.2007 11:10

Hallo,

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

auf jeden fall! tausend user-158k!! Es funktioniert einwandfrei! Ich hasse JS-Syntax - aber dein Beispiel konnte es mir einleuchtend "erklären".lächeln

Nochmals user-158ke! lächeln
Gruss
benjamin