Archivlink: javarea.de Forum > JavaScript > fehler in der Funktion?!
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > fehler in der Funktion?!

Pages: [1]
geschrieben von AlexD am 14.08.2010 - 15:00
Hallo,

ich möcht mir eine kleine Funktion schreiben, die bei der Auswahl einer Select-Box entsprechende DIV-Boxen anzeigt.
Dazu verwende ich den Event-Handler onChange.

Die DIV-Boxen sollen entsprechen des Jahres angezeigt werden... also wenn 2009 ausgewählt wird die Box mit der ID 2009 angezeigt... entsprechend dann auch 2010 usw...

Irgendwie funktioniert das aber so nicht. In der Schleife geb ich mir mit 'alert' aus, ob der if-Zweig überhaupt mal 'wahr' wird. Seltsamer weise wird mir 2009 angezeigt 2010 jedoch nicht!
Die Ausgabe vor der Schleife mit 'alert(jahr[0] + " " + jahr[1])' bringt '2009 2010'.

Aktuell sieht es so aus:
Original PHP-Quellcode wo die SelectBox entseteht:
PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

<?
$jahre_to_js = implode(",",$jahre);

$sel_jahr = "<select class="input" onchange="showcovers(this,'".$jahre_to_js."')" name="jahr">n
             <option value=""> -Jahr- </option>n".$options_jahr."</select>";


// so sieht der generierte HTML-Code im Browser dann aus
<p>
 <label class="formular">Jahr:&nbsp;</label><select class="input" onchange="showcovers(this,'2009,2010')" name="jahr">

 <option value=""> -Jahr- </option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
</select>
</p>
?>



die JS-Funktion:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

function showcovers( el,jahre ) {
    var val = el.options[el.selectedIndex].value;

    var jahr = jahre.split(",");

    
    for(var i = 0; i < jahr.length; i++){
        if(val == jahr[i]){
            alert(jahr[i]);
            document.getElementById('jahr[i]').style.display='block';
        } else {
            document.getElementById('jahr[i]').style.display='none';
        }

    }
}





===================================================================
PROBLEM gefunden!!
Es lag an den Hochkammas bei document.getElementById('jahr[i]').style.display='block';

Diese dürfen natürlich nicht sein... ist ja kein String. ;)

nun funktioniert es!!!
===================================================================

Hoffe Ihr könnt mir hier helfen...

Mit den besten Grüßen
Alex

P.S.: Hab den Beitrag nochmal bearbeitet, nun scheint er auch angezeigt zu werden.... da war wohl etwas dabei, das die Anzeige nicht funktionierte?!

geschrieben von Danny am 15.08.2010 - 13:44
in welcher Funktion ?

geschrieben von AlexD am 17.08.2010 - 00:08
Hallo Danny,

also wird auch Dir der Beitrag nicht angezeigt?!

Das Problem hat sich erledigt, aber ich steh vor einem Neuen.

Gibt es eine Möglichkeit Werte eines Formularfeldes in einen Link zu übernehmen ohne das Formular abzuschicken?!

Folgendes Szenario:
Es geht um eine Vorschau via Popup-Fenster das ein Bild anzeigt. Das Bild wird "gebleicht" und der User kann über zwei Formularfelder die Werte verändern, mit einem Klick auf "Vorschau" wird das Popup eingeblendet und zeigt wie das Bild mit diesen Werten aussehn wird.
Die Frage ist nur, wie bekommte ich die Werte (quality und transparency) in den Link, damit ich sie als $_GET weiter verarbeiten kann?!

Wenn das Ergebnis der Vorschau passt, soll das Formular abgeschickt werden und es wird eine PDF-Datei erstellt (Das Bild kommt dann auf das Deckblatt als Hintergrund).

Hier mal das Formular:
PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 

<form method="POST" action="pdf_create_jahrestraining.php">
          <p>
           <label class="formular">Qualit&auml;t:&nbsp;</label><input class="input" type="text" name="quality" value="<?php echo $cover_quality;?>" size="2"> Wert von 1-100 (1% - 100%)<br>
           <br>
           <label class="formular">Transparenz:&nbsp;</label><input class="input" type="text" name="transparency" value="<?php echo $cover_bleech;?>" size="2"> 0-100 (Bleichegrad, 0 = ungebleicht, 100 = ganz weiß)<br>
          </p>
          <p>
           <input type="hidden" name="image" value="<?php echo $_FILES['coverbild']['name'];?>">
           <input type="hidden" name="path" value="<?php echo $path;?>">
           <a href="pdf_cover_preview.php?image=<?php echo $_FILES['coverbild']['name']."&path=".$path;?>" onclick="NewWindow(this.href,'name','460','<?php echo $popup_height;?>','no');return false;">Vorschau</a>
          </form>


