[jQuery] dynamisch Inputfelder hinzufügen und entfernen

jaegerschnitzel

jaegerschnitzel

Mitglied
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:
HTML: 
<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?
 
klar kein Problem

PHP: 
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,...
 
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:
Code: 
<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:
Code: 
echo("<div id=\"id_".$_POST['id']."\">".$_POST['id']."</div>\n");

Es sei noch angemerkt, dass IDs mit einem Buchstaben beginnen müssen.

Ciao
Quaese
 
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();
});
Zum Vergrößern anklicken....
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück