[HTML & Javascript] Dynamisch hinzugefügtes Element nicht im POST verfügbar?

diesermarco · 27.07.2010

Hallo,

ein für mich kniffliges Problem, um deren Lösung ich euch erbitte:

Ich habe ein Formular.
In diesem Formular sind diverse Elemente, welche mittels POST an die nachfolgende Seite übergeben werden.

Nun erzeuge ich mittels Javascript, nur durch individuelle Benutzerinteraktion, neue Elemente in diesem Formular. Die Werte derer sollen natürlich ebenfalls, mittels POST, an die nachfolgende Seite übergeben werden.

Dies geschieht jedoch leider nicht.

Die Namen der Elemente sind da und stimmen, die Inhalte der Elemente sind ebenfalls verfügbar. Alles mittels Firebug und der DOM-Funktion geprüft.

Daher meine logische Schlussfolgerung:

Dynamisch hinzugefügt Elemente in einem Formular-Bereich werden nicht übergeben, da dem Browser diese beim darstellen des Codes nocht nicht bekannt sind.
Liege ich mit dieser Annahme richtig?

Hilfe :-[

Ge0rgy · 27.07.2010

Kommt darauf an wie du sie erstellst.
Generell sind in diesem Zusammenhang Konstrukte wie xyz.innerHTML = "<input name='xyz' value='blah'>" problematisch.
Wenn du die Elemente per document.CreateElement erstellst, müsste das Ganze jedoch klappen.
Das beschreibene Problem ist mir nicht gänzlich unbekann, ich weiß nur nicht mehr in welchem Zusammenhang ich das mal hatte.
Fakt ist wohl, dass Form-Member irgend eine sonderbehandlung genießen, sich iregendwie im Dokument registrieren o.ä. und dahingehend dann gePOSTet werden...
Bei über das DOM erstellten Elementen sollte das funktionieren, obige Beispielzuweisung ist aber im eigentlichen Sinne ja nur ein String der zugewiesen und von der Layout-Engine gerendert wird.
Das muss nicht zwangsläufig bedeuten dass etwas das du per innerHTML zuweist auch in aller Gloria im DOM landet.
Firebug zeigt viel an wenn der Tag lang ist, aber es reflektiert in erster Linie das was du Siehst...also das von FF gerenderte und gelayoutete... nicht unbedingt das was im Backend geschieht...

diesermarco · 27.07.2010

Hallo,

danke für deine Antwort!

Ich generiere den zusätzlichen Code mittels createElement, appendChild usw...

Ich habe mittlerweile rausgefunden, dass das löschen eines bereits vorhandenen Elements keinen Einfluss auf das POSTen nimmt. Soll heißen, der Wert eines dynamisch gelöschten Elements wird trotzdem gePOSTet.

Das stärkt nur meine Theorie

Für weitere Anregungen bin ich trotzdem offen.

Ge0rgy · 27.07.2010

setz doch das Value des betreffenden elemtnes einfach auf "" *noahnung*

oder versuche es zu "disablen" - das müsste auch dafür sorgen dass es nich gepostet wird...
Ich muss zugeben ich habe derartiges noch nicht versucht...

diesermarco · 27.07.2010

Ge0rgy schrieb:
setz doch das Value des betreffenden elemtnes einfach auf "" oder versuche es zu "disablen" - das müsste auch dafür sorgen dass es nich gepostet wird...
Ich muss zugeben ich habe derartiges noch nicht versucht...

jetzt kann ich dir nicht folgen *noahnung*

Mein Ziel ist eben dass die Werte gePOSTet werden. Mein letzter Beitrag sollte nur dazu beitragen, zu verdeutlichn, dass nachträglich hinzugefügter oder gelöschter Code an dem Formular keine Auswirkungen mehr hat.

OBrian · 27.07.2010

Huh, da bin ich auch überfragt, ob Du nur irgendwo was übersehen hast oder das wirklich so ist. Falls die maximale Anzahl der möglichen Formularelemente aber vorhersehbar ist, könntest Du sie alle von vornherein versteckt anlegen (mit hidden) und dann einfach nach Bedarf anschalten.

Ge0rgy · 27.07.2010

Etwas beispielcode wäre schön

werde das daheim mal checken sobald ich zeit habe... kann mir irgendwie nicht vorstellen dass sowas kategorisch nicht funktioniert, im zeitalter von ajax usw.
Du kannst ja spaßeshalber mal testen ob es einen unterscheid macht wenn du die elemente nicht mit addChild an den body hängst, sondern an die form...!?
Es werden bei Post wie get ja eigntlich nur elemente übertragen die zwischen <form> und </form> definiert sind.
Wenn man also neue anlegt und die mit appendChild einfach ans document hängt, liegen diese für das DOM womöglich logisch gesehen außerhalb des <form> - Tags... *noahnung*

aber das ist Stochern im Nebel solange man kein Beispiel hat.
Allgemein rate ich dir, schreib mal eine simple seite, die im body nur eine form mit einem button hat.
Bei klick auf den button genertierst du via javascript ein Hidden-Element mit beliebigem value und submittest die form.
Dann brauchst du nur noch eine weitere Page an die du POSTest und die das result ausgeben lässt (könnte man unter umständen auch mit nur 1 Seite machen...)
so schließt du asu dass irgendwelche merkwürdgkeiten deiner akt. implementation den fehler verursachen....

BoMbY · 27.07.2010

Ja, ohne Code keine Lösung würde ich mal sagen ...

Vielleicht macht es ansonsten Sinn, ein AJAX-Framework zu verwenden - wozu das Rad neu erfinden?

diesermarco · 28.07.2010

Ein Auszug aus dem HTML-Gerüst:

HTML:

<div class="main">

<form name="arztform" action="index.php?content=untersuch&action=create&id=<?php echo $id; ?>" method="post">

<table>
<tr id="grundsatz">
	<td>Datum der Untersuchung:</td>
	<td><input type="text" size="10" name="untersuch_datum" id="untersuch_datum"></td>
	<td><img onClick="javascript:kalender_an('untersuch_datum')" src="images/kalender.jpg"></td>
	<td>Grundsätze:</td>
	<td>
	<select name="grundsatz1" onChange="javascript:grundsatz_add()">
	<option value="leer"></option>
	<option value="G24">G24</option>
	<option value="G25">G25</option>
	<option value="G26">G26</option>
	<option value="G37">G37</option>
	<option value="G42">G42</option>
	<option value="G43">G43</option>
	<option value="G46">G46</option>
	</select>
	</td>
</tr>
</table>

.....// mehr Inhalt.....

</form>
</div>

Die Funktion:

Im Grunde wird mir nur eine weitere identische Selectbox wie die oben zu sehende hinzugefügt.

HTML:

function grundsatz_add()
{
	var zeile = document.getElementById("grundsatz");
	var TD = document.createElement("td");
	var select = document.createElement("select");
	inhalt = new Array("", "G24", "G25", "G26", "G37", "G42", "G43", "G46");
	optiontext = new Array();
	
	for (var i = 0; i < 8; i++)
	{
		var option = document.createElement("option");
		optiontext = document.createTextNode(inhalt[i]);
		option.appendChild(optiontext);
		select.appendChild(option);
		var werte = document.createAttribute("value");
		werte.nodeValue = inhalt[i];
		option.setAttributeNode(werte);
	}
	
	var ereignis = document.createAttribute("onchange");
	ereignis.nodeValue = "grundsatz_add()";
	select.setAttributeNode(ereignis);
	var name = document.createAttribute("name");
	name.nodeValue = "grundsatz2";
	select.setAttributeNode(name);
	
	TD.appendChild(select);
	zeile.appendChild(TD);
}

Ge0rgy · 28.07.2010

hmm...irgendwie bin ich mir unsicher ob die geschichte mit den options so überhaupt funktioniert...
also ob man options einfach via appendchild an ein select adden kann...
Normalerweise haben selscts doch eine "options" - Collection... und man müsste options auch einfacher erzeugen können als mit createchild... selfhtml scheint grade down zu sein Oo...
kannst ja mal new Option(text,value) versuchen oder ähnliches.
aber auf jeden fall würde ich beim select die options-collection nehmen als einfach appendchild... irgendwie hab ich da bauchschmerzen ob er die optionen auf diese art zwar schon als "kinder" des select betrachtet, aber nicht zwangsläufig als optionen...
Ein select ohne options macht aber auch keinen sinn zu POSTen...und wir hätten dein problem

Hast du es mal tetweise versucht nicht eine selectbox mit optionen programmatisch zu adden sondern z.b. ein hiddenfeld und dann zu schauen ob das sauber gepostet wird?

Edit:
Habs grade mal mit nem Hiddenfeld getestet... das geht definitiv, in Asp.Net sieht das so aus:

Code:

<%@ Page Language="C#" Inherits="DynHTMLTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head runat="server">
	<title>Default</title>
	<script type="text/javascript">
		function addElements() {
			var x = document.createElement("input");
			x.type = "hidden";
			x.name = "TESTElem1";
			x.value ="0815";
			var frm = document.getElementById("form1");
			if(frm) {
				frm.appendChild(x);
				frm.submit();
			}
		}
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="outputDiv" runat="server"></div><a href="javascript:addElements()">klick mich</a>
		<asp:Button id="button1" runat="server" Text="Click me!" OnClick="button1Clicked" />
	</form>
</body>

Und serverseitig:

Code:

using System;
using System.Web;
using System.Web.UI;

namespace DynHTMLTest
{


	public partial class Default : System.Web.UI.Page
	{
		public void Page_Load(object sender, EventArgs args) {
			
			if(IsPostBack) {
				string x = string.Empty;
				foreach (string y in Request.Form.AllKeys) {
					if(y.StartsWith("TEST")) {
						x += y + ":" + Request[y] + "#";	
					}
					
				}
				outputDiv.InnerText = x;
			}
		}
	}
}

Das ergebnis ist, dass man nach klicken auf den Link Den String "TESTElem1:0815#" im div lesen kann, er wurde also beim Post übermittelt und ich habe ihn aus dem request ausgelesen.
D.h. das <input> - element (hidden) wurde gepostet obwohl es dynamisch erstellt wurde. Prinzipiell geht das also, wie mein quick & dirty- Beispiel zeigt... wenn ich morgen mal dazu komme teste ich das noch mit deinem Js-Code gegen... Heute habe ich keine Zeit mehr...
Gruß,
Ge0rgy

Maxefix · 28.07.2010

Also funktionieren muss das prinzipiell! Hatte mal nen Fall wo ich Teile eines Formulars per AJAX nachgeladen habe. Das hat einwandfrei funktioniert. Habe dafür jQuery verwendet. Denke das verwendet intern auch nur ein innerHTML.

Das hilft dir jetzt zwar nicht direkt weiter, aber immerhin weißt jetzt das es gehen muss.

Gruß,
Max

Ge0rgy · 29.07.2010

Da Selfhteml wieder on ist, hier ein kleiner Auszug:
Weg 1: http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente

<html><head><title>Test</title>
<script type="text/javascript">
function Hinzufuegen () {
NeuerEintrag = new Option(document.Testform.neu.value, document.Testform.neu.value, false, true);
document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
document.Testform.neu.value = "";
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Ein Eintrag</option>
</select>
<br>
<input type="text" name="neu">
<input type="button" value="Hinzu" onclick="Hinzufuegen()">
</form>
</body></html>

oder weg 2:http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#select

<html><head><title>Test</title>
<script type="text/javascript">
var Wert = 1;
function hinzu () {
var Auswahlliste = document.getElementsByName("Auswahl")[0];
var Eintrag = document.createElement("option");
Eintrag.text = document.getElementsByName("Eingabe")[0].value;
Eintrag.value = Wert;
var FolgendeOption = null;
if (document.all)
FolgendeOption = Auswahlliste.length;
Auswahlliste.add(Eintrag, FolgendeOption);
Wert += 1;
}
</script>
</head><body>
<form name="Formular" action="">
<select name="Auswahl" size="10">
<option value="0">Liste</option>
</select><br>
Eintrag: <input type="text" name="Eingabe" size="30">
<input type="button" value="hinzufügen" onclick="hinzu()">
</form>
</body></html>

Das select-element als solches besitzt also eine "add" - methode.

[HTML & Javascript] Dynamisch hinzugefügtes Element nicht im POST verfügbar?

diesermarco

Commodore Special

Ge0rgy

Grand Admiral Special

diesermarco

Commodore Special

Ge0rgy

Grand Admiral Special

diesermarco

Commodore Special

OBrian

Moderation MBDB, ,

Ge0rgy

Grand Admiral Special

BoMbY

Grand Admiral Special

diesermarco

Commodore Special

Ge0rgy

Grand Admiral Special

Maxefix

Grand Admiral Special

Ge0rgy

Grand Admiral Special

Ähnliche Themen