Gruß
Alex

geschrieben von Danny am 17.08.2010 - 12:27
Hallo Alex,

das href Attribut kannst du per Javascript wie auch jedes andere mit document.getElementById('deineid').href ansprechen. Um es bei jeder Änderung der beiden Textfelder zu aktualisieren kannst du das onkeydown Event für die Input Felder verwenden. In der Funktion die das Event aufrufst, liest du beide Textfelder aus und aktualisierst den Link.

Soweit zur Theorie, hier mal ein Lösungsansatz ungetestet aus der Hüfte geschrieben. Eventuell sind kleine Fehler drin.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 

<script type="text/javascript">
	function updateLink() {
		// der Grundlink
		var link = "pdf_cover_preview.php?image=<?php echo $_FILES['coverbild']['name']."&path=".$path; ?>"; 
		
		// die Formularfelder auslesen 
		var quality = document.formpdf.quality.value;
		var transparency = document.formpdf.transparency.value;
		
		// Link erzeugen
		var nlink = link + '&quality=' + quality + '&transparency=' + transparency;
		
		document.getElementById('previewlink').href = nlink;
	}
</script>

<form method="POST" action="pdf_create_jahrestraining.php" name="formpdf">
	<p>
		<label class="formular">Qualit&auml;t:&nbsp;</label>
		<input class="input" type="text" name="quality" value="<?php echo $cover_quality;?>" size="2" onkeydown="updateLink()"> Wert von 1-100 (1% - 100%)
		<br>
        <br>
        <label class="formular">Transparenz:&nbsp;</label>
        <input class="input" type="text" name="transparency" value="<?php echo $cover_bleech;?>" size="2" onkeydown="updateLink()"> 0-100 (Bleichegrad, 0 = ungebleicht, 100 = ganz weiß)
        <br>
    </p>
    <p>
    	<input type="hidden" name="image" value="<?php echo $_FILES['coverbild']['name'];?>">
        <input type="hidden" name="path" value="<?php echo $path;?>">
        <a href="pdf_cover_preview.php?image=<?php echo $_FILES['coverbild']['name']."&path=".$path;?>" onclick="NewWindow(this.href,'name','460','<?php echo $popup_height;?>','no');return false;" id="previewlink">Vorschau</a>
   </p>
</form>


Viele Grüße
Danny

geschrieben von AlexD am 18.08.2010 - 02:27
Hallo Danny,

vielen Dank für den super Ansatz!
Soweit funktioniert dieser auch, nur musste ich der Funktion die entsprechenden Variablen übergeben, da ich diese in einer eigenen functions.js gespeichert hab.

Was jedoch etwas seltsam ist, ist die Reaktion auf Eingaben. Gebe ich im Formularfeld für Tranzparens z.B. 75 ein, so übernimmt er mir nur die 7, gebe ich 755 ein, so steht 75 da. Wenn ich nun bei Qualität etwas ändere steht bei Transparenz die 755.
Es scheint so, als wär es immer ein Zeichen hinten dran.

Hab schon die Bezeichnungen nochmals überprüft, aber die sind schon korrekt!

Mein Funktion sieht nun so aus:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 

// Link für die Vorschau aktualisieren
function updateLink(path,image,height,jahr) {
    // der Grundlink
    var link = "pdf_cover_preview.php?image=" + image + "&path=" + path + "&height=" + height + "&jahr=" + jahr;

    // die Formularfelder auslesen
    var quality = document.formpdf.quality.value;
    var transparency = document.formpdf.transparency.value;

    // Link erzeugen
    var nlink = link + '&quality=' + quality + '&transparency=' + transparency;

    document.getElementById('previewlink').href = nlink;
}


Der Formular-Teil so:
PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 

$popup_url = $_FILES['coverbild']['name']."&path=".$path."&height=".$popup_height."&jahr=".$_POST['jahr']."&quality=".$cover_quality."&transparency=".$cover_bleech;

