formular mit java-skript erweitern (inputs hinzufügen)

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/formular_mit_java-skript_erweitern_inputs_hinzufue_143709/page_1 - zur Vollversion wechseln!

kleinerChemiker schrieb am 07.06.2005 um 10:56

ich würde ein js suchen, das mir in einem formula input's hinzufügt, wenn man auf nen link/button/wwi klickt. ambesten gleich mit tr/td, aber das dürfte dann ja leicht zum ändern sein.

google hat bis jetzt nix brauchbares ausgespuckt.

tia

MIK

mat schrieb am 07.06.2005 um 13:25

ist sicher nicht das was du hören willst..

warum versuchst dus nicht mal und konfrontierst uns dann mit einer spezifischeren frage?

kleinerChemiker schrieb am 07.06.2005 um 17:17

gedanken dazu hab ich mir eh gemacht, nur leider kenn ich mich mit js kaum aus. mittlerweile, nachdem ich in gedanken die seite zig mal umgearbeitet hab, bin ich sogar auf ne idee gekommen, die aber leider nicht funzt.

Code: PHP

<html>
<head>
<titel>huh</titel>
<script type="text/javascript">
function addinput() {
document.getElementById("addinput").writeln("<input name=\"zuname\" type=\"text\" size=\"30\" maxlength=\"40\"><br>");
}
</script>
</head>
<body>
<form action="input_text.htm">
<p>Vorname:<br>
<input name="vorname" type="text" size="30" maxlength="30">
</p>
<p>Zuname:<br>
<div id="addinput"><input name="zuname" type="text" size="30" maxlength="40"><br></div>
</p>
<a href="" onclick="addinput()">klick mich</a>
</form>
</body>
</html>

tia

MIK

that schrieb am 07.06.2005 um 19:46

Google: javascript add elements
zweiter Link

Rektal schrieb am 07.06.2005 um 21:30

Code: PHP

<div id="inputlist"></div><div><input type="button" value="Add input" onclick="addInput();"></div>

Code:

function addInput() {
  var newElement = document.createElement('div');
  newElement.innerHTML = '<input name="value[]" type="text">';
  document.getElementById('inputlist').appendChild(newElement);
}

Es gibt mehrere Moeglichkeiten, innerHTML ist a) die einfachste und b) die Kompatibelst und c) performanteste art aber d) in keinem DOM groesser 0. Aber seriously, jeder Browser der DOM soweit kann, kann auch innerHTML.

Kann mir nicht vorstellen dass writeln gut funktioniert, da es imho auf anderer Ebene, der document-Ebene, funktioniert, aber nicht auf Element-Ebene.

kleinerChemiker schrieb am 07.06.2005 um 22:56

danke
beides sehr hilfreich.
tja, mal wieder gesehen, google weiß alles, nur weiß ich nicht, wie ich google dazu bring, es mir zu sagen

MIK

watchout schrieb am 08.06.2005 um 10:56

Zitat von Rektal
Es gibt mehrere Moeglichkeiten, innerHTML ist a) die einfachste und b) die Kompatibelst und c) performanteste art aber d) in keinem DOM groesser 0. Aber seriously, jeder Browser der DOM soweit kann, kann auch innerHTML.

Kann mir nicht vorstellen dass writeln gut funktioniert, da es imho auf anderer Ebene, der document-Ebene, funktioniert, aber nicht auf Element-Ebene.

wenn du schon createElement verwendest kannst auch gleich den input damit erzeugen, und dann wirst auch das schirche innerHTML los.

das ganze wär dann auf die art:

Code: PHP

<input type="button" onclick="addOne(this)" />

<script language="Javascript">
function addOne(e)
{
  // Elemente erstellen
  rahmen  = document.createElement('div');
  eingabe = document.createElement('input');
  // Attribute erstellen
  name    = document.createAttribute('name');
  wert    = document.createAttribute('value');
  type    = document.createAttribute('type');
  // Attributwerte festlegen
  name.nodeValue = 'deinname';
  wert.nodeValue = 'startwert';
  type.nodeValue = 'text';
  // Attribute zuweisen
  eingabe.setAttributeNode(name);
  eingabe.setAttributeNode(wert);
  // Elemente anfügen
  rahmen      .appendChild(eingabe);
  e.parentNode.appendChild(rahmen);
  // fertig
}
</script>

Natürlich braucht das wesentlich mehr Code, aber es ist wesentlich sauberer auf die Weise und... Zukunftssicherer

Ob das jetzt ne Mikrosekunde länger dauert is auch schon egal...

kleinerChemiker schrieb am 08.06.2005 um 11:17

wenn ich es richtig sehe, wird da aber der input direkt beim button erstellt, oder? außerdem habe ich auch dropdown's (select) mit ettlichen werten.

derzeit sieht die seite so aus. allerdings muß ich noch bischen was machen. einerseits smarty dazu bringen daß es die / im js maskiert und andrerseits will ich die 2 funktionen zu einer zusammenlegen.

Code: PHP

<html>
<head>
<title>Webseite hinzufügen</title>
<script type="text/javascript">
function addInputL() {
	var newElement = document.createElement('div');
	newElement.innerHTML = '<select name=menul[] size="1"><option label="test1" value="1">test1</option>
<option label="test2" value="2">test2</option>
<option label="test3" value="3">test3</option>
<option label="test4" value="4">test4</option>
<\/select><br \/>';
	document.getElementById('inputlistL').appendChild(newElement);
}
function addInputR() {
	var newElement = document.createElement('div');
	newElement.innerHTML = '<select name=menur[] size="1"><option label="test1" value="1">test1</option>
<option label="test2" value="2">test2</option>
<option label="test3" value="3">test3</option>
<option label="test4" value="4">test4</option>
<\/select><br \/>';
	document.getElementById('inputlistR').appendChild(newElement);
}
</script>
</head>
<body>
<h1>Webseite hinzufügen</h1>
<form action="addplayerweb.php" method="POST">
Kurzbeschreibung: <input name="beschreibung" type="text" maxlength="255" /><br />
Seitenquelltext:<br />
<textarea name="text" style="width:95%; height:90%"></textarea><br />
Menü rechts:<br />

<select name=menul[] size="1">
<option label="test1" value="1">test1</option>
<option label="test2" value="2">test2</option>
<option label="test3" value="3">test3</option>
<option label="test4" value="4">test4</option>

</select><br />
<div id="inputlistL"></div>
<input type="button" value="Linkes Menü hinzufügen" onclick="addInputL();"><br />
<div id="inputlistR"></div>
<input type="button" value="Rechtes Menü hinzufügen" onclick="addInputR();"><br />
<input type="submit" name="submit" value="Seite anlegen" />     <input type="reset" value="Zurücksetzen" />
</form>

</body>
</html>

watchout schrieb am 08.06.2005 um 12:01

Wär praktisch wenn du _einmal_ Code so posten würdest, dass er nicht den Bildschirm sprengt.

PS: wo die Ausgabe gemacht wird sollte eigentlich egal sein...

kleinerChemiker schrieb am 08.06.2005 um 12:56

sorry, soll nicht wieder vorkommen.

sieht jetzt so aus, funzt und ich versteh es halbwegs

Code: PHP

<script type="text/javascript">
function addInput(art) {
	var newElement = document.createElement('div');
	newElement.innerHTML = '<select name=menul[] size=\"1\"><option label=\"test1\" value=\"1\">test1<\/option>\n<option label=\"test2\" value=\"2\">test2<\/option>\n<option label=\"test3\" value=\"3\">test3<\/option>\n<option label=\"test4\" value=\"4\">test4<\/option>\n<\/select><br \/>';
	document.getElementById(art).appendChild(newElement);
}
</script>

und

Code: PHP

<div id="inputlistL"></div>
<input type="button" value="Linkes Menü hinzufügen" onclick="addInput('inputlistL');"><br />