• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

input hinzufügen/entfernen

Sunnyboy

Mitglied
Hallo

Ich versuche gerade den code von http://jsfiddle.net/aaki/hMJEy/1/ zu nutzen.

Leider mache ich wohl etwas total falsch, denn im Gegensatz zu jsfiddle läuft mein code nicht. Entschuldigt für meine Nichtwissenheit, aber ich arbeite sonst nie mit jquery.
Nun meine Version:
HTML:
<form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
    <div class="multi-field-wrapper">
      <div class="multi-fields">
        <div class="multi-field">
          <input type="text" name="stuff[]">
          <button type="button" class="remove-field">Remove</button>
        </div>
      </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
</script>

Vielen Dank für alle Hilfe!
Sunnyboy

PS: Wie werden diese Werte übrigens am besten mit PHP ausgewertet, wenn ich nicht weiss, welche/wieviel Felder gesendet werden?
 
Werbung:
Merci, so funktionierts:
HTML:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
    <div class="multi-field-wrapper">
      <div class="multi-fields">
        <div class="multi-field">
          <input type="text" name="stuff[]">
          <button type="button" class="remove-field">Remove</button>
        </div>
      </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>
<script type="text/javascript">
$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
</script>
</body>
</html>
 
Werbung:
Zurück
Oben