• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Allgemeines OnChange für ein ganzes Formular, nicht nur für jedes einzelne Feld?

M

mikexmagic

New member
Hallo zusammen,

ich bin bezgl. JS noch ein blutiger Anfänger! Ich habe zwar schon gesucht und gegooglet aber konnte irgendwie nix finden...

Ich habe ein Formular mit knapp 20 Feldern. Unter dem Formular steht als Info für den User: 'Daten unverändert!". Jetzt möchte ich, sobald irgendeins der Felder verändert wird, den Infotext in z.B. 'Speichern nötig!' ändern. Manche Felder haben zur Validierung bereits ein OnChange im Script, aber halt nicht alle...

Ich dachte blauäugig, dass es evtl. für das DOM 'form' auch ein allgemeines 'OnChange' gibt. Hab mich aber wohl geirrt....

Wie kann ich das am geschicktesten lösen ohne für jedes einzelne Feld ein 'OnChange' zu bauen? Gerne auch mit JQuery....

Danke!
Mike
 
Zuletzt bearbeitet von einem Moderator:
Ich täte mittels document.getElementsByTagName() alle <input>s auslesen und in einer Variable speichern. Bei einer Eingabe kann man dann prüfen, ob sich der aktuelle Wert geändert hat.

PS: es gibt kein OnChange, dies funktioniert nur, weil HTML im Gegensatz zu JS case-insensitiv ist!
 
Ja, gute Idee.... Aber muss ich da nicht trotzdem jedem input ein change-event zuweisen damit ich die evtl. Änderung auch mitbekomme?
 
jquery ist für solche Aufgaben ideal.

PHP: 
!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test onchange</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Test input onchange</h3>
<form>
  <input name="inp0" class="change" value="">
  <input name="inp1" class="change" value="">
  <input name="inp2" class="change" value="">
</form>

<script>
  $('input.change').change(function() {
      alert("Wert von "+this.name+" auf "+this.value+" geändert");
    }
  );
</script>

</body>
</html>

Die Demo ist mehr fürs Verständnis als eine sinnvolle Applikation. Weitere Beispiele hier.

LG jspit
 
da die events aber auch bubbeln, reicht es aber auch am form nur einen eventhandler zu registrieren
jspit schrieb:
$('form').on("change", function()
{
alert("geändert");
});
Zum Vergrößern anklicken....
da das der op aber sicher schon probiert hat, vermute ich, dass sein problem darin besteht, dass das change-event bei textfeldern nur triggert, wenn dieses den focus verliert.
also noch auf keyup lauschen
jspit schrieb:
$('form').on("change keyup", function()
{
alert("geändert");
});
Zum Vergrößern anklicken....
 
Danke hesst,
die erste Varinate von dir funktioniert einwandfrei:
Code: 
$('form').on("change", function()
{
alert("geändert");
});

Da ich wie gesagt noch nicht ganz so fit bin, hatte ich es ähnlich probiert:
Code: 
$(document).ready(function(){
	$("#formname").change(function(){
	alert("Peng");
})
})

Jetzt triggert es auf dem ganzen Formular UND die einzelnen Felder die validiert werden ziehen ebenfalls mit ihren eigenen 'change'. Perfekt!

:d Danke :d
 
mikdoe schrieb:
War das Gelöst Präfix zu voreilig? Muss das für den IE8 auch laufen oder ist er dir egal?
Zum Vergrößern anklicken....

Soll mir in dem Fall egal sein! Ich blende beim IE8 eh eine dicke Meldung ein dass die APP für Chrome und Firefox optimiert ist... Schön wäre natürlich eine Funktionalität in jedem Browser, aber das ist hier zweitrangig!

Wenn jemand allerdings ne Lösung parat hat, her damit :-D
 
Laut jQuery Seite sollte es mit Version 1.11.0 keine Probleme mit dem IE8 geben. Damit mal versucht?
 
Ich muss mich korrigieren :(

Mit der Version 1.9.1 klappt er im IE8 auch, dass das change-event auf das form bubbelt (oder wie ihr es nennt :icon6:).

Der IE8 hat mir anderen Stellen im code ein Problem. Und zwar mit meinen alten und zusätzlichen change-events für die einzelnen Felder die validiert werden müssen.
Da hatte ich bisher
Code: 
sales.addEventListener("change", validate_sales, false);

Die IE8 (und nur der!) meckert 'sales' ist nicht definiert. Obwohl die Zeile innerhalb von $(document).ready(function(){ steht... Aber auch VOR dem .ready kommt der gleiche Fehler (Was ja logisch ist) Aber das ist ja jetzt ein neues Problem und wäre hier im Thread fehl am Platz.

Ich habe die Zeile mal folgendermaßen geändert:
Code: 
$("input[name=sales]").change(validate_sales(event));

Da bekomme ich aber hier ein Fehler dass für 'trgt' ein Object erforderlich ist...
Code: 
function validate_sales (event) {
	// sales oder adjust?
	if (event.target) {
		trgt = event.target;
	} else {
		trgt = event.srcElement
	}
	
	// Eingabeformat ok?
	[U]tocheck = trgt.value[/U]
	isok = tocheck.search(/(^\d{1,4}$)|(^\d{1,4}\,\d{1,2}$)/);
	if (isok == -1) {
		alert("Eingabe ungültig. Bitte einen Wert von 0-9999 eingeben.");
		trgt.value = trgt.defaultValue;
		trgt.focus();
		return;
	}

Ich hatte mir das alles einfacher vorgestellt.... *lach*
 
Zuletzt bearbeitet:
Aber die Schreibweise sales.addEventListener() funktioniert doch auch nur, wenn in sales das DOM Element enthalten ist, also z.B. sales = document.createElement('div') oder sales = document.getElementBy(). Wie wird sales denn bei dir definiert?
 
mikdoe schrieb:
Wie wird sales denn bei dir definiert?
Zum Vergrößern anklicken....
So:
HTML: 
<input style="width: 180px" class="inputtext" name="sales" id="sales" type="text" onchange="" value="107,60">

Nachtrag:

Wobei hier das leere onchange eigentlich nicht gewollt ist.:icon6: Das kommt daher, dass ich die input-Felder inkl. Beschriftung usw durch eine eigene PHP-Funktion erstellen lasse. Ich habe den Aufruf jetzt aus dem Script-Bereich entfernt und direkt beim HTML-Tag eingetragen. Jetzt klappt alles wie ich es möchte sowohl im IE8 als auch beim Chrome!
 
Zuletzt bearbeitet:
mikexmagic schrieb:
Ich habe den Aufruf jetzt aus dem Script-Bereich entfernt und direkt beim HTML-Tag eingetragen. Jetzt klappt alles wie ich es möchte sowohl im IE8 als auch beim Chrome!
Zum Vergrößern anklicken....
Das ist aber die schlechteste variante die du finden konntest.
addEventListener geht erst ab ie9. vorher war es attachEvent.
wenn du das wieder mit jquery machst, musst du dir keine gedanken machen um solche browserunterschiede.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben