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

dynamisches Formular

S

sarah80

New member
Hallo liebe Forenmitglieder,

ich habe da ein kleines Problem und komme einfach nicht weiter. Bin leider ein absoluter Javascript Anfänger!!!
Ich würde gerne ein dynamische Formular erstellen bei dem Felder hinzugefügt werden können (das funktioniert) aber auch wieder entfernt werden können (funktioniert bedingt, es wird alles gelöscht :-()... Das Problem liegt wohl in dieser "child" Funktion, weiß aber leider nicht mehr weiter...
Hier mal mein Quellcode:

HTML: 
<head>
<title>Test</title>
</head>
<script type="text/JavaScript">
var feld = 1;
function add() 
	{
	if (feld <= 4)
		{
	var inhalt = document.form.xyz.value;
	document.getElementById('dynamic_input').innerHTML += feld + " <input type='text' size='75' name='massage_" + feld + "' value='" + inhalt + "'><br>";
	feld++;
		}
	}
function rem()
	{
	if (feld > 1)
		{
	var lastObj = document.getElementById('dynamic_input');
	lastObj.parentNode.removeChild(lastObj);
	feld--;
		}
	}
</script>
<form name="form" method="POST">
<div id="dynamic_input">
Auswahl:   <select name="dropdown" id="xyz"><option value="" selected>- bitte auswaehlen -</option><optgroup label="zahlen"><option value="eins">eins</option><option value="zwei">zwei</option><option value="drei">drei</option></optgroup></select><br><br>
<button type='button' onClick="add();">Add</button>
<button type='button' onClick="rem();">Remove</button>
<br><br>
</div>
</form>
</body>

Es wäre super wenn Ihr mir weiterhelfen könntet! Vielen Dank schonmal für Eure Mühe...

LG S.
 
@sagem1: der Ansatz ist ja ganz nett, ABER dein HTML hat Probleme: das <label> wird nicht geschlossen und href="#" ist sinnfrei und unnötig. Auch heißt es onclick.
Zusätzlich wäre es auch noch eleganter, wenn man der removeFormElement keine ID, sondern direkt das zu entfernende Objekt übergeben würde (über this.parentNode). Damit könnte man sich komplett alle IDs sparen und das komische id Gerechne und Zwischenspeichern entfiele.

Persistente Variablen für solche Zwecke macht man auch nicht über HTML-Nodes, sondern entweder über einen zusätzlichen Scope oder Attribute am Funktionsobjekt. (Ich würde dazu tendieren, dass die Speicherung von Variablen in <input>-Nodes noch schlimmer als globale Variablen ist...)

PS: hat irgendwer von euch wirklich schon einmal einen "reset"-Button in einem Formular wirklich benutzt?
 
Hallo sagem1,
vielen Dank für Deine Hilfe. Von der funktionsweise wäre das OK, allerdings müsste ich da wieder alles komplett anpassen. Des Weiteren muss ich zusätzlich diese jquery-Dateien einbinden. Ich benötige eigentlich nur eine Anpassung meines Scriptes, wenn möglich...
@kkapsner: Kannst du mir eventuell weiterhelfen bei meiner "Rem" Funktion!?

LG S.
 
Auch wenn ich nicht gefragt wurde, vielleicht hilft dir das weiter:

HTML: 
<head>
<title>Test</title>
</head>
<script type="text/JavaScript">
var feld = 1;
function add() 
	{
	if (feld <= 4)
		{
	var inhalt = document.form.xyz.value;
	document.getElementById('dynamic_input').innerHTML += "<div id='message_" + feld + "'>" + feld + " <input type='text' size='75' value='" + inhalt + "'></div><br>";
	feld++;
		}
	}
function rem()
	{
		
	if (feld > 1)
		{
	var intfeldnr = feld-1;
	var lastObj = document.getElementById("message_" + intfeldnr);
	lastObj.parentNode.removeChild(lastObj);
	feld--;
		}
	}
</script>
<form name="form" method="POST">
<div id="dynamic_input">
Auswahl:   <select name="dropdown" id="xyz"><option value="" selected>- bitte auswaehlen -</option><optgroup label="zahlen"><option value="eins">eins</option><option value="zwei">zwei</option><option value="drei">drei</option></optgroup></select><br><br>
<button type='button' onClick="add();">Add</button>
<button type='button' onClick="rem();">Remove</button>
<br><br>
</div>
</form>
</body>
 
Hallo sagem1,
sorry wollte Dich nicht ausschließen. Vielen Dank für Deine Hilfe.
So hab ich mir das vorgestellt. Es gibt nur einen kleinen Schönheitsfehler...
Sobald ein Feld gelöscht wird wird beim erneuten erzeugen nicht der platz eingenommen sondern springt eins weiter....
LG S.
 
Naja... jetzt wird aber bei jedem "add" der Inhalt der schon vorhandenen Felder wieder zurückgesetzt, wenn der Benutzer den geändert hat... und da ist immer noch eine unnötige globale Variable...
Code: 
<!DOCTYPE html>

<html>
<head>
	<title>Test</title>
	<script type="text/javascript">
	var felderManager = {
		divs: [],
		add: function(){
			if (this.divs.length < 4){
				var newDiv = document.createElement("div");
				this.divs.push(newDiv);
				newDiv.innerHTML = this.divs.length + ": <input size='75' value='" + document.form.dropdown.value + "'>";
				document.form.appendChild(newDiv);
			}
		},
		remove: function(){
			if (this.divs.length){
				document.form.removeChild(this.divs.pop());
			}
		}
	};
	</script>
</head>
<body>
	<form name="form" method="POST">
		Auswahl:
		<select name="dropdown">
			<option value="" selected>- bitte auswaehlen -</option>
			<optgroup label="zahlen">
				<option value="eins">eins</option>
				<option value="zwei">zwei</option>
				<option value="drei">drei</option>
			</optgroup>
		</select>
		<br>
		<button type='button' onclick="felderManager.add();">Add</button>
		<button type='button' onclick="felderManager.remove();">Remove</button>
	</form>
</body>
</html>

PS: Ihr solltet euch bemühen, valides HTML zu schreiben. Macht das Programmieren in JS viel einfacher.
 
Hallo nochmal,
ich hoffe Ihr hattet ein sonniges WE.
Es gibt leider noch ein Problem mit dem Script....
Wenn ich die es verschicke stehen in der Mail keine Werte außer der Name des Select-Feld.
Das ist etwas ungünstig ;-)
Woran kann das liegen und wie kann ich das wieder grade biegen???
Vielen Dank für Eure Mühe!!!
LG S.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben