Klon-form und die Schrittweite

Ich habe ein Formular unten, dass ich Sie Klonen möchten, Inkrementieren Sie die id(att1) und es Eingänge, Texteingabefelder usw. und anfügen an die Teilnehmer div. Jede Hilfe sehr geschätzt. Seit wrecking meinem Kopf...

Alle, die ich habe ist...

$(function () {
        var index = 1;


    $(".add").click(function () {
            index++;

        $("#att1").clone(true).removeAttr("id").attr("id", "att" + index).appendTo("#attendees");
            alert(index);
    });
});

Html:

    <div id="attendees">
            <div id="att1">
                    <fieldset>
                        <legend><span class="legend">Attendee 1 Booking Details</span></legend>
                        <p name="test">
                        <label for="A_Title_1">Title: <span class="req">*</span></label>
                        <input name="A_Title_1" id="A_Title_1" value="" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Forename_1">Forename: <span class="req">*</span></label>
                        <input name="A_Forename_1" id="A_Forename_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Surname_1">Surname: <span class="req">*</span></label>
                        <input name="A_Surname_1" id="A_Surname_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Info_1">Additional Info: </label>
                        <textarea name="A_Info_1" id="A_Info_1" cols="20" rows="10"></textarea>
                        <span class="info">Please include any infomation relating to dietary/access/special requirements you might have.</span>
                        </p>
                    </fieldset>
                    </div>
<a href="#" class="add">Add more</a>

    </div>
  • Ich sehe Sie nicht nach JavaScript. Brauchen Sie Hilfe mit jeder einzelnen Zeile des Codes erforderlich oder Sie haben Probleme mit bestimmten Schritt?
  • Ich bearbeitete den text oben mit dem was ich habe, das ist sehr wenig. Danke.
InformationsquelleAutor | 2010-12-09
  1. 18

    Sehen die fiddle.

    Fügen Sie eine Klasse attendee zu den div id="att1"

     <div id="att1" class="attendee">

    Und die JS:

    $(function(){
    var template = $('#attendees .attendee:first').clone(),
        attendeesCount = 1;

    var addAttendee = function(){
        attendeesCount++;
        var attendee = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
            $(this).prev().attr('for', newId); //update label for (assume prev sib is label)
            this.name = this.id = newId; //update id and name (assume the same)
        }).end() //back to .attendee
        .attr('id', 'att' + attendeesCount) //update attendee id
        .prependTo('#attendees'); //add to container
    };

    $('.add').click(addAttendee); //attach event
});
    InformationsquelleAutor Josiah Ruddell
  2. 1

    Versuchen, diese

        empty_html = $('#att1').html();

    $('.add').click(function() {

        last_id = $('#attendees div:last').attr('id').replace('attr','');

        next_id = last_id++;

        new_div = $('<div id="' + next_id + '">' + empty_html +'<div>');

        $('#attendees').append(new_div);

    });

    Erfordert ein paar änderungen im HTML, ich würde verschieben Sie die add-link aus der Teilnehmer-div.

    InformationsquelleAutor Alan Whitelaw
  3. 0

    Diesem Beispiel könnte Ihnen dabei helfen. Beispiel

    $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $(document).on('click','#addScnt', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $(document).on('click','#remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});
    InformationsquelleAutor Lefteris Bab
  4. 0

    ich weiß, es ist der alte thread.. ich möchte nur Teile einfach Weg zu Inkrementieren id. ich bin mit der gleichen Klasse in allen geklonte element

    UPDATE :

    diese mehr Eleganz Weg :

    var clone_counter = 1; //global variable
$('.clone').click(function(){
   $('.clonethis').clone();
   console.log(clone_counter);
   clone_counter++;
});
    InformationsquelleAutor mockie
  5. 0

    Ich stellte diese gleiche Antwort anderswo, aber ich denke, es gilt für diese Frage zu.

    Erstellte ich eine "original" - element und versteckte es auf der Seite. Ich angehangen "---" der Wert von jedem Attribut, das musste erhöht werden, innerhalb von child-Elemente des Originals.

    Immer, wenn der Benutzer auf eine Schaltfläche zu erstellen, die ein Klon des Originals, die ich erstellt einen Klon, dann Global ersetzt "---" mit dem aktuellen index innerhalb dieser Klon ist HTML. So etwas wie dieses:

    var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

//Insert and show the clone after the original
$original.after($clone);

    Habe ich eine data-Attribut speichern aktualisiert die Werte der incrementedFieldNum (nicht gezeigt in den obigen code).

    Hoffentlich das hilft. Es ist viel weniger code und es ist eine Allgemeine Lösung, denke ich. Ich hatte viele verschachtelte Elemente, die erforderlich, um die inkrementierten IDs und Namen, also eine Lösung, wie die von @Fierceblood unpraktisch war.

    InformationsquelleAutor bergie3000
Schreibe einen Kommentar