Javascript bei Button-Klick

mOhi · 1. August 2006

Ich komme einfach nicht weiter und hoffe hier finde ich Hilfe.
Ich habe ein Button und ein Textfeld. Wenn ich auf diesen Button klicke, möchte ich das 2 Eingabefelder aufgehen. Feld1: Anzahl der Spalten, Feld2: Anzahl der Zeilen. Je nachdem wieviele Spalten und Zeilen der Nutzer haben möchte, soll der Code im Textfeld eingefügt werden.
Mein aktueller Standpunkt:

Script im Header:

Code:

<SCRIPT>
function tablecreate(Spalten,Zeilen) 
{ 
var tablecontent, i1, i2; 
tablecontent=\"<table>\"; 
for(i1=1;i1<=Zeilen;i1++) { 
  tablecontent+=\"\n<tr>\"; 
   for(i2=1;i2<=Spalten;i2++) { 
     tablecontent+=\"\n<td><td>\"; 
   } 
   tablecontent+=\"\n</tr>\"; 
} 
tablecontent+=\"\n</table>\"; 
document.getElementById(\"inhalt\").innerText=tablecontent;
} 
</SCRIPT>

Der Button:

Code:

<button name=button type=button value=hier onclick=\"tablecreate(prompt('Anzahl der Spalten?','0'),prompt('Anzahl der Zeilen?','0'))\"><img src=tabelle.gif alt='Tabelle einfügen'></button>&nbsp;

Und das Textfeld:

Code:

<textarea type=text id=textfeld wrap=soft name=inhalt rows=25 cols=90%
ONSELECT=\"storeCaret(this);\"
ONCLICK=\"storeCaret(this);\"
ONKEYUP=\"storeCaret(this);\"
>$daten</textarea><br>

Die Form hat den Namen "gbform", wenn das wichtig sein sollte.
Es kommen zwar die 2 Eingabefelder, aber in der textarea wird nichts eingefügt.
Aus dem Code

Code:

document.getElementById(\"inhalt\").innerText=tablecontent;

habe ich auch schon

Code:

document.getElementById(\"inhalt\").innerHTML=tablecontent;

gemacht, jedoch vergebens. Hoffe es kann mir jemand weiterhelfen.

Vielen Dank und MfG

mOhi

tobee · 1. August 2006

Aber in die Variable tablecontent schreibst er was rein?
Kannst ja mal mit alert ausgeben.

Javascript:

<SCRIPT>
function tablecreate(Spalten,Zeilen) 
{ 
var tablecontent, i1, i2; 
tablecontent=\"<table>\"; 
for(i1=1;i1<=Zeilen;i1++) { 
  tablecontent+=\"\n<tr>\"; 
   for(i2=1;i2<=Spalten;i2++) { 
     tablecontent+=\"\n<td><td>\"; 
   } 
   tablecontent+=\"\n</tr>\"; 
} 
tablecontent+=\"\n</table>\"; 
alert(tablecontent);
document.getElementById(\"inhalt\").innerText=tablecontent;
} 
</SCRIPT>

Sven Mintel · 1. August 2006

in welchem Browser probierst du das?
innerText kennt nur der IE.

da inhalt ein Formularfeld ist, solltest du stattdessen sein value-Attribut ändern.

Code:

document.getElementById(\"inhalt\").value=tablecontent;

mOhi · 1. August 2006

Ich benutze gerade den IE, kennt der IE denn beide oder nur innerText?

Habe das eben versucht mit alert auszugeben. Da kommt aber nichts, so als würde der erst garnicht in die function reingehen?!

Nachtrag: Mit .value fügt der leider auch nichts ein, oder muss ich vielleicht noch auf die Form eingehen? gbform.inhalt o.ä.?

Sven Mintel · 1. August 2006

der IE kennt beides.

Poste bitte mal den HTML-Quelltext(Browser->Quelltext anzeigen)...der dürfte eher zur Lösung führen als PHP-Schnipsel

mOhi · 2. August 2006

Ist zwar alles etwas durcheinander, aber vielleicht hilft der Code ja:

Code:

<head><SCRIPT>
     function storeCaret (textEl) {
       if (textEl.createTextRange)
         textEl.caretPos = document.selection.createRange().duplicate();
     }
     function insertAtCaret (textEl, text) {
       if (textEl.createTextRange && textEl.caretPos) {
         var caretPos = textEl.caretPos;
         caretPos.text =
           caretPos.text.charAt(caretPos.text.length - 1) == " " ?
             text + " " : text;
       }
       else
         textEl.value  = text;
     }
     </SCRIPT>

<SCRIPT>
function tablecreate(Spalten,Zeilen) 
{ 
var tablecontent, i1, i2; 
tablecontent="<table>"; 
for(i1=1;i1<=Zeilen;i1++) { 
  tablecontent+="
<tr>"; 
   for(i2=1;i2<=Spalten;i2++) { 
     tablecontent+="
<td><td>"; 
   } 
   tablecontent+="
</tr>"; 
} 
tablecontent+="
</table>"; 
document.getElementById("inhalt").value=tablecontent;
alert("Sie befinden sich auf dem Host");
} 
</SCRIPT>
</head><body bgcolor=#cccccc onLoad="document.gbform.inhalt.focus();"><b><u><font size=3><center>Änderung folgender Seite: Gesetze </u></b></font><br><br><a href=admin.php?sid=feadval1n75qldost2qojjtl37>zurück</a><br><br></center> <center>
<br>
<form method=post name=gbform action=?abgesendet=ja&select=gesetze&sid=feadval1n75qldost2qojjtl37><div align=center><table border=1 bordercolor=darkblue bgcolor=#bbbbbb width=65%><th>Dateimenü</th><tr><td>Anstelle der Daten im Textfeld unten eine Datei hochladen (Die alten Daten bleiben erhalten)&nbsp;
<button name=button type=button value=hier onClick=self.location.href='adddata.php?select=gesetze&sid=feadval1n75qldost2qojjtl37'><img src=hochladen.gif></button><br>
Alte, hochgeladene, Datei wieder löschen damit der Text aus dem Textfeld unten wieder zu sehen ist &nbsp;
<button name=button type=button value=hier onClick=self.location.href='deldata.php?select=gesetze&sid=feadval1n75qldost2qojjtl37'><img src=loeschen.gif></button><br>
Zusätzlich zur hochgeladenen Datei noch einen Text <b>oben</b> einfügen &nbsp;
<button name=button type=button value=hier onClick=self.location.href='?select=gesetze&text=oben&loeschen=nein&sid=feadval1n75qldost2qojjtl37'><img src=text.jpg></button>&nbsp;&nbsp;&nbsp;&nbsp;oder wieder löschen&nbsp;<button name=button type=button value=hier onClick=self.location.href='?select=gesetze&text=oben&loeschen=ja&sid=feadval1n75qldost2qojjtl37'><img src=deltext.gif></button>&nbsp;(Derzeit ohne Funktion)<br>
Zusätzlich zur hochgeladenen Datei noch einen Text <b>unten</b> einfügen &nbsp;
<button name=button type=button value=hier onClick=self.location.href='?select=gesetze&text=unten&loeschen=nein&sid=feadval1n75qldost2qojjtl37'><img src=text.jpg></button>&nbsp;&nbsp;&nbsp;&nbsp;oder wieder löschen&nbsp;<button name=button type=button value=hier onClick=self.location.href='?select=gesetze&text=unten&loeschen=ja&sid=feadval1n75qldost2qojjtl37'><img src=deltext.gif></button>&nbsp;(Derzeit ohne Funktion)<br>
</td></tr></table>
<br></div><br><br><table border=1 bgcolor=#bbbbbb width=65%><table border=1 bgcolor=#bbbbbb bordercolor=darkblue><tr><th><u>Text formatieren:</u></th><th>Bilder / PDF-Dateien</th><tr><td><center>(Button-Effekt wird dort eingefügt, wo sich der Cursor befindet, Ausnahme:)<br>Bei "Links / URL" und bei "Bildern" wird der Text am Ende angehängt.</center><br>
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'</td></tr><tr><td colspan=2 bgcolor=#bbbbbb><b><font size=2 face=Verdana>ÜBERSCHRIFT</b></font></td></tr><tr><td align=left>TEXT');"><img src=ueberschrift.gif alt='Neue Überschrift mit neuem Text einfügen'></button>&nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<br>');"><img src=absatz.gif alt='Absatz einfügen'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<b>TEXT</b>');"><img src=fett.gif alt='Text fett'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<i>TEXT</i>');"><img src=kursiv.gif alt='Text kursiv'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<u>TEXT</u>');"><img src=unterstrichen.gif alt='Text unterstrichen'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<div align=center>TEXT</div>');"><img src=zentriert.jpg alt='Text zentriert'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<div align=left>TEXT</div>');"><img src=links.gif alt='Text links ausgerichtet'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<div align=right>TEXT</div>');"><img src=rechts.jpg alt='Text rechts ausgerichtet'></button> &nbsp;
<button name=button type=button value=hier ONCLICK="insertAtCaret(this.form.inhalt,'<li>TEXT</li>');"><img src=aufzaehlung.gif alt='Aufzählung einfügen'></button> &nbsp;
<button name=button type=button value=hier onclick="var adress=prompt('Adresse?','http://');var linkname=prompt('Linkname?','Linkname');gbform.inhalt.value+='<a href='+adress+' target=_blank>'+linkname+'</a>'"><img src=url.jpg alt='URL / Link einfügen'></button>&nbsp;
<button name=button type=button value=hier onclick="tablecreate(prompt('Anzahl der Spalten?','0'),prompt('Anzahl der Zeilen?','0'))"><img src=tabelle.gif alt='Tabelle einfügen'></button>&nbsp;
</td><td>
<font color=red><b><u><center>-->ACHTUNG<--</center></u></b></font><br>
<li>Vor dem Bilder-Upload unbedingt vorher den Text abspeichern,<br> der geht sonst verloren!<li>Die Dateien, welche hochgeladen werden, dürfen keine Leerzeichen im Namen haben.
</td></tr>


<tr><td>
<u>Derzeitiger Seiteninhalt für <b>'Gesetze'</b> : </u><br>
<textarea type=text id=textfeld wrap=soft name=inhalt rows=25 cols=90%
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="storeCaret(this);"
></textarea><br>
<br><input type=submit name=Button value=Absenden>&nbsp;&nbsp;&nbsp;<INPUT name=Zur&uuml;cksetzen type=reset></form>
</center> </td><td>
Upload:
<form action=?bildgesendet=ja&select=gesetze&sid=feadval1n75qldost2qojjtl37 method="post" enctype="multipart/form-data" name="upload">
<input type="file" name="file" value="Durchsuchen">  &nbsp;
<button type="submit" name="submit" value="Upload" Abschicken"><img src=upload.gif alt='Bild hochladen'></button></form>
<br>
Ein hochgeladenes Bild / PDF löschen um Speicherplatz zu sparen &nbsp;
<button name=button type=button value=hier onClick=self.location.href='bilddel.php?select=gesetze&sid=feadval1n75qldost2qojjtl37'><img src=bilddel.jpg alt='Bild löschen'></button><br>

</td></tr></table>



</table><br><center><a href=admin.php?sid=feadval1n75qldost2qojjtl37>zurück</a><br> </center>

esenay · 3. August 2006

Hi,
mir fiel grad auf, dass dein td Tag nicht geschlossen wird. Glaub zwar nicht, dass das die Ursache ist aber probiers dennoch mal.

Code:

<SCRIPT>
function tablecreate(Spalten,Zeilen) 
{ 
var tablecontent, i1, i2; 
tablecontent=\"<table>\"; 
for(i1=1;i1<=Zeilen;i1++) { 
  tablecontent+=\"\n<tr>\"; 
   for(i2=1;i2<=Spalten;i2++) { 
     tablecontent+=\"\n<td><td>\"; //<- genau hier
   } 
   tablecontent+=\"\n</tr>\"; 
} 
tablecontent+=\"\n</table>\"; 
document.getElementById(\"inhalt\").innerText=tablecontent;
} 
</SCRIPT>

achja und noch was: deine Textarea hat die id= textfeld und nicht Inhalt-> ergo oben in die Textarea reinschreiben mit document.getElementById(\"textfeld\").value=tablecontent;

Security · 3. August 2006

Nur um mal auf den Anfangscode zurück zu kommen, was sollen die ganzen Backslashs?

Sven Mintel · 3. August 2006

Die Backslashes werden Bestandteil des PHP-Codes sein.

Im Browser dürfte dann folgendes stehen(hat er ja auch gepostet):

Code:

<SCRIPT>
function tablecreate(Spalten,Zeilen) 
{ 
var tablecontent, i1, i2; 
tablecontent="<table>"; 
for(i1=1;i1<=Zeilen;i1++) { 
  tablecontent+="
<tr>"; 
   for(i2=1;i2<=Spalten;i2++) { 
     tablecontent+="
<td><td>"; 
   } 
   tablecontent+="
</tr>"; 
} 
tablecontent+="
</table>"; 
document.getElementById("inhalt").value=tablecontent;
alert("Sie befinden sich auf dem Host");
} 
</SCRIPT>

und da ist der Knackpunkt, das funktioniert so nicht.
Die Zeilenumbrüche, die da ausgegeben werden, sind in JS nicht erlaubt.
mache aus \n mal überall \\n

Wozu das das Ganze überhaupt mit PHP ausgibst, ist mir allerdings ein Rätsel, ich sehe dafür zumindest keinen schlüssigen Grund.

Javascript bei Button-Klick

mOhi

Grünschnabel

tobee

Erfahrenes Mitglied

Sven Mintel

Mitglied

mOhi

Grünschnabel

Sven Mintel

Mitglied

mOhi

Grünschnabel

esenay

Mitglied

Security

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge