# [jQuery] dynamisch Inputfelder hinzufügen und entfernen



## jaegerschnitzel (7. März 2009)

Ich suche eine Möglichkeit mit jQuery dynamisch weitere Inputfelder nachzuladen bzw. diese auch wieder zu löschen.
So ähnlich wie hier:
http://mohamedshaiful.googlepages.com/add_remove_form.htm

Nur eben dass, die Felder bereits mit Daten aus der DB gefüllt sind, wozu ich wohl Ajax benötige.

Habe auch schonmal folgenden Code probiert:

```
<a class="ajax" href="#">weiteres Feld hinzufügen</a>
<div id="quote"></div>

$('a.ajax').click(function() {
        $('#quote').load('ajax.php');
        $(location).attr("hash", $(this).attr("hash"));
        return false;
    });
```

Funktioniert soweit ganz gut. Das Problem ist nur die benötigte ID. Um später beim Speichern des Formulars alle Werte zuordnen zu können, würde ich gerne den Inputfeldern IDs vergeben.

Wie realisiere ich das am besten?
Was kann ich am bisherigne Code verbessern?


----------



## kuddeldaddeldu (7. März 2009)

Hi,

kannst Du mal Deine ajax.php zeigen? Ich verstehe irgendwie nicht ganz, was genau Du da vorhast.

LG


----------



## jaegerschnitzel (7. März 2009)

klar kein Problem


```
echo '<div class="kategorieauswahl" id="1"><label>Kategorie:</label>

        <select name="p_kategorie" id="p_kategorie">
        <option value=""></option>';
        $kategorien = Database::queryArray("SELECT id, name FROM _category;");

        foreach ($kategorien as $wert) {
            echo '<option value="$wert[id]">$wert[name]</option>';
        }
        echo '</select></div>';
```
Ich möchte jetzt nur, dass die ID des <div> und die ID des <select> ansteigend sind. Also beim ersten mal klicken 2, dann 3,...


----------



## Quaese (7. März 2009)

Hi,

zunächst würde ich mit der jQuery-Methode *ajax* arbeiten. Diese lässt es zu, nach erfolgreichem Request eine Callback-Funktion aufrufen. Dort kannst du eine globale Variable inkrementieren. Diese Variable wird dem Request als Parameter mitgegeben und dient auf der Serverseite als ID.

Auf der Clientseite könnte es wie folgt aussehen:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
var intCountID = 0;
$(document).ready(function(){
  $('a.ajax').click(function(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {'id': intCountID},
      success: function(msg){
        $('#quote').append(msg);
        $(location).attr("hash", $(this).attr("hash"));
        intCountID++;
      }
    });
  });
});
 //-->
</script>
</head>
<body>
<a class="ajax" href="#">weiteres Feld hinzufügen</a>
<div id="quote"></div>
</body>
</html>
```
 
Auf der Serverseite verarbeitest du die Post-Variable 'id' - Beispiel:

```
echo("<div id=\"id_".$_POST['id']."\">".$_POST['id']."</div>\n");
```
 
Es sei noch angemerkt, dass IDs mit einem Buchstaben beginnen müssen.

Ciao
Quaese


----------



## jaegerschnitzel (12. März 2009)

ok danke soweit

Habe noch ein anderes Problem.
Und zwar möchte ich etwas erscheinen lassen und das Feld dann den Focus geben, damit man gleich schreiben kann.
Klappt aber nicht. Was mache ich falsch?



> $('a.test').click(function() {
> $('#suche').fadeIn(300);
> $("input.focus:last").focus();
> });


----------



## kuddeldaddeldu (12. März 2009)

Hi,

was sagt denn die Fehlerkonsole?



jaegerschnitzel hat gesagt.:


> ```
> $("input.focus:last").focus();
> ```



Das input-Feld hat die Klasse "focus"? Oder meintest Du


```
$("input:last").focus();
```

LG


----------



## jaegerschnitzel (12. März 2009)

Jo mein input-Feld hat die Klasse "focus".
Fehlerkonsole sagt nichts.

Wenn ich auf den Link klicke erscheint das div mit der id "suche". Darin befindet sich das Input feld.
Wenn es erscheint hat es ganz kurz den Focus wie es aussieht, behält ihn aber leider nicht, obwohl danach ja nichts mehr ausgeführt wird.


----------



## kuddeldaddeldu (12. März 2009)

Hi,

und welches Element bekommt stattdessen den Focus?

LG


----------



## jaegerschnitzel (12. März 2009)

gute Frage 
keines würd ich sagen. Wenn ich aber ein weiteres mal Tab drücke bekommt das Input feld den Focus.


----------



## kuddeldaddeldu (12. März 2009)

Du könntest mal testen, welches Feld überhaupt ausgewählt wird, indem Du ihm z.B. probehalber einen farbigen Rahmen verpasst.

LG


----------



## jaegerschnitzel (12. März 2009)

OK, es wird das richtige ausgewählt.
Dann bekommts vermutlich auch den Focus. Nur verschwindet der wieder.


Hab das Ganze mit hover statt click getestet, nun gehts.
Was könnte ich machen, dass es mit click klappt?


----------



## Quaese (12. März 2009)

Hi,

tritt das Verhalten bei jedem zugefügten Textfeld auf oder nur beim ersten?

Du könntest folgendes versuchen:

```
$('a.test').click(function() {
  $('#suche').fadeIn(300, function(){
    $("input.focus:last").focus();
  });
  $("input.focus:last").focus();
});
```
 
Da der Fokus wie von dir beschrieben wieder vom Feld genommen wird, könnte es mit dem Faden zusammenhängen. Durch den Aufruf einer Callback-Funktion setzt du einfach den Fokus für den Fall, dass gefadet wird, nachdem der Einblendvorgang abgeschlossen wurde.

Vielleicht hilft dir das weiter.

Ciao
Quaese


----------



## kuddeldaddeldu (12. März 2009)

Seltsam... bei mir blinkt der Cursor auch nur kurz auf, das Feld hat aber dennoch den Focus (tipp einfach mal was ).

LG

Edit: mit Quaeses Vorschlag funktioniert es.


----------



## jaegerschnitzel (12. März 2009)

Quaese hat gesagt.:


> Hi,
> 
> tritt das Verhalten bei jedem zugefügten Textfeld auf oder nur beim ersten?
> 
> ...



so funktionierts danke!

Habe mir überlegt das div mit facebox anzeigen zu lassen.
Da funktionierts das focus aber wieder nicht. Hättest du dafür auch ne Lösung?


----------



## Quaese (13. März 2009)

Hi,

wie sieht denn dein bisheriger Versuch mit facebox aus? Poste doch bitte den aufs Wesentliche reduzierten Code.

Ciao
Quaese


----------



## jaegerschnitzel (13. März 2009)

Habs gerade hinbekommen 
Danke für eure Hilfe.

Hatte eine Klasse falsch gesetzt...


----------

