Trigger bei Veränderung im Formular
Tom
- javascript
0 Cheatah0 Tom0 H2O0 Tom0 Cheatah0 XaraX0 Tom
Hello,
gibt es einen Trigger für die Veränderung im Formular, also einen, der bei jeder bestätigten Änderung in einem Feld aktiv wird?
ich dachte, dass onChange da funktioniert, aber denkste...
Liebe Grüße aus http://www.braunschweig.de
Tom
Hi,
gibt es einen Trigger für die Veränderung im Formular, also einen, der bei jeder bestätigten Änderung in einem Feld aktiv wird?
wie definierst Du "Veränderung"?
Cheatah
Hello,
Hi,
gibt es einen Trigger für die Veränderung im Formular, also einen, der bei jeder bestätigten Änderung in einem Feld aktiv wird?
wie definierst Du "Veränderung"?
so wie es da steht: "... bei jeder bestätigten Änderung..."
Geändert werden die Values von Formularelementen durch Benutzerhandlung, In dem Moment, in dem das Feld verlassen wird, gelte sie als bestätigt. Das war schon immer so und ich sehe keinen Grund, dass ich das ändere. Das überlasse ich Microsoft. Die Haben ja schließlich die Taste für Field Value Confirmation auch von RETURN auf TAB geändert. ;-)
Liebe Grüße aus http://www.braunschweig.de
Tom
Hallo.
Geändert werden die Values von Formularelementen durch Benutzerhandlung, In dem Moment, in dem das Feld verlassen wird, gelte sie als bestätigt. Das war schon immer so und ich sehe keinen Grund, dass ich das ändere. Das überlasse ich Microsoft. Die Haben ja schließlich die Taste für Field Value Confirmation auch von RETURN auf TAB geändert. ;-)
Meinst du onBlur ?
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onblur
Schönen Tag noch, H2O
Hello,
Meinst du onBlur ?
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onblur
Das könnte eventuell nützlich sein. Wenn <form onBlur=... funktioniert.
Liebe Grüße aus http://www.braunschweig.de
Tom
Hi,
Wenn <form onBlur=... funktioniert.
Du willst das ganze im <form> unterbringen? Vergisses[tm], das ändert sich nicht.
Cheatah
Hi Tom,
<html>
<head>
<title></title>
<meta content="">
<script>
var a=new Array()
a.w01="eddi"
a.w02="eddi"
a.w03="eddi"
function vergleich(v)
{
if(v.value!=a[v.name])
{
alert("Du hast "+a[v.name]+" in "+v.value+" geändert!")
a[v.name]=v.value
}
}
</script>
</head>
<body>
<form>
<input name="w01" value="eddi" onBlur="vergleich(this)">
<input name="w02" value="eddi" onBlur="vergleich(this)">
<input name="w03" value="eddi" onBlur="vergleich(this)">
</form>
</body>
</html>
(Nanu? Du und JS ;)
Gruß aus Berlin!
eddi
Hello,
onChange wäre mein Freund. ABer ich bekomme den Trigger nicht in die dynamische Definition hinein
(Nanu? Du und JS ;)
Ja, muss mich nun doch mal intensiver damit beschäftigen, da ich für das CMS einige JS-Tools benötige. Die Kunden verlangen das so: "andere Webmaster machen das doch auch...!"
Und da ich ganz gerne bald mal wieder von meinen Kunden leben möchte, muss ich nun Gas geben. Hier geht es um einen Fileupload für Bildgalereien. Alle serverseitugen Sachen sind schon funktionstüchtig, aber es ist eben sehr unergononomisch, wenn man immer nur ein Bild hochladen kann und es vorher nicht sehen kann.
Es gibt nun also eine Liste, die man immer werweitern kann und die eine Vorschau ermöglicht.
Liebe Grüße aus http://www.braunschweig.de
Tom
Hello,
onChange wäre mein Freund. ABer ich bekomme den Trigger nicht in die dynamische Definition hinein
nach wie vor ist (für mich!) onBlur der besser Freund
Ja, muss mich nun doch mal intensiver damit beschäftigen, da ich für das CMS einige JS-Tools benötige. Die Kunden verlangen das so: "andere Webmaster machen das doch auch...!"
;)
nur ein Bild hochladen kann und es vorher nicht sehen kann.
Ich verstehe, worauf es hinausläuft... genialer Gedanke!
inp.onChange = "showImage(filecount);";
Schon wäre es geht aber leider nicht. Da kann ich Dir anraten das ganze entweder mit {display:none} vorzuhalten [serverseitig for()] und dann lediglich einzubelnden, oder Du läßt Deinen Kunden ein innerHTML angedeien, was IE und Mozilla sauber interpretieren.
Gruß aus Berlin!
eddi
Hello,
onChange wäre mein Freund. ABer ich bekomme den Trigger nicht in die dynamische Definition hinein
nach wie vor ist (für mich!) onBlur der besser Freund
na so ein Quark onBlur kommt bei type="File" nicht zum tragen... sorry :(
Gruß aus Berlin!
eddi
Hello,
nach wie vor ist (für mich!) onBlur der besser Freund
Nee, da habe ich mit dem statisch definierten input-Feld schon ausprobiert. Das läuft ganz ausgezeichnet mit onChange. OnChange wird durch das Exit des Durchsuchen-Events ausgelöst und auch durch das Verlassen des Feldes nach erfolgter Änderung.
inp.onChange = "showImage(filecount);";
Schon wäre es geht aber leider nicht.
Ist das sicher, dass das nicht geht? ALle anderen Eigenschaften des Objektes kann man doch auch ändern. Kann mir nur vorstellen, dass das genauso etwas tiefer verpackt liegt, wie z.B.
inp.style.backgroundcolor = #123456;
Liebe Grüße aus http://www.braunschweig.de
Tom
Hello,
Wenn <form onBlur=... funktioniert.
Du willst das ganze im <form> unterbringen? Vergisses[tm], das ändert sich nicht.
Schon geschehen ;-)
Also muss ich da in jedem Feld unterbringen. Wenn ich ein input-Feld ganz normal im HTML definiere
<input type="file" name="neu" onChange="alert('gewechselt');">
dann funktioniert der onChange-Trigger und ruft den eingetragenen Handler auf. Wie bekomme ich nun die Definition des Triggers in die Dynamische Definition rein?
Meine Baustelle sieht zur Zeit so aus:
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
inp.onChange = "showImage(filecount);";
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);
filecount++;
//alert(inp.id);
}
Ich mach das aber augenscheinlich falsch, denn es passiert nix.
Liebe Grüße aus http://www.braunschweig.de
Tom
Hallo Tom,
Wie bekomme ich nun die Definition des Triggers in die Dynamische Definition rein?
kann es sein, daß Du ein Attribut hinzufügen willst?
http://de.selfhtml.org/javascript/objekte/document.htm#create_attribute
Gruß, Andreas
Hello Andreas,
Wie bekomme ich nun die Definition des Triggers in die Dynamische Definition rein?
kann es sein, daß Du ein Attribut hinzufügen willst?
http://de.selfhtml.org/javascript/objekte/document.htm#create_attribute
Das könnte schon sein, aber size und maxlenght sind doch auch so vorhanden.
Ich bekomme es einfach nicht hin, das dynamisch zu definieren.
Liebe Grüße aus http://www.braunschweig.de
Tom
Das könnte schon sein, aber size und maxlenght sind doch auch so vorhanden.
nicht size und maxlength, sondern onChange. Ich weiß nicht, aber vielleicht kann man das als ganz normales Attribut definieren und in den Elementbaum einhängen.
außerdem geht das wohl wesentlich bequemer alles mit innerHTML. Da kannst Du dann die Definition, die Du schon per Hand gefunden hast als String einfügen. Habe lange kein JS mehr gemacht, aber sollte eigentlich gehen.
Gruß, Andreas
Hi Tom,
außerdem geht das wohl wesentlich bequemer alles mit innerHTML.
Dem möchte ich nochmals nachdrücklich beipflichten! Aber es geht ja ... http://www.javamagazin.de/itr/online_artikel/psecom,id,347,nodeid,11.html
Viel Glück
Gruß aus Berlin!
eddi
Hallo,
Meine Baustelle sieht zur Zeit so aus:
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
inp.onChange = "showImage(filecount);";
Fällt Dir auf, dass die anderen Eigenschaften alle klein geschrieben sind? Das Element hat die Eigenschaft onchange. Nur als HTML-Attribut ist die Schreibung case insensitive.
inp.onchange = "showImage(filecount);";
Das sollte in Geckos und im neuen Opera funktionieren. Der IE will, dass die Eigenschaft onchange auf eine Funktion zeigt, die anderen Browser akzeptieren das auch.
inp.onchange = funtion() {showImage(filecount);};
viele Grüße
Axel
Hello Axel, hello Eddi & helle All,
http://www.javamagazin.de/itr/online_artikel/psecom,id,347,nodeid,11.html
hat mich auf die passende Idee gebracht, wie es im IE zum laufen gebracht werden kann. Das ist natürlich immer noch eine Baustelle.
Hier mal der z.Zt. "lauffähige" TestCode mit der Bitte, mir bei der Verbesserung /Optimierung zu helfen.
<html>
<head>
<title>MultiUpload</title>
<script type="text/javascript">
<!--
var filecount = 0;
function showImage(imgNr)
{
document.getElementById('img1').src='file://' + document.getElementById('fileId'+imgNr).value;
}
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
// var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("<input type='file' onchange='showImage("+ filecount+ ");'>");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
//inp.onchange = 'showImage(filecount);'; // das geht nicht
td.appendChild(inp);
tr.appendChild(td);
//tbody.appendChild(tr);
//fx.appendChild(tbody);
fx.appendChild(tr);
filecount++;
alert(inp.onchange);
}
//-->
</script>
</head>
<body onLoad="insert_file_input('tb1');">
<img id="img1" scr="" height ="140">
<form name="form2" id="f2"
action="http://testserver.lan.fli4l/~thomas/test/debug/kontrolle.php"
method="post"
enctype="multipart/form-data"
onChange="document.getElementById('btn01').visible = true;">
<table id="t1">
<thead></thead>
<tbody id='tb1'></tbody>
<tfoot></tfoot>
</table>
<input type="button" name"btn[newInput]"
value="weiteren File hinzufügen"
onClick="insert_file_input('tb1')"
id="btn01">
<input type="submit" name"btn[upload]" value="übertragen">
<input type="button" value="Vorschau" onclick="showImage(0);">
</form>
</body>
</html>
Ich hoffe, ich habe jetzt nicht was rausgelöscht, was man brauchte...
Zur Kontrolle habe ich nun noch das Alert() dringelassen. Wieso wird die Funktion immer als "function anonymous()" bezeichnet?
In welchen üblichen Browsern (mit Bildanzige) funktioniert das hier garantiert nicht? Könntet Ihr das bitte mal testen?
Liebe Grüße aus http://www.braunschweig.de
Tom
Hallo,
//inp.onchange = 'showImage(filecount);'; // das geht nicht
Doch, das geht, außer im IE.
inp.onchange = function() {showImage(filecount);};
Das geht überall.
<html>
<head>
<title>MultiUpload</title>
<script type="text/javascript">
<!--
function showImage(imgNr)
{
alert(imgNr);
}
var filecount = 0;
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
//inp.onchange = 'showImage(filecount);';
inp.onchange = function() {showImage(filecount);};
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);
filecount++;
}
//-->
</script>
</head>
<body onLoad="insert_file_input('tb1');">
<form name="form2" id="f2" action="http://testserver.lan.fli4l/~thomas/test/debug/kontrolle.php"
method="post"
enctype="multipart/form-data"
onChange="document.getElementById('btn01').visible = true;">
<table id="t1">
<thead></thead>
<tbody id='tb1'></tbody>
<tfoot></tfoot>
</table>
</form>
</body>
</html>
viele Grüße
Axel
PS:
Die Funktion heißt anonymous, weil sie keinen Namen hat ;-))
Hello,
//inp.onchange = 'showImage(filecount);'; // das geht nicht
Doch, das geht, außer im IE.inp.onchange = function() {showImage(filecount);};
Das geht überall.
Leider ist das nicht zielführend, da ich ja bei jedem Einfügen ein anderes Element.value auslesen muss und dafür nur eine Funktion habe.
darum habe ich die Funktion so überwändlich aufgebaut...
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
var tr = document.createElement("tr");
var td = document.createElement("td");
imgstr = "showImage("+ filecount+ ")";
element = "<input type='file' onchange='"+imgstr+"' onDblClick='"+imgstr+"'>";
var inp = document.createElement(element);
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);
filecount++;
}
Wäre trotzdem nett, wenn nochmal jemand meine Version (paar Postings höher) von eben in anderen Browsern als dem IE5.5 ausprobieren könnte.
Liebe Grüße aus http://www.braunschweig.de
Tom
Hello,
//inp.onchange = 'showImage(filecount);'; // das geht nicht
Doch, das geht, außer im IE.inp.onchange = function() {showImage(filecount);};
Das geht überall.Leider ist das nicht zielführend, da ich ja bei jedem Einfügen ein anderes Element.value auslesen muss und dafür nur eine Funktion habe.
darum habe ich die Funktion so überwändlich aufgebaut...
Ja, eben ;-))
var filecount = 0;
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
inp.onchange = function() {showImage(this.id);};
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);filecount++;
}
function showImage(imgNr)
{
alert(document.getElementById(imgNr).value);
}
viele Grüße
Axel
Hello Axel,
ich denke manchmal nicht daran, dass die Trigger-Handler ja als Methode des triggernden Objektes aufgerufen werden. Da habe ich das "this" immer an der falschen Stelle eingesetzt und nicht darüber nachgedacht, dass es ja auch in der Methode noch evaluiert werden kann.
Danke für die Hilfestellung
Das ist also bisher dabei herausgekommen. Vielleicht interessiert auch ja auch andere:
<html>
<head>
<title>MultiUpload</title>
<script type="text/javascript">
<!--
var filecount = 0;
function showImage(imgNr)
{
document.getElementById('img1').src='file://' + document.getElementById(imgNr).value;
}
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
var tr = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
inp.onchange = function() {showImage(this.id);};
inp.ondblclick = function() {showImage(this.id);};
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);
filecount++;
alert(inp.onchange);
}
//-->
</script>
</head>
<body onLoad="insert_file_input('tb1');">
<img id="img1" scr="" height ="140">
<form name="form2" id="f2"
action="http://testserver.lan.fli4l/~thomas/test/debug/kontrolle.php"
method="post"
enctype="multipart/form-data">
<table id="t1">
<thead></thead>
<tbody id='tb1'></tbody>
<tfoot></tfoot>
</table>
<input type="button" name"btn[newInput]"
value="weiteren File hinzufügen"
onClick="insert_file_input('tb1')"
id="btn01">
<input type="submit" name"btn[upload]" value="übertragen">
</form>
</body>
</html>
Wäre jetzt nur noch interessant, welche Browser damit definitiv nicht klar kommen.
Liebe Grüße aus http://www.braunschweig.de
Tom
Ganz Großes Dankeschön an Axel! :)
Bis grade eben war ich felsenfest der Meinung Eventhanler geht nicht.... Wieder was dazu gelernt.
Folgedes Script ist im Massengrab für saugute Scripte gelandet:
<script type="text/javascript">
var filecount = 0;
function showImage(imgNr)
{
document.getElementById('img1').src='file://'+document.getElementById(imgNr).value;
}
function insert_file_input(tbody_id)
{
var fx = document.getElementById(tbody_id);
var tr = document.createElement("tr");
var td = document.createElement("td");
var b = document.createElement("b");
var inp= document.createElement("input");
inp.size = 60;
inp.maxlength = 80;
inp.type = 'file';
inp.name = 'file[]'
inp.id = 'fileId' + filecount;
b.appendChild(document.createTextNode("Click für Vorschau"))
b.onclick = function() {showImage(inp.id);};
td.appendChild(b);
td.appendChild(inp);
tr.appendChild(td);
fx.appendChild(tr);
filecount++;
}
</script>
winXP IE 6 TOP
suse Moz 1.6 TOP
suse Kon 3.2.1 Anzeige der Bilder nicht möglich aber funktionsfähig
Gruß & Dank aus Berlin!
eddi
Hallo ,
Wäre jetzt nur noch interessant, welche Browser damit definitiv nicht klar kommen.
Also onChange und dbClick funktionieren bei mir nicht, sondern nur der Klick auf den Button "weiteren file...". Würde ja auch reichen, aber im IE bekomme ich bei jedem Aufruf eines neuen Feldes ein Alert mit "function() {showImage(this.id);}"
Gruß, Andreas
Hello,
[...]
Axels Funktionsänderungen bringen bei Linux => Mozilla den Durchbruch!
Derzeit ist nur ein Scheitern bei der Unfähigkeit weitere upload-Felder anzuzeigen zu verzeichen...
Gruß aus Berlin!
eddi
var inp = document.createElement("<input type='file' onchange='showImage("+ filecount+ ");'>");
Du kannst doch so nicht einfach ein Element erstellen. Das ist in der DOM-Syntax leider etwas komplizierter: Element erstellen, Attributknoten erstellen, Textknotten erstellen, alles ineinander hängen.
http://de.selfhtml.org/javascript/objekte/document.htm#create_element
Ich bekomme ähnliche Fehlermeldungen wie Du im Firefox.
Gruß, Andreas
Hello,
var inp = document.createElement("<input type='file' onchange='showImage("+ filecount+ ");'>");
Du kannst doch so nicht einfach ein Element erstellen. Das ist in der DOM-Syntax leider etwas komplizierter: Element erstellen, Attributknoten erstellen, Textknotten erstellen, alles ineinander hängen.
ich hatte es ja auch erst anders. Aber das funktionierte nicht. Da hat mir Eddi den Link geschickt und auf dieser tollen Seite war dann dieser Vorschlag. Und sieh da, der IE wollte das plötzlich so annehmen.
Axels Vorschlag ist mir da schon sehr viel sympathischer. Und er funktioniert beim IE ja jetzt auch...
Liebe Grüße aus http://www.braunschweig.de
Tom
Hello,
var inp = document.createElement("<input type='file' onchange='showImage("+ filecount+ ");'>");
Da hat mir Eddi den Link geschickt und auf dieser tollen Seite war dann dieser Vorschlag.
Der Vorschlag (Link) und das worauf ich im eigentlichen hinaus wollte, war eigentlich diese Methode, die dort beschrieben war:
function CheckBox( id ) {
var o = document.createElement("<input type=checkbox>");
document.body.appendChild( o );
o.setId = Component_setId;
o.addEventHandler = Component_addEventHandler;
o.setChecked = CheckBox_setChecked;
o.isChecked = CheckBox_isChecked;
o.setId( id );
return o;
}
function CheckBox_setChecked( checked) {
this.setAttribute( "checked", true );
}
function CheckBox_isChecked() {
return this.getAttribute("checked");
}
function Component_setId( id ) {
this.id = id;
this.name = id;
}
function Component_addEventHandler( event, handler) {
this.attachEvent( event, handler );
}
Listing 2
myCheckBox = new CheckBox("id");
myCheckBox.addEventHandler( "onclick", myEventHandler );
myCheckBox.setChecked ( true );
function myEventHandler() {
alert( "CheckBox clicked");
}
Aber das sei nun überflüssig, foo.[event]= function() {} ist wesentlich besser!
Gruß aus Berlin!
eddi
Hello,
Da hat mir Eddi den Link geschickt und auf dieser tollen Seite war dann dieser Vorschlag.
Der Vorschlag (Link) und das worauf ich im eigentlichen hinaus wollte, war eigentlich diese Methode, die dort beschrieben war:
Nicht dass Du das verkehrt verstehst. Ich war froh, überhaupt eine Lösung zu finden, auch wenn sie nur in 89% der Browser funktioniert hätte. Aber so scheint sie wohl in 99% der gängigen Browser zu laufen und ich habe auch wieder ein bisschen dazugelernt.
letzte Version auf http://selfhtml.bitworks.de
Aber das sei nun überflüssig, foo.[event]= function() {} ist wesentlich besser!
Liebe Grüße aus http://www.braunschweig.de
Tom
Re Tom,
Linux => Mozilla
Das Script gibt keine erkennbaren Fehler zurück, läßt sich aber dennoch nicht reproduzieren.
Es ist ersichtlich, daß die erzeugten Elemente eingehangen worden sein müssen, das die Buttons jeweis um 2*(cellspacing) weiter nach unten rücken, jodoch wird das eingehängte "inp" NICHT angezeigt.
Linux => Konqueror
Es ist nicht feststellbar, das irgendetwas passiert...
Noch was:
<form name="form2" id="f2"
action="http://testserver.lan.fli4l/~thomas/test/debug/kontrolle.php"
method="post"
enctype="multipart/form-data"
onChange="document.getElementById('btn01').visible = true;">
onChange="document.getElementById('btn01').style.visibility = 'visible'">
Gruß aus Berlin!
eddi
Keine Ahnung ob irgendwo in der tiefe des threads das Problem gelöst wurde, aber folgendes:
inp.onChange = "showImage(filecount);";
Die Eventhandler werden in JS klein geschrieben und du musst ihnen eine Funktionsreferenz zuweisen.
Am einfachsten geht das so:
inp.onchange = showImage;
Dann hast du in showImage zugriff per this auf das Element inp.
Wenn du wirklich den Parameter filecount brauchst (m.E. nicht, da er ja schon in inp.id steckt) kannst du das auch so lösen:
inp.onchange = fucntion() { showImage(filecount); };
Struppi.