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

[SCRIPTSUCHE] INPUT-Values übergeben ... INPUT-ID's mit Wildcards?

D

djmoe2005

New member
Hallo,

ich suche eine Möglichkeit, Eingaben in einem Textfeld zu kopieren, dessen Wert in Eingabefeld 2+3 übergeben wird.

Da diese 3 Eingabefelder zeilenweise abweichende und unbekannte ID's haben, war die Idee an Wildcards.
Ich würde dies auch gerne über ID ansprechen, da ClassName nicht verwendet werden kann.


Das erste Feld jeder Zeile heißt zB "feld_1-1", "feld_2-1", "feld_3-1", ...
eine Zahl ändern sich daher stets, die allerdings NICHTS mit Zeilennummer zu tun.


Eine kleine Übersicht dazu, zum besseren Verständnis:
Code: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Eingaben kopieren</title>
</head>
<body>
<input id="feld_1-1" type="text" value="feld 1 - zeile 1" size="15"> <input id="feld_1-2" type="text" value="bekommt wert von feld 1 - zeile 1" size="30"> <input id="feld_1-3" type="text" value="bekommt wert von feld 1 - zeile 1" size="30"><br>
<input id="feld_2-1" type="text" value="feld 1 - zeile 2" size="15"> <input id="feld_2-2" type="text" value="bekommt wert von feld 1 - zeile 2" size="30"> <input id="feld_2-3" type="text" value="bekommt wert von feld 1 - zeile 2" size="30"><br>
<input id="feld_3-1" type="text" value="feld 1 - zeile 3" size="15"> <input id="feld_3-2" type="text" value="bekommt wert von feld 1 - zeile 3" size="30"> <input id="feld_3-3" type="text" value="bekommt wert von feld 1 - zeile 3" size="30"><br>
</body>
</html>


Ansäte gibt es zB mit Hilfe von jQuery, aber auch dies möchte ich vermeiden zu nutzen, ein kleines JavaScript wäre für meinen Einsatzzweck ideal.

Attribute Contains Selector [name*="value"] | jQuery API Documentation

Danke für Hilfe!

- - - Aktualisiert - - -

folgendes Beispiel klappt soweit, allerdings nicht flexibel mit Schleife aufgebaut und zudem nicht per ID-Zuweisung

Code: 
<html>
<head>
<title>Eingaben kopieren</title>
<script language="JavaScript">
function inhaltKopieren() {
	document.formular.feld_1_2.value = document.formular.feld_1_1.value;
	document.formular.feld_1_3.value = document.formular.feld_1_1.value;
	document.formular.feld_2_2.value = document.formular.feld_2_1.value;
	document.formular.feld_2_3.value = document.formular.feld_2_1.value;
	document.formular.feld_3_2.value = document.formular.feld_3_1.value;
	document.formular.feld_3_3.value = document.formular.feld_3_1.value;
}
</script>
</head>
<body onkeyup="inhaltKopieren(event)">
<form name="formular">
<input id="feld_1_1" type="text" value="" size="15"> <input id="feld_1_2" type="text" value="" size="15"> <input id="feld_1_3" type="text" value="" size="15"><br>
<input id="feld_2_1" type="text" value="" size="15"> <input id="feld_2_2" type="text" value="" size="15"> <input id="feld_2_3" type="text" value="" size="15"><br>
<input id="feld_3_1" type="text" value="" size="15"> <input id="feld_3_2" type="text" value="" size="15"> <input id="feld_3_3" type="text" value="" size="15"><br>
</form>
</body>
</html>
 
Ich verstehe irgendwie dein Problem nicht... erklär' doch mal, was du grundlegend erreichen willst.

Einige Frage, die mir zusätzlich in diesem Zusammenhang durch den Kopf gehen:

Warum willst du eigentlich überhaupt den Inhalt kopieren?
Warum betonst du das mit den Zeilennummern?
djmoe2005 schrieb:
die allerdings NICHTS mit Zeilennummer zu tun.
Zum Vergrößern anklicken....
Wie flexibel muss der Code sein und warum?
Warum kannst du nicht mit Klassen arbeiten?

PS: Deinem HTML fehlt ein DocType - die einfachste und modernste ist <DOCTYPE html>. Außerdem ist das language-Attribut veraltet -> weg damit.
PPS: Für CSS-Selektoren brauchst du nicht unbedingt jQuery. Dafür kannst du auch document.querySelectorAll() verwenden.
 
Mein Problem ist, dass ich ein kleines Customizing an einer zertifizeriten Software durchführen muss.
Die Software verwaltet Datenbank-Objekte, die oft umbenannt werden müssen, hierbei gibt es 3 Felder die identisch sein müssen.

Da die Seite / Objekttabelle stets dynamisch aufgebaut wird, erhält jede Zeile eine eindeutige ID-Nummer, die Benennung teilweise aber unbekannt ist, vergleichbar mit einer gezogenen Token-ID. Lediglich der Feldname steht noch zusätzlich vorangestellt mit in der Bezeichnung drin. (z.B. Feld1 "NEUER-NAME_a25d145ctzd00345_SID")

Zudem sind alle Eingabefelder über eine Klasse formatiert, so dass diese nicht je Zeile eindeutig ist und ich nicht verwenden kann.
Daher das kurzer Hand erstellte HTML-Beispiel (bitte hier keine Fehler prüfen, es soll nur ein Beispiel sein), um zu verstehen wie die Eingaben dynamisch kopiert werden sollen.

Daher suche ich eine Lösung, bei der ich die ID oder auch den Namen der Eingabefehler abfragen kann. Dieser muss aber wie gesagt mit einer Art "Wildcard" funktionieren, da stets je Zeile eine unbekannte Nummer mit enthalten ist.

Ich weis daher nicht, wie man per "onkeyup" und "document.querySelectorAll()" jede Zeile unabhängig separat ansteuern kann.

Ich hoffe ich konnte es etwas besser verständlich erklären.

P.S. das HTML-Beispiel zeigt sehr gut das Verhalten das ich suche, es ist leider nur star programmiert.

- - - Aktualisiert - - -

EDIT

Anbei auch mal ein JSFIDDLE ... hier habe ich es mal mit JQuery versucht, aber hier muss man wohl mit substring() arbeiten.

Ich komme leider nicht weiter, ideal wäre eine JS Lösung, nur im äußersten Notfall eben JQuery.

Edit fiddle - JSFiddle

Wie man sehen kann, sind die ID's identisch, nur die Nummer ist jeweils abweichend.
 
Zuletzt bearbeitet:
djmoe2005 schrieb:
Die Software verwaltet Datenbank-Objekte, die oft umbenannt werden müssen, hierbei gibt es 3 Felder die identisch sein müssen.
Zum Vergrößern anklicken....
Klingt irgendwie nach schlechtem DB-Design...
djmoe2005 schrieb:
Ich hoffe ich konnte es etwas besser verständlich erklären.
Zum Vergrößern anklicken....
Ja, ist verständlicher.

Sowas ist durchaus mit reinem JS machbar:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input id="MultiRename.Document:2312055455_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055456_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055457_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055458_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055458_NEWNAME_JSID" type="text" value="">
<script type="text/javascript">
[].forEach.call(document.querySelectorAll("[id$='NEWNUMBER_JSID']"), function(input){
	var copies = ["NEWNAME_JSID", "NEWFILENAME_JSID"].map(function(name){
		return document.getElementById(input.id.replace("NEWNUMBER_JSID", name));
	}).filter(function(copy){
		return copy;
	});
	copies.push(input);
	copies.forEach(function(input){
		input.addEventListener(
			"input",
			function(){
				var This = this;
				copies.forEach(function(copy){
					copy.value = This.value;
				});
			},
			false
		);
	});
});
</script>
</body>
</html>
- lesen, verstehen, verwenden.
 
Wow, danke erst mal für die Hilfe, das Script schaut klasse aus und läuft standalone.

Habe es auch versucht zu verstehen ... du sammelst zunächst alle "input" und kopierst/maps diese zusammen?

Ich habe das Script eingebaut, es läuft leider nicht innerhalb meiner Seite :-(

Ich habe gerade gesehen, dass die INPUT-Felder jeweils gleichnamige ID und NAME aufweisen.

Auf der Seite gibt es natürlich noch weitere INPUT's, aber sollte an sich kein Problem darstellen.


Aktuell ist das Script ja allgemein gültig "[].forEach.call(document.querySelectorAll", kann man dies nicht auf ein "Formular" beschränken? Vielleicht liegt es an den vielen Forms.

- - - Aktualisiert - - -

Anbei ein Bild, damit du mal den Aufbau komplett siehst, Text darf/kann ich leider nicht kopieren.

screen.jpg
 
Zuletzt bearbeitet:
djmoe2005 schrieb:
danke erst mal für die Hilfe
Zum Vergrößern anklicken....
Bitte - gern geschehen.

djmoe2005 schrieb:
du sammelst zunächst alle "input" und kopierst/maps diese zusammen?
Zum Vergrößern anklicken....
Ich hole mir zuerst alle <input>s, die dem gewünschten CSS-Selektor entsprechen. Diese gehe ich einzeln durch und hole mir dann in das Array copies alle <input>s, die immer den gleichen Inhalt haben sollen (inkl. dem aller ersten).
Auf jedem dieser Kopien registriere ich dann einen Eventlistener auf dem Event "input" (wird also ausgeführt, wenn irgendwas irgendwie in das Feld eingegeben wird - egal ob durch Tastatur, Copy/Paste oder Maus), der den Wert in den anderen <input>s anpasst.

djmoe2005 schrieb:
es läuft leider nicht innerhalb meiner Seite
Zum Vergrößern anklicken....
Steht etwas in der Fehlerkonsole? Setze doch über den FF-Debugger ein paar Breakpoints und schau' dir an, ob in den Variablen immer das drin steht, was du erwartest.

djmoe2005 schrieb:
Ich habe gerade gesehen, dass die INPUT-Felder jeweils gleichnamige ID und NAME aufweisen.
Zum Vergrößern anklicken....
Das sollte kein Problem darstellen.

djmoe2005 schrieb:
Aktuell ist das Script ja allgemein gültig "[].forEach.call(document.querySelectorAll", kann man dies nicht auf ein "Formular" beschränken? Vielleicht liegt es an den vielen Forms.
Zum Vergrößern anklicken....
Du kannst den CSS-Selektor nach belieben anpassen. Auch kannst du die Methoden querySelectorAll auf jedem beliebigen Element laufen lassen.
Code: 
document.getElementById("DEIN_FORMULAR").querySelectorAll(...)
funktioniert genauso.

djmoe2005 schrieb:
Anbei ein Bild
Zum Vergrößern anklicken....
Sehe in dem Code jetzt nichts, was Probleme bereiten sollte...
 
So, Problem habe ich nun schon annähernd gefunden!

Das Script darf nicht im HEAD liegen ... darf ich fragen wieso?
Das wäre mir am liebsten gewesen.
 
djmoe2005 schrieb:
darf ich fragen wieso?
Zum Vergrößern anklicken....
Einfache Antwort: weil ich faul bin... ;)

Ich platziere meine Skripte meistens ans Ende des <body>s, da man sich dadurch nicht auf das window.onload oder DOM-ready Event warten muss um Skripte auszuführen, die auf dem DOM operieren. Wenn du das so wie es ist Skript in der Head packst, läuft das ohne Probleme durch, aber da der <body> noch gar nicht aufgebaut ist, findet document.querySelectorAll() einfach gar nichts und es wird effektiv nichts gemacht.

