Клонировать div и постепенно переименовывать идентификаторы элементов

Хорошо, скажем, у меня есть div с элементами формы внутри него. Я хочу иметь возможность клонировать этот div одним нажатием кнопки с помощью jQuery и добавить версию 2 формы, поэтому ВСЕ идентификаторы элементов будут увеличиваться на 1 в их имени.

<div id="card">
    <!-- PART 1 --> 
    <h1 class="card_build">Build your card options:</h1>

    <select id="country" name="country[]">
        <?php
            include('lib/class_dbcon.php');
            $connect = new doConnect();

            $q = mysql_query("SELECT * FROM country ORDER BY country_id ASC");
            while($row = mysql_fetch_assoc($q))
            {
                echo '<option value="'.$row['country_id'].'">'.$row['country_option'].'</option>';
            }
        ?>
    </select>

    <select id="filter" name="filter[]">
        <option value="">-- Select Filter --</option>
    </select>

    <select id="load_choice" name="load_choice[]">
        <option value="">-- Select Load_choice --</option>
    </select>

    <select id="plastic" name="plastic[]">
        <option value="">-- Select Plastic --</option>
    </select>

    <select id="UG_tipping" name="UG_tipping[]">
        <option value="">-- Select UG/Tipping --</option>
    </select>
    <!-- PART 1 -->
    <!-- PART 2 -->
    <div id="part2" style="margin-top:10px;">
    <h1 class="card_build">Customize the card:</h1>
    <input type="text" name="3rdLine" size="32" class="field" id="3rdLine">
    <input type="text" name="4thLine" size="32" class="field" id="4thLine">
    <input type="text" name="card_value" size="32" class="field" id="card_value">
    <label for="showpoints">Show "Points"?</label>
    <input type="checkbox" value="points" class="checkbox" checked="checked">
    <label for="cobrand">Co-branded?</label>
    <input type="checkbox" value="cobrand" class="checkbox" checked="checked">
    <textarea rows="5" name="message" class="textarea" id="message"></textarea>
    <hr>
    </div>
    <!-- PART 2 -->
</div>
    <a href="#" onCLick="moreFields()">ADD</a>

Поэтому, если вы посмотрите на этот код и щелкнете по ссылке ДОБАВИТЬ в конце, он будет дублировать и превращать его в и делать то же самое со всеми идентификаторами элементов внутри div. Один ключ в работе заключается в том, что я хочу МАКСИМУМ 5 клонов, поэтому скрипт может увеличивать только 4 раза (или 5, это не имеет большого значения, пока я вижу метод для создания максимума).

Мой единственный другой вопрос: останется ли PHP-инъекция при клонировании div? Заранее спасибо, всю ночь ломал голову над этим.


javascript php forms jquery clone
person Rob Bennet    schedule 24.10.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Судя по вашему коду, я думаю, что ваша основная проблема заключается в однозначном доступе к группе раскрывающихся списков без конфликтов. Если это так, я думаю, что это может быть достигнуто без стресса, связанного с увеличением идентификаторов каждого элемента для каждой созданной группы. Если бы мне пришлось это делать, я бы подошел к этому следующим образом.

Сначала DOM (пример):


<div id="card">
    <div class="group">
        <select id="country" name="country[]">
            <option>select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <select id="filter" name="filter[]">
            <option>select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
</div>
<a id="more" href="">More</a>

Затем jquery:


$(function(){
    var newgroup = $('<div>').addClass('group');
    $('#more').click(function(e){
        e.preventDefault();
        $('.group').first().clone().appendTo(newgroup).appendTo('#card');
    });

    $('.group #country').live('change',function(){
        $(this).parent().find('#filter').val(1);
    });
});
person burntblark    schedule 24.10.2010
comment
Это создаст новую группу элементов формы, а также прикрепит связанные с ними события. - person burntblark; 24.10.2010