1

Задача следующая:

Есть div блок. В нем содержится некие данные. Например, несколько полей, чекбокс текст и т.д., а также в блоке есть 2 кнопки "+" и "-"

Пользователь ввел данные затем нажимает + появляется такой же блок, но пустой.

нашел вот что примерно мне нужно (только в новом блоке поля со значениями, а должны быть пустыми):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Демонстрация клонирования</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<script>
function droptr(btn){
        if(document.getElementById) {
                tr = btn;
                while (tr.tagName != 'TR') tr = tr.parentNode;
                tr.parentNode.removeChild(tr);
                checkForLast();
        }
}
function addtr(btn){
        if(document.getElementById) {
                tr = btn;
                while (tr.tagName != 'TR') tr = tr.parentNode;
                var idSuffix = Math.round(Math.random()*1000);
                var newTr = tr.parentNode.insertBefore(tr.cloneNode(true),tr.nextSibling);
                thisChilds = newTr.getElementsByTagName('td');

                checkForLast();
        }
}
function checkForLast(){
        btns = document.getElementsByName('drop');
        for (i = 0; i < btns.length; i++){
                btns[i].disabled = (btns.length == 1) ? true : false;
        }
}
</script>

    <form action="" method="post">
<table>
<tr>
<td><input type="text" name="nameclone[]"></td>
<td>
<INPUT onclick=droptr(this); type=button  disabled=true value="-" name=drop> <INPUT onclick=addtr(this); type=button value="+">
</td>
</tr>

</table>

        <input type="submit" value="Отправить">
    </form>

</body>
</html>

В общем, нужно сделать так чтобы поля пустыми новые были и желательно избавиться от табличной верстки, т.е. сделать все на div, а не на tr.

Пробовал с нуля написать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Демонстрация клонирования</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>

    <form action="" method="post">

<div id="lib"><input  type="text" size="6" name="nameclone[]" value=""><br>
</div>
<div id="lib2"></div>
  <input type="button" value="Add" onClick="if(lb)lb.innerHTML+=text2add">
<script>
 var lb=document.getElementById('lib')
var text2add=lb.innerHTML
function cloneIt(){
        lb.innerHTML=cloneNode(text2add);
       // text2add=text2add.search(/([\w\W]*name=[^\d]+)(\d+)([\w\W]*)/gi)
      //  text2add=RegExp.$1+(1+parseInt(RegExp.$2))+RegExp.$3
       // lb.innerHTML+=text2add
        }
</script>
        <input type="submit" value="Отправить">
    </form>

</body>
</html>

Но в js не силен и скрипт не правильно работает, все поля пустые, даже те что заполнены были стают, да и кнопку только одну вывел.

Помогите плиз.

1
  • используйте jQuery и не парьте себе мозги. согласно mdn параметр этого метода - boolean, значит, что надо клонировать рекурсивно или нет. введенные поля придется копировать циклом в любом случае.
    – zb'
    23 фев 2014 в 15:02

1 ответ 1

1

Вот простой пример:

HTML:

<div id="template">
    <div class="block">
        <button class="remove">-</button>
        <input type="text"/>
    </div>
</div>

<button id="add">add +</button>
<div id="wrapper"></div>

CSS:

#template{
    display: none;
}

JS:

$(function(){
    var block = $('#template').children('.block'),
        wrapper = $('#wrapper'),
        addItem = $('#add');

    addItem.on('click', function(){
        var newItem = block.clone();
        wrapper.append( newItem );
        newItem.children('.remove').on('click', function(){
            newItem.remove();
        });
    });
});

Онлайн-демо.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.