Mit OnChange funktion den Value herausfinden und nicht per Klick

[portseven]

Hi,

das Thema hatte ich schonmal hier, nur da ging es um den Value anzuzeigen wenn man etwas Klickt. Dieses mal ist es mit OnChange. Hab bisschen ausprobiert die Value herauszubekommen leider ohne Erfolg.

Jetzt wollte ich euch mal Fragen, wie ich den Value bei der Input-File herausfinden kann.

(Die Value des Forms würde auch gehen)

<form value="<?= $row['id'] ?>" class="formarea" enctype="multipart/form-data" method="POST">

	<input type="file" onchange="upload(this.form);" value="<?= $row['id']; ?>" name="datei" id="file" class="inputfile">

</form>

				function upload(form) {
					var id = $(this).val();
					var value = id.attr('value');
					alert(value);
					$.ajax({
						type: 'POST',
						url: 'beicht_comments_datas/photo.php',
						data: new FormData(form),
						contentType: false,
						processData: false,
						success: function(data) {
							$('#output-photo').html(data);
						}
					})
				}

Ich habe folgendes versucht:

var id = $(this).val();

var id = $(this).attr('value');

var id = form.target.getAttribute('value')

var id = form.find('.inputfile').val();

mfg

[pl]

moin,

in JS hast Du die FileAPI. D.h., jedes <input type=file> erzeugt ein Array mit dem Namen files. Das schau Dir mal an, jeder Eintrag ist ein file Objekt mit Attributen.

Darübe hinaus gibt es noch das FormData Objekt mit entsprechenden Methoden.

MfG

[portseven]

Hi, hab mir das angeschaut, jedoch hilft es nicht bei meinem Problem.

(Ich muss das oben noch bearbeiten, muss doch die Data-Id herausfinden, hab jetzt beispielsweise mal die 2 genommen.) Wie gesagt, bei einem Klick (onClick) kann man ganz einfach " $(this) " benutzen und so die sogenannte data-id/value herausfinden. ( $(this).attr('data-id') / $(this).val(); )

<input type="file" data-id="2">

Aber mit OnChange ist das kompliziert für mich. Da funktioniert keine Methode.

[pl]

moin,

Aber mit OnChange ist das kompliziert für mich. Da funktioniert keine Methode.

Bei mir funktioniert das alles einwandfrei.

MfG

[Matthias Apsel]

Hallo pl,

Bei mir funktioniert das alles einwandfrei.

wie hilft das dem OP?

Ich: „Ich treff das Tor nicht.“ Ronaldo: „Ich schon.“

Bis demnächst
Matthias

[pl]

hi

Bei mir funktioniert das alles einwandfrei.

wie hilft das dem OP?

Davon geht ich aus! Es zeigt ja die Verwendung der File API! Und der Code dazu ist auch zu sehen! Aber ich denke, der OP hat ein anderes Problem: Ihm fehlen die Idee, das Verständnis zur FileAPI und das handwerkliche Geschick.

MfG

[Rolf B]

Hallo pl,

natürlich fehlt ihm (noch) das handwerkliche Geschick und das Verständnis. Darum stellt er hier ja Fragen und gibt nicht die Antworten.

Aus deiner Seite das Know-How herauszuziehen ist für den Erfahrungslevel, auf dem der OP unterwegs ist, allerdings eine Herausforderung. Genau wie für Dich eine wäre, diese Bogenlampe ins Tor zu ziehen, mit der CR7 das 3:3 gemacht hat (und für mich erstmal; ich bin ja froh wenn ich beim Schuss den Ball treffe und nicht den Fuß in die Wiese hacke).

Dieses Problem haben wir alle irgendwo: eine Art inverses Dunning-Kruger Syndrom. Auf einer gewissen Erfahrungsstufe löst man die Basis-Probleme mit dem Rückenmark und vergisst, dass andere damit kämpfen.

Rolf

[pl]

hi,

Aus deiner Seite das Know-How herauszuziehen ist für den Erfahrungslevel, auf dem der OP unterwegs ist, allerdings eine Herausforderung.

Für einen, der mehrfach auf die FileAPI hingewiesen wird und sich vehement dagegen sträubt, sich das bischen (!) Wissen dazu mal selbst anzulesen, ist wahrscheinlich alles eine Herausforderung. Zumal hier mehrfach darauf hingewiesen wurde, daß auch file ein ganz gewöhnliches Array ist, was einen Index hat mit dem die einzelnen Bestandteile direkt adressierbar sind.

Und wenn man schon einen eigenen Index auf eine Liste von mehreren über den Browser hochzuladenden Dateien legen will (was natürlich auch möglich ist), dann dürfte selbst einem Anfänger klar sein, daß ein solcher Index nicht serverseitig generiert werden kann, also eben auch nicht mit PHP sondern seinen Ursprung im Browser hat.

MfG

[pl]

hi @Matthias Apsel

Ich: „Ich treff das Tor nicht.“ Ronaldo: „Ich schon.“

Sämtlich Beispiele in SELFHTML wären diesbezüglich mal zu prüfen. Du bist doch im Vorstand, könntest Du das bitte mal veranlassen!?

MfG

[Tabellenkalk]

Hallo,

Ronaldo: „Ich schon.“

Sämtlich Beispiele in SELFHTML wären diesbezüglich mal zu prüfen.

Ob sie von Ronaldo getroffen wurden?

Gruß
Kalk

[JürgenB]

Hallo Rolf,

Ich: „Ich treff das Tor nicht.“ Ronaldo: „Ich schon.“

Sämtlich Beispiele in SELFHTML wären diesbezüglich mal zu prüfen. Du bist doch im Vorstand, könntest Du das bitte mal veranlassen!?

da einige Beispiele von mir sind, fühle ich mich jetzt direkt angesprochen. Daher frage ich dich dirket: Welche Beispiele sind auf dem Niveau „Ich weiß wie es geht, du aber nicht!“? Und jetzt antworte nicht: „Alle“.

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

da einige Beispiele von mir sind, fühle ich mich jetzt direkt angesprochen. Daher frage ich dich dirket: Welche Beispiele sind auf dem Niveau „Ich weiß wie es geht, du aber nicht!“? Und jetzt antworte nicht: „Alle“.

Viele.

*scnr* 😝

LG,
CK

[Tabellenkalk]

Hallo,

Daher frage ich dich dirket

Das musst du doch aber Ronaldo fragen…

Scnr

Gruß
Kalk

[pl]

hi

Ich: „Ich treff das Tor nicht.“ Ronaldo: „Ich schon.“

Sämtlich Beispiele in SELFHTML wären diesbezüglich mal zu prüfen. Du bist doch im Vorstand, könntest Du das bitte mal veranlassen!?

da einige Beispiele von mir sind, fühle ich mich jetzt direkt angesprochen. Daher frage ich dich dirket: Welche Beispiele sind auf dem Niveau „Ich weiß wie es geht, du aber nicht!“? Und jetzt antworte nicht: „Alle“.

Doch. Wer mir ein solches Motiv zum Artikel schreiben unterstellt, der bekommt das auch genauso zurück.

MfG

[JürgenB]

Hallo,

muss ich die Antwort jetzt verstehen?

Gruß
Jürgen

[JürgenB]

Hallo,

ich frage mal nach:

Welche Information willst du wann erhalten?

Gruß
Jürgen

[portseven]

Ich lasse alle Beiträge anzeigen. Jeder Beitrag hat eine ID.

Jetzt lasse ich alle Beiträge anzeigen mit einer While-Schleife.

Jetzt hab ich ein Input Feld mit dem Type = File. Da füge ich eine Data-ID ein mit dem Wert der Beitrags-Id. ($row['id'])

Diese ID will ich jetzt in eine Variable speichern per JS.

wie z.b so :

var value = $(this).val(),

Das soll aber nichts mit dem eigentlichen Bild das ich hochlade zu tun haben. Ich möchte einfach die Data-ID in eine JS-Variable speichern, wenn ich die Funktion OnChange anwende.

---

@pl

Hast mich falsch verstanden. Ich brauch keine Informationen über das Bild. Ich will nur die Data-Id herausfinden. Könnte man gleich setzen wie das:

<input type="hidden" name="post-id" value="<?= $row['id']; ?>">

[JürgenB]

Hallo,

der Seitenbesucher wählt also eine Datei aus und klickt auf OK. Und dann soll eine ID ausgelesen werden.

Wird der change-Eventhandler aufgerufen?

Wo ist die ID gespeichert? Als Attribut?

Zeig doch mal, wie das Inputelement in Quelltext aussieht.

Gruß
Jürgen

[portseven]

Ja, die ID soll dann ermittelt werden. Das dient dazu: (hab extra ein Video gemacht).

Video:

https://www.youtube.com/watch?v=iKFyMSiGHps&feature

---

So sieht das Input Element aus in meinem Quelltext.

<input type="file" name="datei" class="inputfile" data-id="<?= $row['id']; ?>">

Alles dient dazu ein Kommentar einzufügen mit einem Bild. Wenn man ein Bild auswählt, soll es angezeigt werden. Dieses Bild wird angezeigt in einem DIV-Container

<div class="output-photo">
<img></img>
</div>

So, problem ist, wenn ich ein Bild auswähle, und ich 5 Beiträge habe, werden alle Bilder bei jedem Beitrag angezeigt. Deswegen möchte ich die ID herausfinden, dass ich es so machen kann:

<div class="output-photo-<?= $row['id']; ?>">
<img></img>
</div>

Und per javascript es nur in einer Box anzeigen wo die ID gleich ist.

$('.output-photo-'+id).html(data);

[JürgenB]

Hallo,

<input type="file" name="datei" class="inputfile" data-id="<?= $row['id']; ?>">

dann probier mal

<input type="file" name="datei" class="inputfile" data-id="<?= $row['id']; ?>" onchange="upload(this)">

function upload(ele) {
				alert(ele.dataset.id);
			}

Gruß
Jürgen

[portseven]

Jetzt zeigt er mir immer die gleiche ID.

Beitrag 1 <input file data-id="1">

Beitrag 2 <input file data-id="2">

Beitrag 3 <input file data-id="3">

Wenn ich jetzt bei Beitrag 3 input File drücke, zeigt er mir die Data-ID eins an. Also jedesmal sagt er nur die erste ID.

[JürgenB]

Hallo,

wie wär es, wenn du mal zeigst, was du gemacht hast, z.B. deine Testseite, oder den Quelltext, wie er im Browser ankommt.

Gruß
Jürgen

[Rolf B]

Hallo portseven,

den Quelltext, wie er im Browser ankommt.

Insbesondere den. Du zeigst uns derzeit nur deinen PHP Code; da mag auch noch was im Argen liegen.

Wichtig ist, dass man sieht, wie genau Du die Event-Registrierung und das Handling implementiert hast; wenn Du bei jedem input die gleiche ID im Eventhandler liest, dann riecht das nach einer Panne an dieser Stelle.

Grundsätzlich funktioniert Jürgens Ansatz nähmliχ.

Rolf

[portseven]

Hier ein kleines Video wie ich es meine bzw wie mein Problem aussieht:

https://www.youtube.com/watch?v=MNxNpTBzIkw&feature

Mein Code in HTML sieht so aus:

					<div class="add-comment">

						<div class="area">

							<form id="form-<?= $rowsafe['p_id']; ?>" value="2" class="formarea" enctype="multipart/form-data" method="POST">

								<textarea class="send_comment send_comment-<?= $rowsafe['p_id']; ?>" name="text" id="send_comment_by_id" onPaste="" autocomplete="off" autocorrect="off" placeholder="Kommentieren... (Mit Enter absenden)" onkeypress="return enter(event);" data-id="<?= $rowsafe['p_id']; ?>" style="height:46px;"></textarea>

								<input type="hidden" name="id" class="comment_send_id" value="<?= $rowsafe['p_id']; ?>">

						</div>
						
						<div class="comment-photos">
							<ul>
								<li>
									<input type="file" onchange="changeEventHandler(this);" data-id="<?= $rowsafe['p_id']; ?>" name="datei" id="file" class="inputfile">
										<label for="file" value="<?= $rowsafe['p_id']; ?>">
											<img src="https://png.icons8.com/color/50/000000/google-images.png" value="<?= $rowsafe['p_id']; ?>">
										</label>
								</li>
							</ul>
						</div>
							</form>
					</div>

In Javascript:

				function changeEventHandler(ele) {
					var img = event.target.value;
					var value = ele.dataset.id;

					if(img != '') {

					$.ajax({
						type: 'POST',
						url: 'beicht_comments_datas/photo.php',
						data: new FormData($($('#form-'+value))[0]),
						async: false,
						cache: false,
						contentType: false,
						processData: false,
						success: function(data) {
							$('.output-content').css('display', 'block');
							$('.output-photo-'+value).html(data);
						}
					})
					
					} else {

					$('.output-content-'+value).css('display', 'none');

					}
				}
				

[JürgenB]

Hallo,

was hast du an meiner Antwort nicht verstanden?

Quelltext ohne PHP, besser noch Link zur Testseite.

Gruß
Jürgen

[portseven]

@JürgenB

Habs leider falsch verstanden sorry. Hier ist der Link zur Seite.

Seite

[portseven]

PS:

HTML: Zeile 433-459

JS: Zeile: 830-852

[JürgenB]

Hallo,

function changeEventHandler(ele) {
					var form = event.target.value;

so, wie du den Eventhandler aufsetzt, gibt es das Objekt event nicht. Wenn du mit event.target arbeiten willst, musst du die Eventhandler mit addEventListener notieren.

Du hast übrigens die ID „file“ zweimal vergeben.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

gibt es das Objekt event nicht

doch, das gibt es. Zumindest bei mir in Chrome. Das ist eine globale Variable, die während einer Event-Ausführung definiert ist und die das Event-Objekt beinhaltet, inclusive der target-Eigenschaft.

Du hast übrigens die ID „file“ zweimal vergeben.

DAS ist das Problem, siehe meinen anderen Beitag.

Rolf

[JürgenB]

Hallo Rolf,

gibt es das Objekt event nicht

doch, das gibt es. Zumindest bei mir in Chrome. Das ist eine globale Variable, die während einer Event-Ausführung definiert ist und die das Event-Objekt beinhaltet, inclusive der target-Eigenschaft.

in meinem FF (58) kam die Fehlermeldung „ReferenceError: event is not defined“. Daher habe ich auch nicht mehr weiter gesucht.

Gruß
Jürgen

[Rolf B]

Hallo portseven,

wenn Du aus PHP heraus HTML-Blöcke in einer Schleife erzeugst, dann darfst Du nie vergessen, dass das in HTML keine Schleife ist, sondern mehrere HTML Blöcke die untereinander stehen. Dieses Problem sehe ich immer wieder bei Leuten, die hier Fragen posten und sich wundern, warum irgendwelche Events nicht so behandelt werden wie gewünscht. Du musst im PHP immer überlegen: welches HTML kommt am Ende 'raus, und wenn JavaScript hinzukommt, agiert dieses Script auf dem erzeugten HTML, nicht auf dem PHP Code.

Wenn Du in PHP in einer Schleife identifizierende Attribute erzeugst (id, name), dann musst Du die die pro Schleifendurchlauf anpassen, sonst hast Du Kollisionen. Beispiel ist deine textarea und auch das file-input, deren IDs sind pro Durchlauf gleich.

Ähnliches gilt für JavaScript. Das solltest Du nur dann innerhalb einer Schleife ins HTML schicken, wenn's gar nicht anders geht. Der Script-Code für deine textarea-Observer wird zweimal ausgegeben; du hast hier Pech, dass in JS eine zweite init-Funktion einfach die erste überschreibt, selbst im strict mode, so dass dein Code SCHEINBAR läuft, in Wahrheit aber auf Treibsand gebaut ist. Durch die doppelt vergebene ID der textarea registrierst Du die Observer zweimal auf der ersten textarea.

Bei Scripten ist es meiner Meinung nach besser, sie in separaten .js Dateien zu halten und so zu schreiben, dass sie sich an Wiederholungsgruppen aus PHP selbst anpassen. D.h. eine bessere Observer-Registrierung würde in einem DOMContentLoaded Eventhandler alle textareas suchen, die entweder selbst eine bestimmte Klasse haben oder beispielsweise innerhalb von .add-comment stehen, und denen die Observer zuordnen. Analog solltest Du auch die change-Handler für die file-Uploads registrieren.

Dass Du pro PHP Durchlauf gleiche IDs generierst, führt auch zu deinem Upload-Problem. Man klickt bei Dir ja nicht auf das file-Input (das versteckst Du), sondern auf das Label dazu. Und das Label ist mit for="file" spezifiziert, d.h. beide Labels beziehen sich auf das erste Upload-Control. Wenn man im Debugger einen Breakpoint in die changeEventHandler Funktion legt und dann, wenn der hält, den Callstack anschaut, sieht man, dass beide Male das 123-file-Input der Auslöser ist.

Lösung 1: Gib den file-Inputs unterschiedliche IDs

Oder Lösung 2: Lege das file-Input in das Label hinein, dann brauchst Du weder id noch for.

Rolf

[pl]

hi,

den value eines <input type=file> kannst Du setzen (vorbelegen) wie Du willst, das wird weder übertragen noch kommt das sonstwo wieder irgendwo zum Vorschein.

MfG