Wenn du das Teil in den <head> packen willst, musst du das ganze in einen Eventlistener packen und auf einem der oben genannten Events registrieren:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
<script type="text/javascript">
window.addEventListener("load", function(){
	[].forEach.call(document.querySelectorAll("[id$='NEWNUMBER_JSID']"), function(input){
		var copies = ["NEWNAME_JSID", "NEWFILENAME_JSID"].map(function(name){
			return document.getElementById(input.id.replace("NEWNUMBER_JSID", name));
		}).filter(function(copy){
			return copy;
		});
		copies.push(input);
		copies.forEach(function(input){
			input.addEventListener(
				"input",
				function(){
					var This = this;
					copies.forEach(function(copy){
						copy.value = This.value;
					});
				},
				false
			);
		});
	});
}, false);
</script>
</head>
<body>
<input id="MultiRename.Document:2312055455_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055456_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055457_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055458_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055458_NEWNAME_JSID" type="text" value="">
</body>
</html>
 
Oh mann, absoluter Wahnsinn ... es läuft jetzt! Bedanke mich VIELMALS, klasse Umsetzung!

Ich beneide immer wieder solche Leute :( ... kannst du nicht dein KnowHow auf nen USB Stick ziehen?
KnowHow Transfer wäre manchmal echt viel Wert.

...

Habe so nach und nach die Script-Bestandteile durchgeforstet, bin nun auch etwas dahinter gestiegen, auch das mit Script im Header leuchtet mir natürlich nun auch ein. Wenn ich das nun noch selbst umsetzen könnte *träum* ...

DANKEEEEEE

- - - Aktualisiert - - -

Edit

Im Firefox läuft das ohne Probleme, im IE8 aktuell noch nicht ... kann der IE mal wieder ein paar Funktionen nicht verarbeiten? (jaaaa wir haben den IE8 und können nicht upgraden)
 
djmoe2005 schrieb:
Bedanke mich VIELMALS
Zum Vergrößern anklicken....
Bitte - gern geschehen.

djmoe2005 schrieb:
im IE8 aktuell noch nicht
Zum Vergrößern anklicken....
Äh... IE8... ja.. den hab' ich natürlich nicht bedacht. Der kennt zum einen Array.prototype.forEach() (und auch .filter() und .map()) nicht, was du ihm aber beibringen kannst.

ABER dann kennt er auch nicht .addEventListener und auch nicht das "input"-Event.
.addEventListener() heißt bei alten IEs .attachEvent mit leicht anderen Parametern und das "input"-Event musst du über keypress, keyup, click, mouseup und change abdecken.

Du siehst also, dass du damit so richtig in die Browserinkompatibilitäten reinläufst... ich würde dir dann doch empfehlen, dass du ein Framework verwendest.

Wenn du es trotzdem über reines JS machen willst, kann das in etwa so aussehen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
<script type="text/javascript">
if (!Array.prototype.forEach){
	Array.prototype.forEach = function arrayForEach(callbackFn/*, thisArg*/){
		var len = this.length;
		if (typeof callbackFn !== "function"){
			throw new TypeError();
		}
		var T;
		if (arguments.length > 1){
			T = arguments[1];
		}
		for (var k = 0; k < len; k++){
			if (!this.hasOwnProperty || this.hasOwnProperty(k)){
				callbackFn.call(T, this[k], k, this);
			}
		}
	};
}
if (!Array.prototype.map){
	Array.prototype.map = function arrayMap(callbackFn/*, thisArg*/){
		var len = this.length;
		if (typeof callbackFn !== "function"){
			throw new TypeError();
		}
		var T;
		if (arguments.length > 1){
			T = arguments[1];
		}
		var A = new Array(len);
		for (var k = 0; k < len; k++){
			if (!this.hasOwnProperty || this.hasOwnProperty(k)){
				A[k] = callbackFn.call(T, this[k], k, this);
			}
		}
		return A;
	};
}
if (!Array.prototype.filter){
	Array.prototype.filter = function arrayFilter(callbackFn/*, thisArg*/){
		var len = this.length;
		if (typeof callbackFn !== "function"){
			throw new TypeError();
		}
		var T;
		if (arguments.length > 1){
			T = arguments[1];
		}
		var A = [];
		for (var k = 0; k < len; k++){
			if (!this.hasOwnProperty || this.hasOwnProperty(k)){
				var V = this[k];
				if (callbackFn.call(T, this[k], k, this)){
					A.push(V);
				}
			}
		}
		return A;
	};
}
var addEventListener = Element.prototype.addEventListener? "addEventListener": "attachEvent";
var eventPrefix = Element.prototype.addEventListener? "": "on";
window[addEventListener](eventPrefix + "load", function(){
	[].forEach.call(document.querySelectorAll("[id$='NEWNUMBER_JSID']"), function(input){
		var copies = ["NEWNAME_JSID", "NEWFILENAME_JSID"].map(function(name){
			return document.getElementById(input.id.replace("NEWNUMBER_JSID", name));
		}).filter(function(copy){
			return copy;
		});
		copies.push(input);
		copies.forEach(function(input){
			["input", "change", "keypress", "keyup", "click", "mouseup"].forEach(function(eventType){
				input[addEventListener](
					eventPrefix + eventType,
					function(){
						copies.forEach(function(copy){
							copy.value = input.value;
						});
					},
					false
				);
			});
		});
	});
}, false);
</script>
</head>
<body>
<input id="MultiRename.Document:2312055455_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055455_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055456_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055456_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055457_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWNAME_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055457_NEWFILENAME_JSID" type="text" value="">
<br><br>
<input id="MultiRename.Document:2312055458_NEWNUMBER_JSID" type="text" value=""><br>
<input id="MultiRename.Document:2312055458_NEWNAME_JSID" type="text" value="">
</body>
</html>
- getestet im IE10 mit IE8 Emulation.

PS:
djmoe2005 schrieb:
jaaaa wir haben den IE8 und können nicht upgraden
Zum Vergrößern anklicken....
Ich hoffe, diese Rechner sind nicht ans Internet angeschlossen... und auch eine Verbindung zum lokalen Netzwerk ist kritisch zu sehen.
 
Auweia ... dachte ich mir es doch!

Doch, wir haben leider aktuell noch XP mit IE8 im Einsatz, bis wir endlich auf Win7 mit IE9 umstellen können.

Ich gehe daher davon aus, dass ich das bisherige Script ab IE9 verwenden kann, aktuell solange auf die andere Lösung zurückgreifen muss.

Framework, da kenne ich mich nicht mehr aus :(
 
Vielen Dank nochmals für deine Hilfe damals.

Ich wollte nun noch eine Erweiterung einbauen, ich wollte die Zeichenanzahl prüfen.
Sobald der User mehr als 10 Zeichen eingibt, soll der Hintergrund rot werden.

Ich hätte nun so etwas eingebaut, macht aber noch Probleme:
Code: 
if(SCHUNK_Eingaben_Uebergabe.value > 3)
  {
	document.getElementById(el).style.backgroundColor="#FF0000";
  }
  else
  {
	document.getElementById(el).style.backgroundColor="#FFFFFF";
  }
 
djmoe2005 schrieb:
das bläht die Abfrage ja auf?
Zum Vergrößern anklicken....
Schon, aber nicht besonders...
Code: 
var valueLength = SCHUNK_Eingaben_Uebergabe.value.length;
if (valueLength < 1 || valueLength > 10){
	document.getElementById(el).style.backgroundColor="#FF0000";
}
else {
	document.getElementById(el).style.backgroundColor="#FFFFFF";
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben