Archivlink: javarea.de Forum > JavaScript > Inhalt eines Div Containers
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Inhalt eines Div Containers

Pages: [1]
geschrieben von Michael am 16.07.2005 - 15:17
Hi Leute!

Ist es möglich, den Inhalt eines Div Containers auszulesen bzw. zwischenzuspeichern!?
Mein Problem ist folgendes:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 

<script language="JavaScript">
<!--
function create_input(){
  if(document.getElementById('kurs_inhalt').value != ""){
  document.getElementById('course_content').innerHTML = '<input type="Text" name="TEST" value="" size="" onblur="create_input()">';
  }
}
//-->
</script>

<input type="Text" name="kurs_inhalt" id="kurs_inhalt" value="" size="30" onBlur="create_input()">

Ich möchte, wenn ein Input Feld ausgefüllt worden ist, dass darunter eines neues leeres entsteht. Wenn ich das jetzt nun so wie oben angehe, wird der DIV immer wieder überschrieben. Sprich ich muss vor dem ändern des innerHTML den aktuellen Inhalt zwischenspeichern und danach mit ins innerHTML eingeben. Hoffe ich haben mich einigermaßen verständlich ausgedrückt .-) und vielleicht kann mir ja jemand helfen.

Gruß

geschrieben von weisnix am 16.07.2005 - 16:08
Hallo,

so in etwa:?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

<script language="JavaScript">
<!--
document.Testform.kurs_inhalt.focus();
function create_input(){
  if(document.getElementById('kurs_inhalt').value != ""){
  document.getElementById('mein_absatz').innerHTML = '<input type="Text" name="TEST" value="" size="30">';
  document.Testform.TEST.value = document.Testform.kurs_inhalt.value;
  }
}
//-->
</script>

<form name="Testform" action="">
<input type="Text" name="kurs_inhalt" id="kurs_inhalt" value="" size="30" onBlur="create_input()">
<p id="mein_absatz">#</p>
</form>


Gruß

geschrieben von Michael am 16.07.2005 - 17:56
Der Ansatz ist gut, danke - aber die Funktion ist die gleiche wie bei meinem Ansatz!?
aber das Ganze soll unendlich funktionieren...

sprich wenn ich das neu erzeugte Input Feld fülle, soll darunter wieder ein neues leeres erscheinen.

geschrieben von weisnix am 16.07.2005 - 18:33
dann so:?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 

<html><head></head>
<body>
<form name="Testform" action="">
<div id="kurs_inhalt" style="border:1px black solid; padding:10px">
<input type="Text" name="kurs_inhalt" id="kurs_inhalt" value="" size="30" onBlur="create_input()">
</div>
</form>
<script language="JavaScript">
<!--
function create_input(){
  if(document.getElementById('kurs_inhalt').value != ""){

var absatz = document.createElement("p");
var element = document.createElement("<input type='Text' name='TEST' value='' size='30' onBlur='create_input()'>");
absatz.appendChild(element);
var Ausgabebereich = document.getElementById("kurs_inhalt");
Ausgabebereich.appendChild(absatz);
  }
}
//-->
</script>
</body></html>

geschrieben von Michael am 16.07.2005 - 19:00
1A - dickes Lob und Danke dir

ein Manko noch - wenn das letzte Feld leer is, wird trotzdem ein neues angelegt
vielleicht geht auch - dass wenn ein Feld, dass keinen Inhalt hat, wieder verschwindet

geschrieben von weisnix am 16.07.2005 - 21:22
komm da irgend wie nicht da hinter. Vielleicht hat ja noch einer ne Idee. Wo man ansetzen kann.

Ich habe das jetzt mal so, wenn ein Feld kein Inhalt hat wird auch kein Neues erzeugt.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 

<html><head><title>Test</title>
</head><body>
<body>
<form name="Testform" action="">
<div id="kurs_inhalt" style="border:1px black solid; padding:10px"></div>
</form>
<script type="text/javascript">
function Test(){

var absatz = document.createElement("p");

var textfeld = document.createElement("input");



document.getElementById("kurs_inhalt").appendChild(absatz);
document.getElementById("kurs_inhalt").appendChild(textfeld);

var a = document.createAttribute("type");
a.nodeValue = "Text";

var b = document.createAttribute("name");
b.nodeValue = "Testname";

var c = document.createAttribute("value");
c.nodeValue = "Test";

var d = document.createAttribute("size");
d.nodeValue = 20;

var e = document.createAttribute("onBlur");
e.nodeValue = "Test()";

document.getElementsByTagName("input").setAttributeNode(a);
document.getElementsByTagName("input").setAttributeNode(b);
document.getElementsByTagName("input").setAttributeNode(c);
document.getElementsByTagName("input").setAttributeNode(d);
document.getElementsByTagName("input").setAttributeNode(e);
}
</script>
<a href="javascript:Test()">Test</a>
</body></html>


Edit:
So wird wenigstens in FF ein input angezeigt, aber ...

wie kann auf das „input“ zugegriffen werden?

Das alte Beispiel ging halt nur im IE.

geschrieben von Michael am 17.07.2005 - 12:22
So, habe es jetzt zu meiner Zufriedenheit hinbekommen - das Ganze läuft wie weisnix gepostet hat, nicht automatisch, sondern über einen klick - das ist aber voll IO für mich.
Verarbeiten kann man die Variablen nun ganz bequem, wie das untere Beispiel zeigt:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 

<body onLoad="Test()">

<form name="Testform" action="<?= $_SERVER['PHP_SELF']; ?>" method="POST">

<div id="kurs_inhalt"></div>

<input type="Submit" name="submit" value="senden">

</form>

<script type="text/javascript">
var i = 0;

function Test(){

  i++;

  var absatz   = document.createElement("p");
  var textfeld = document.createElement("<input type='Text' name='__%content%__" +i+ "' value='' size=''>");

  document.getElementById('kurs_inhalt').appendChild(absatz);
  document.getElementById('kurs_inhalt').appendChild(textfeld);
}
</script>

<a href="javascript:Test()">Test</a>

<?php
$inhalt = '';

if(isset($_POST['submit'])) {
  foreach($_POST AS $key => $var) {
    if((strstr($key, "__%content%__")) AND (!empty($var))) $inhalt .= $var;
  }
}

echo htmlspecialchars($inhalt);
?>


Danke dir weisnix - hast mir echt geholfen.

Ps.: das ganze läuft nicht im FF - aber was solls ;-O vielleicht fällt jemanden da noch was ein

geschrieben von weisnix am 17.07.2005 - 13:46
ich habe da noch eine Variante, das wird im FF wenigstens das input aufgebaut, halt ohne Inhalt. Der verschwindet einfach.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 

<html><head><title>Test</title>
</head><body onload="setz()">
<form name="Testform" action="">
<div id="kurs_inhalt" style="border:1px black solid; padding:10px"></div>
</form>

<script type="text/javascript">

function setz () {
document.getElementById('kurs_inhalt').innerHTML = '<input type="Text" name="Eingabe" value="" size="30" onBlur="CheckInhalt(this.value)">';
}

function CheckInhalt (Feld) {

  if (Feld == "") {

    alert("Feld muss einen Inhalt haben!");
    document.Testform.Eingabe.focus();
    return false;
  }
  else
  document.getElementById('kurs_inhalt').innerHTML += '<p><input type="Text" id="Eingabe" name="Eingabe" value="" size="30" onBlur="CheckInhalt(this.value);"></p>';
}

</script>
</body></html>


Vielleicht nützt es ja was.

geschrieben von okley am 17.07.2005 - 15:13
vielleicht hilft dir das auch weiter: http://forum.weborum.com/index.php?showtopic=1337
oder:
http://de.selfhtml.org/navigation/s....ateElement

so gehts auch im FF
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 

<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;

function Test(){
  i++;
  var absatz   = document.createElement("p");
  var textfeld = document.createElement("input");
  	  textfeld.size = 30; 
	  textfeld.value = ''; 
	  textfeld.name = "__%content%__" + i;

  document.getElementById('kurs_inhalt').appendChild(absatz);
  document.getElementById('kurs_inhalt').appendChild(textfeld);
  alert(textfeld.name);
}
</script>
</head><body onLoad="Test()">

<form name="Testform" action="<?= $_SERVER['PHP_SELF']; ?>" method="POST">

<div id="kurs_inhalt">&nbsp;</div>

<input type="Submit" name="submit" value="senden">

</form>



<a href="javascript:Test();">Test</a>

<?php
$inhalt = '';

if(isset($_POST['submit'])) {
  foreach($_POST AS $key => $var) {
    if((strstr($key, "__%content%__")) AND (!empty($var))) $inhalt .= " ".$var;
  }
}

echo "<br/>".htmlspecialchars($inhalt);
?>
</body></html>

geschrieben von Michael am 17.07.2005 - 15:49
Danke dir Okley!


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.