 Formularfelder dynamisch vom User erzeugen lassen: mit Mootools
Hier wird erklärt, wie man mit Hilfe von Mootools Formularfelder dynamisch vom User erzeugen lassen kann.
AusgangspositionZu Beginn sieht der User nur ein einziges input-Feld. Wenn ihm das nicht reichen sollte, kann er sich selbst mehr Felder generieren. Er muss einfach auf "mehr Felder" klicken. Klingt in der Theorie ziemlich einfach. Aber nicht nur in der Theorie - auch die Umsetzung mit der Javascript-Bibliothek Mootools ist einfach. Live-Beispiel
UmsetzungAlles, was wir als Vorraussetzung brauchen ist ein HTML-Formular mit zu Beginn einem input-Feld und ein div, welches den Text "mehr Felder" enthält:
<form id="formular">
<input name="vorname" type="text" size="30" maxlength="30">
</form>
<div id="klick_mich">mehr Felder</div>
Als Nächstes muss per Javascript das Klick-Event für das div "klick_mich" definiert werden:
// Alles muss geladen sein
window.addEvent('domready', function() {
var count = 0;
$('klick_mich').addEvent('click', function(){
Hier warten wir erst, bis die gesamte DOM-Struktur geladen ist, ehe wir das Klick-Event definieren. In Zeile 4 wird noch ein Zähler definiert, den wir später noch brauchen, um jedem neuen input-Feld einen eindeutigen Namen zu geben. Die input-Felder sollen dann in einem Container-div erscheinen, um dann später mit der Funktion appendChild() jeweils ein neues Kind-Element in dieses Container-div einfügen zu können. Das Container-div muss natürlich erst noch erstellt werden:
// Ist der Container für die Inputs schon vorhanden?
if(!Boolean($('container_inputs')))
{
// Container erzeugen
var container = new Element('div', {id: 'container_inputs'});
$('formular').appendChild(container);
}
Letzten Endes muss nur noch ein neues input-Element im Container-div angelegt werden:
// div um das Input herum:
var div = new Element('div', {id:'div'+count});
$('container_inputs').appendChild(div);
// Input-Feld erzeugen:
var input = new Element('input', {name:'input'+count, type:'text', size:'30', maxlength:'30'});
$('div'+count).appendChild(input);
Wie man in Zeile 3 sieht, legen wir um das input-Feld noch ein div, damit alle neuen inputs schön untereinander stehen. Hier nun das komplette Skript:
<form id="formular">
<input name="vorname" type="text" size="30" maxlength="30">
</form>
<div id="klick_mich">mehr Felder</div>
<script type="text/javascript">
// Alles muss geladen sein
window.addEvent('domready', function() {
var count = 0;
$('klick_mich').addEvent('click', function(){
// Ist der Container für die Inputs schon vorhanden?
if(!Boolean($('container_inputs')))
{
// Container erzeugen
var container = new Element('div', {id: 'container_inputs'});
$('formular').appendChild(container);
}
if(count < 4)
{
// div um das Input herum:
var div = new Element('div', {id:'div'+count});
$('container_inputs').appendChild(div);
// Input-Feld erzeugen:
var input = new Element('input', {name:'input'+count, type:'text', size:'30', maxlength:'30'});
$('div'+count).appendChild(input);
count++;
}
else if(count == 4)
{
var div = new Element('div', {id:'div'+count});
$('container_inputs').appendChild(div);
$('div'+count).appendText('Jetzt reicht\'s aber!');
count++;
}
});
});
</script>
|
Kommentare