Formularfeld erzeugen

[Heinz]

Hallo,

ich versuche gerade, ein Formulatfeld zur Laufzeit zu erzeugen. Ich (JS-Einsteiger) habe das schonmal geschafft, aber hier gibt es ein paar Haken, die ich nicht gelöst bekomme.

Es geht um eine JQuery Combobox, die folgenden Javascriptcode benötigt:

  
<script type='text/javascript'>  
<!--  
jQuery(function () {  
jQuery('#combo').combobox([  
'Eintrag 1',  
'Eintrag 2',  
'Eintrag 3',  
'Eintrag 4'  
]);  
});  
//-->  
</script>  

Das Inputfeld sieht so aus:

  
<INPUT id='combo' TYPE=TEXT Name='inhalt[]' class='f2' value=''>  

Daraufhin erscheint ein Inputfeld mit Dropdown als "Ausfüllhilfe", das o.g. Einträge 1-4 beinhaltet.

Ich würde gerne auf einen Klick hin ein, bzw. mehrere weitere dieser Inputfelder mit Dropdown erzeugen.
Bisher gelingt mir das Erzeugen weiterer Inputfelder, die aber NICHT diese Dropdownerweiterung beinhalten.

Ich versuche das wie folgt:

  
<script type="text/javascript">  
function clonen(){  
  var el = document.createElement("input"); //ein Input-Tag soll erstellt werden  
  el.name = "inhalt[]"; // Attribut name="inhalt[]" soll gesetzt werden  
  el.type = "text"; // Attribut type="text" soll gesetzt werden  
  el.id = "combo2"; // Attribut id="combo" soll gesetzt werden  
  el.className = "f2"; // Attribut id="combo" soll gesetzt werden  
  document.getElementById("container").appendChild(el); // setzt es in den DIV-Container  
  var br = document.createElement("br");  
  document.getElementById("container").appendChild(br);  
}  
</script>  

Dann rufe ich über den eventhandler onclick auf und es passiert folgendes:

• Inputelement wird erzeugt
• Es ist ein Text-Input
• Ob die ID zugewiesen wird, weiß ich ehrlich gesagt nicht.
• Die Klasse 'f2' wird dem Element zugewiesen.

2 Probleme habe ich:

1. Mir fehlt noch die Idee, wie ich den "combo2-Inhalt", also den Part "jQuery('#combo2').combobox([ usw." generieren kann. Oder noch besser eine Idee, wie ich auf den #combo-Inhalt mit dem generierten Formularfeld zugreifen kann. (Ich hoffe, Ihr wißt ungefähr, was ich damit meine???)

2. Selbst wenn ich in den Code statisch den "jQuery('#combo2').combobox([ usw." Teil eingefügt habe, greift das dynamisch erzeugte Element nicht darauf zu. Velleicht hat die ID-Zuweisung nicht funktioniert??

Wer kann und will mir dabei helfen?

Heinz

[ChrisB]

Hi,

• Inputelement wird erzeugt
• Es ist ein Text-Input
• Ob die ID zugewiesen wird, weiß ich ehrlich gesagt nicht.

Dann benutze Firebug o.ä., und find’s raus.

1. Mir fehlt noch die Idee, wie ich den "combo2-Inhalt", also den Part "jQuery('#combo2').combobox([ usw." generieren kann.

Du willst nichts „generieren“, sondern diese Methode _aufrufen_ nachdem dein Inputfeld erzeugt ist.

2. Selbst wenn ich in den Code statisch den "jQuery('#combo2').combobox([ usw." Teil eingefügt habe, greift das dynamisch erzeugte Element nicht darauf zu.

Nicht das Element muss auf die Methode zugreifen - sondern anders herum.
Aber jQuery('#combo2') findet kein Element, welches erst _später_ erzeugt wird.

MfG ChrisB

[Heinz]

Hi Chris,

Nicht das Element muss auf die Methode zugreifen - sondern anders herum.
Aber jQuery('#combo2') findet kein Element, welches erst _später_ erzeugt wird.

Ah, ok. Das ist schonmal eine große Hilfe.

Heißt aber auch, dass ich auch diesen Part "dynamisieren" muss.

Habe ich Dich denn korrekt verstanden, dass mein DOM quasi erstmal fertig geladen sein muss und im Anschluss daran diese Methode (nennt man den Part so?) auf das (neue) Element zugreifen muss?

Und habe ich es korrekt verstanden, dass ich dazu die Methode nicht komplett neu schreiben muss, sondern ich die (bereits vorhandene) combo-Methode nutzen kann?

Heinz

[Heinz]

Hi Chris, hi all,

ich habe es jetzt mit ein  bißchen HTML5 gelöst. Deine Hinweise haben mich (mal vom HTML5 Teil abgesehen, den man sicher auch mit Javascript hin bekommt) auf den richtigen Lösungsweg gebracht.

Wie hättet Ihr das gelöst, wenn nciht so?

  
<script type='text/javascript'>  
<!--  
jQuery(function () {  
jQuery('#combo').combobox([  
'Eintrag 1',  
'Eintrag 2',  
'Eintrag 3',  
'Eintrag 4'  
]);  
});  
//-->  
</script>  
  
<script type="text/javascript">  
function clonen(){  
  
var key = 'key_12345';  
var key_zaehler = 0;  
// Zähler hochsetzen je Durchlauf  
var zahl = window.localStorage.getItem(key_zaehler);  
zahl++;  
window.localStorage.setItem(key_zaehler, zahl);  
  
  
  var el = document.createElement("input"); //ein Input-Tag soll erstellt werden  
  el.name = "inhalt[]"; // Attribut name="inhalt[]" soll gesetzt werden  
  el.type = "text"; // Attribut type="text" soll gesetzt werden  
  el.id = 'combo_'+zahl; // Attribut id="combo" soll gesetzt werden  
  el.className = "f250"; // Attribut id="combo" soll gesetzt werden  
  document.getElementById("container").appendChild(el); // setzt es in den DIV-Container  
  var br = document.createElement("br");  
  document.getElementById("container").appendChild(br);  
  
<!--  
jQuery(function () {  
jQuery('#combo_'+zahl).combobox([  
'Eintrag 1',  
'Eintrag 2',  
'Eintrag 3',  
'Eintrag 4'  
]);  
});  
//-->  
  
  
}  
</script>  

Heinz

[Heinz]

Hi,

wie kann ich vor das zu generierende Formularfeld (siehe Code) einen Text vor das Formularfeld setzen, also z.B. "Name:"?

Heinz

<script type='text/javascript'>
<!--
jQuery(function () {
jQuery('#combo').combobox([
'Eintrag 1',
'Eintrag 2',
'Eintrag 3',
'Eintrag 4'
]);
});
//-->
</script>

<script type="text/javascript">
function clonen(){

var key = 'key_12345';
var key_zaehler = 0;
// Zähler hochsetzen je Durchlauf
var zahl = window.localStorage.getItem(key_zaehler);
zahl++;
window.localStorage.setItem(key_zaehler, zahl);

var el = document.createElement("input"); //ein Input-Tag soll erstellt werden
  el.name = "inhalt[]"; // Attribut name="inhalt[]" soll gesetzt werden
  el.type = "text"; // Attribut type="text" soll gesetzt werden
  el.id = 'combo_'+zahl; // Attribut id="combo" soll gesetzt werden
  el.className = "f250"; // Attribut id="combo" soll gesetzt werden
  document.getElementById("container").appendChild(el); // setzt es in den DIV-Container
  var br = document.createElement("br");
  document.getElementById("container").appendChild(br);

<!--
jQuery(function () {
jQuery('#combo_'+zahl).combobox([
'Eintrag 1',
'Eintrag 2',
'Eintrag 3',
'Eintrag 4'
]);
});
//-->

}
</script>

>   
  

[ChrisB]

Hi,

wie kann ich vor das zu generierende Formularfeld (siehe Code) einen Text vor das Formularfeld setzen, also z.B. "Name:"?

Erzeug ein label-Element, erzeug einen Textknoten, hänge zweiteren in ersteres und ersteres ins Dokument.

MfG ChrisB

[Heinz]

Erzeug ein label-Element, erzeug einen Textknoten, hänge zweiteren in ersteres und ersteres ins Dokument.

Kann ich so auch das Ganze in eine Tabellenzeile setzen?
Geht sowas?

Heinz

[gast_42]

Kann ich so auch das Ganze in eine Tabellenzeile setzen?
Geht sowas?

Erzeug ein label-Element, erzeug einen Textknoten, hänge zweiteren in ersteres und ersteres ins Dokument...

... an die gewünschte Stelle

[Heinz]

Kann ich so auch das Ganze in eine Tabellenzeile setzen?
Geht sowas?

Erzeug ein label-Element, erzeug einen Textknoten, hänge zweiteren in ersteres und ersteres ins Dokument...
... an die gewünschte Stelle

Schwachinnshilfe.
Wäre das hier immer so gewesen, so hätte ich heute niemals das Wissen, das ich habe. Ich rede nicht von JS, sondern von php/mysql.

Heinz