select feld im Formular direkt anwenden NUR WIE? @ tutorials.de: Tutorials, Forum & Hilfe

mogmog · 05.09.09 17:39

Hallo zusammen ich habe mal eine frage.

Ich nutze für einige kleine Animationen JQuery nur habe ich jetzt eine Idee gehabt weiß leider nur nicht wie es angehen soll.

also meine Idee ist wie folg:
Ich habe eine div und darunter ein keines Formular das ca. so könnte aussehen könnte:

HTML-Code:

<div id="ausgabe">ausgabe test</div>

<form  action="empfang.php" method="post">

<select name="test">
  <option value="gray">grau</option>
  <option value="blue">blau</option>
  <option value="orange">Orange</option>
</select>

<input type="submit" value="speichern">

</form>

nun sollte nach dem auswählen folgendes passieren ohne auf senden zu klicken sollte sich die Hintergrundfarbe des div´s ändern in die Farbe im "value".

wie kann ich das angehen?

danke schon mal für eine Idee

**Quaese** · 05.09.09 17:47

Hi,

wenn du jQuery verwendest, sollte folgender onchange-Handler im Select-Element funktionieren:

Code :

1	onchange="$('#ausgabe').css({'background': (this.options[this.selectedIndex].value)});"

Ciao
Quaese

mogmog · 05.09.09 17:52

ok cool,

und wenn ich zwei verschiedene seceltors habe müsste ich dem Feld ja eine id geben id dann in dem ganzen auch anwenden

sprich so:

Code :

1	onchange="$('#ausgabe').css({'background': (this.options[this.selected#id].value)});"

sory das ist gerade erst eingefallen.

**Quaese** · 05.09.09 18:14

Hi,

wenn du zwei Select-Elemente hast, kannst du das Codefragment in beiden gleich verwenden, denn this ist eine Referenz auf das ereignisauslösende Element.

Ciao
Quaese

mogmog · 05.09.09 18:21

OK irgendwie verstehe ich es grad nicht.

wo ist mein problem

HTML-Code:

<html>

<head>
<script src="js/jquery.js" type=text/javascript></script>
<script type="text/javascript">

$(document).ready(function()
	{
		onchange="$('#vorschau').css({
                                 'background-color': (this.options[this.selected#bg].value),
                                 'color': (this.options[this.selected#text].value),
                });"
	}

</script>

</head>

<body>

<div id="ausgabe">ausgabe test</div>

<form  action="empfang.php" method="post">

<select id="bg" name="bg">
  <option value="gray">grau</option>
  <option value="blue">blau</option>
  <option value="orange">Orange</option>
</select>

<select id="text" name="text">
  <option value="#FFF">#FFF</option>
  <option value="#000">#000</option>
</select>

<input type="submit" value="speichern">

</form>

</body>

das Funtioniert irgendwie nicht

**Quaese** · 05.09.09 18:29

Hi,

du musst den onchange-Handler im Select-Element angeben.

Code :

1	<select name="test" onchange="$('#ausgabe').css({'background': (this.options[this.selectedIndex].value)});">

Ciao
Quaese

mogmog · 05.09.09 18:37

OOOO,

danke das war dann voll die Falsche Richtung....

**Quaese** · 05.09.09 18:47

Hi,

du kannst das Ganze auch im ready-Event von jQuery notieren:

Code :

<script type="text/javascript">
  <!--
$(function(){
  $("#bg, #text").bind('change', function(e){
    $('#ausgabe').css({
        'background': $('#bg').val(),
        'color': $('#text').val()
    });
  });
});
 
 //-->
</script>

Sollte den gleichen Effekt haben, der HTML-Quellcode bleibt aber unberührt.

Ciao
Quaese

mogmog · 06.09.09 13:18

Mahlzeit Jungs,

Danke für eure Hilfe das hat mir echtsuper weiter geholfen.

Ich habe aber noch eine Frage kann man das auch mit einem input feld typ="text" machen?

1. ich habe ein Textfeld wo einmal der Text in einem div ("ausgabe") ausgegeben wird.
2. ich habe ein zweites Textfeld (<input typ="text">) wo nach der Eingabe der wert wieder in ein css value gewechselt werden soll.

grüße und noch mal danke

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Hy, also ich habe es hin bekommen nur habe ich dafür ein neues Problem =)
hier erstmal die lösung:

Code :

        $( colorchange );
        function colorchange(){
            var inputfeld = $( "#text_1" );
            inputfeld.change( function( objEvent ){ $('#ausgabe').css({'background': '#' + (this.value)}); }
            );
        }

ich war nun auf der suche nach einem guten "colorpicker" nur funktioniert jetzt leider nicht mehr alles so ich mir das lenke wenn ich den einen benutze funktioniert der ganze colopicker nicht mehr und wenn ich einen anderes benutze habe ich das Problem das die werte die mir Color-Picker ausgibt nicht in mein Ausgabefeld übernommen wird.

verwenden wollte ich diesen hier aber leider geht das so in der Kombination nicht.

Ich würde mich über eine Antwort freuen.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Datensatz aktualisieren per Formular in dem auch ein select-Feld ist

Access Formular Kombi-Feld Select-Befehl nicht annimmt

Select-Feld

Multiple Select Feld im Formular in Datenbank schreiben

Select Feld anderes Select Feld steuern lassen aber wie?

E-Mail:

Abonnieren Abbestellen