Selected Formularfeld und JS | Webstatt.org Community

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'.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>

.., 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 problem lä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

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!

es funktioniert, ohne probleme lächeln

nicht verzagen yannic fragen zwinkern

thx!!

benjamin

user-162

05.01.2007 21:28

Original von user-344
profi!

es funktioniert, ohne probleme nicht verzagen yannic fragen
thx!!

benjamin

endlich mal jemand der mein Genie erkennt frech

bitte

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

hehe

ohne probleme war nicht ganz korrekt lächeln

im Mozzi läufts nicht.

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

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.

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'.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

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

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';

       			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.

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