<form name="formpdf" method="POST" action="pdf_create_jahrestraining.php">
          <p>
           <label class="formular">Qualit&auml;t:&nbsp;</label><input class="input" onkeydown="updateLink(<?php echo "'".$path."','".$_FILES['coverbild']['name']."','".$popup_height."','".$_POST['jahr']."'";?>)" type="text" name="quality" value="<?php echo $cover_quality;?>" size="2"> Wert von 1-100 (1% - 100%)<br>
           <br>
           <label class="formular">Transparenz:&nbsp;</label><input class="input" onkeydown="updateLink(<?php echo "'".$path."','".$_FILES['coverbild']['name']."','".$popup_height."','".$_POST['jahr']."'";?>)" type="text" name="transparency" value="<?php echo $cover_bleech;?>" size="2"> 0-100 (Bleichegrad, 0 = ungebleicht, 100 = ganz weiß)<br>
          </p>
          <p>
           <input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id'];?>">
           <input type="hidden" name="image" value="<?php echo $_FILES['coverbild']['name'];?>">
           <input type="hidden" name="path" value="<?php echo $path;?>">
           <input type="hidden" name="jahr" value="<?php echo $_POST['jahr'];?>">
           <input type="hidden" name="spec_cover" value="true">
           <label class="formular">&nbsp;</label><a href="pdf_cover_preview.php?image=<?php echo $popup_url;?>" onclick="NewWindow(this.href,'name','460','<?php echo $popup_height;?>','no');return false;" id="previewlink"><input class="button" type="button" value="Vorschau"></a>&nbsp;<input class="button"  onClick="showPDFBox()" type="submit" name="creat_pdf" value="PDF-Datei erstellen">
          </form>

geschrieben von Danny am 18.08.2010 - 08:16
Hallo Alex,

Bin mir da nicht ganz sicher, onkeydown löst aus wenn die Taste gedrückt wird. Kann also auch sein, dass erst das Event ausgelöst wird und dann das Input Feld aktualisiert wird und der gedrückte Buchstabe eingetragen wird.

Verwende mal anstatt onkeydown lieber onkeyup . Wenn auch das nicht geht, bliebe noch die Möglichkeit (die mir aber jetzt erst einfällt, aber eigentlich die beste Variante ist ) erst bei Klick auf den Link die Felder auslesen und den Link zu aktualisieren.

Also Variante 1: onkeyup anstatt onkeydown
oder
Variante 2: im onclick des Links updateLink aufrufen. Das NewWindow(this.href,'name','460','<?php echo $popup_height;?>','no');return false; kannst du ja dann auch in die Funktion packen. Dadurch muss nicht einmal der Link geändert werden.

Gruß Danny

geschrieben von AlexD am 18.08.2010 - 11:30
Hallo Danny,

jetzt wo ich die Lösung so vor mir liegen sehe denk ich mir... 'Da hättest auch selber drauf kommen können'.
Aber im Nachhinein sagt sich das immer leicht.

Ich hab die beiden Funktionenso belassen wie sie sind, vielleicht brauch ich die irgendwann nochmal einzeln, und den Link erst mit onclick aktualisiert.

Es funktioniert genau so wie es soll!!!

Möchte mich an dieser Stelle gleich mal für die super schnelle Hilfe sehr herzlich bedanken!!

P.S.: hab in meinem JS-Buch (Auflage von 2007) mal nachgelsesn, da sind die Events onkeydown und onkeyup gar nicht vertreten... gibts die noch nicht so lange?!

Besten Gruß
Alex

geschrieben von Danny am 18.08.2010 - 12:14
Hallo Alex,

zumindest bist du jemand der die Lösung verstanden und verinnerlicht hat und nicht nur unangetastet in den Code kopiert hat
Letzendlich muss man nur wissen, dass es irgendwelche Event Handler für Inputfelder gibt und wie man Attribute ausliest und schreibt. Welcher nun der passende Eventhandler ist kann man getrost nachgucken (zumal es viele recht ähnliche gibt ..)

Ich weiß nicht wann onkeydown usw. dazu gekommen sind, SelfHtml schreibt aber zumindest was von einer Kompatibilität vom IE 4 .. also weit vor 2007
http://de.selfhtml.org/javascript/s....andler.htm

Gruß Danny


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.