Dynamisch generierten Formularfelder values zuweisen

N

nick_beat20

Grünschnabel
Guten Tag,
ich bin gerade dabei, ein kleines Rechnungsprogramm zu schreiben. Kurz zur Situation:

Die Seite "Neue Rechnung schreiben" wird aufgerufen.

Neben Daten wie Adresse etc., hat der Benutzer vier Oberkategorien zur Verfügung.

Klickt man in einer Kategorie auf den Link "Artikel hinzufügen", blende ich einen Div mit den Artikeln zu der Kategorie ein.

Mit Klick auf einen Artikel, werden in einen Div zwei Formularfelder (Anzahl + Preis) hinzugefügt.

Ich möchte aber nun, dass ich in dem Div wo die Artikel hinzugefügt werden, ein Eingabefeld habe, wo ich einen festen Preis eingeben kann.

Dieser sollte dann bei allen eingefügten Preisfelder als value eingesetzt werden.


Hier ist mein Script, womit ich die Felder in den Div einfüge:

Code: 
						var RowID = 0;
					
						function AddRow(part_id,cat_id,part_beschreibung,kategorie) {
						RowID++;
						
						var label = new Element('label', {'for': part_id + 'anzahl', 'style': 'display: block; width: 300px; height: 18px; float: left; line-height: 18px; padding-left: 5px; margin-right: 15px; background-color: #999999;'}).update(part_beschreibung);
						var input_partid = new Element('input', {'type': 'hidden','value': '' + part_id + '','id': part_id + 'partid','name': 'row['+part_id+'][partid]'});
						var input_catid = new Element('input', {'type': 'hidden','value': '' + cat_id + '','id': cat_id + 'partid','name': 'row['+part_id+'][catid]'});
						var input_anzahl = new Element('input', {'type': 'text','id': part_id + 'anzahl','name': 'row['+part_id+'][anzahl]'});
						var input_preis = new Element('input', {'type': 'text','id': part_id + 'preis','name': 'row['+part_id+'][preis]'});
						var remove_link = new Element('a', { 'class': 'foo', href: '#', onclick: 'RemoveRow(' + RowID + ')' }).update("entfernen");
						
						var a = new Element('div', { 'id': 'feld' + RowID + '' })
						
						$('Posten' + kategorie + 'List').insert ({'bottom' : a });
						
						$('feld' + RowID).writeAttribute("style","border-top: 1px #999999 dotted; padding-top: 15px; padding-bottom: 15px;");
						
						$('feld' + RowID).insert ({'bottom' : label });
						$('feld' + RowID).insert ({'bottom' : input_partid });
						$('feld' + RowID).insert ({'bottom' : input_catid });
						$('feld' + RowID).insert ({'bottom' : input_anzahl });
						$('feld' + RowID).insert ({'bottom' : input_preis });
						$('feld' + RowID).insert ({'bottom' : remove_link });

						$(part_id + 'anzahl').writeAttribute("style","border: 1px #669900 solid; margin-right: 15px; width: 30px;");

						$(part_id + 'preis').writeAttribute("style","border: 1px #669900 solid; margin-right: 15px;");
		
						}


Und so sieht der Container aus, wo die Artikellinks drin sind:

HTML: 
<div id="PostenauswahlArbeitslohnDiv" style="z-index: 999; display: none; padding: 5px; width: 200px; min-height: 200px; border: solid #666666 1px; background-color: #cccccc; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px;">

	<a href="#" class="AuswahlmenuBold" onclick="ShowPartDiv(0,'arbeitslohn'); return false;"><span class="AuswahlmenuBold">Unterkategorie 1</span></a><br />
		
		<div id="div_arbeitslohn_0" style="display:none;">
		
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(1,1,'Arbeitslohn 1','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 1</span></a><br />
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(2,1,'Arbeitslohn 2','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 2</span></a><br />
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(3,1,'Arbeitslohn 3','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 3</span></a><br />
		
		</div>
		
	<a href="#" class="AuswahlmenuBold" onclick="ShowPartDiv(1,'arbeitslohn'); return false;"><span class="AuswahlmenuBold">Unterkategorie 2</span></a><br />
	
		<div id="div_arbeitslohn_1" style="display:none;"><a href="#" class="AuswahlmenuSub" onclick="AddRow(4,1,'Arbeitslohn 4','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 4</span></a><br />
		
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(5,1,'Arbeitslohn 5','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 5</span></a><br />
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(6,1,'Arbeitslohn 6','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 6</span></a><br />
			<a href="#" class="AuswahlmenuSub" onclick="AddRow(7,1,'Arbeitslohn 7','Arbeitslohn')"><span class="AuswahlmenuSub">Arbeitslohn 7</span></a><br />
			
		</div>								
						
	<hr noshade width="100%" size="1" color="#669900" style="margin-top: 5px; margin-bottom: 5px;">	
								
		<input type="text" id="PreisArbeitslohn" size="24" style="border: 1px #669900 solid; width:100px;">

		<a href="javascript:void(0);" onclick="document.getElementById('PostenauswahlArbeitslohnDiv').style.display='none';">Fertig</a>
				
</div>

Ich hoffe ihr versteht was ich meine und könnt mir einen Tipp geben.

Danke

Gruß Sven
 
Moin Sven,

ich glaube, es wäre hilfreich, wenn du mal eine bis dahin funktionierende Demo bereitstellst, aus den Codeschnipsel inkl. deiner Erläuterung lässt sich nur schwer erkennen, was du da vorhast.
 
Hallo Sven,
zwar sehr spät aber jetzt endlich habe ich wieder die Zeit um mich darum zu kümmern.
Unter dem folgenden Link kannst du eine Demo runterladen.

Kurze Erläuterung. Der Div der geöffnet ist, listet später alle verfügbaren Kategorien auf. Mit Klick auf eine Kat, werden alle Positionen der Kat angezeigt. Klickt man eine Position an, wird sie direkt ins Rechnungsformular übernommen.

Unter den Kategorien ist ein Textfeld. Das Feld soll als Pflichtfeld definiert sein. Dementsprechend soll sich der Kat-Div nicht schließen lassen, bevor ein Wert in das Feld eingetragen ist. Das bekomme ich hin.

Ich bekomme es einfach nicht hin, dass wenn ich in das Textfeld einen Wert eintrage, dieser automatisch in die vorher eingefügten Formularfelder eingetragen wird. Er muss ich das rechte Textfeld rein, da dort der Preis steht.

Verstehst du wie ich das meine? Wenn nicht fertige ich eine Skizze an ;-)

Danke schonmal.

Gruß Sven

http://www.schnettler.biz/DEMO.zip
 
Zuletzt bearbeitet:
Hallo,

also ich würde grundsätzlich in dem Sinne die document.createElement() benutzen, hatte bei mir bisher noch nie Probleme gemacht. Dadurch kannst du dann zB.: ohne zusätzlich über eine ID gehend auf das DOM Objekt zu greifen. Ich erkläre mal eben was ich meine. Du kannst entweder:
Code: 
var input = document.createElement("input");
input.id("keks");
$("#keks");

machen, oder aber direkt statt $("#keks"), $(input) machen, damit sparste sogar bisschen an JavaScript arbeit :)

Was deine Frage angeht, gibt es dafür 2 Wege. Entweder du machst: input.value = "dein wert" oder in $(input).attr("value","dein wert");
beides sollte reibungsfrei funktionieren.
 
Naja, ob man es nun mit createElement() oder mit der PrototypeJS-Methode macht, ist eigentlich egal.
Die Methode von PrototypeJS bietet ja doch einges an Ersprnis beim Schreibaufwand, wenn man viele Attribute hinzufügen will.

Ich nehme mal an, das Hauptproblem liegt beim Auslesen des Wertes des richtigen Inputs.

Die Zeile, wo der Wert benötigt wird, ist ja jene:
Code: 
var input_preis = new Element('input', {'type': 'text','id': part_id + 'preis','name': 'row['+part_id+'][preis]'});

Wie kommt man nun an den Wert?

Angenommen, die ID des Textfeldes setzt sich immer zusammen aus "Preis" und dem Kategorie-Namen(im Beispiel also PreisArbeitslohn)...dann hätte man etwas, womit man den Wert auslesen könnte:
Code: 
$('Preis'+kategorie).value

Summa Summarum:
Code: 
var input_preis = new Element('input', {'value':$('Preis'+kategorie).value,'type': 'text','id': part_id + 'preis','name': 'row['+part_id+'][preis]'});
 
Hi,

wenn der Wert immer in das letzte Textfeld des zuletzt zugefügten DIVs soll, könntest du es wie folgt versuchen:
Code: 
<input type="text" id="PreisArbeitslohn" onkeyup="$$('div[id^=\'feld\']:last-child input').last().value = this.value;" size="24" style="border: 1px #669900 solid; width:100px;">
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück