Javascript-форум - Добавление и удаление input

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Добавление и удаление input (https://javascript.ru/forum/misc/71282-dobavlenie-i-udalenie-input.html)

Цитата:

Сообщение от laimas

это нужно выбрасывать,

ок! ниже код исправляющий подсчёт, но лучше конечно прислушаться к laimas, и имена полей изменить

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>


$(document).ready(function(){


  var i = 1;

  $('#add').click(function(event) {event.preventDefault();
            $('\n\
    \n\
<!--------- Строка начало --------->\n\
        <div class="field">\n\
            <div class="col_left">\n\
                <div class="border">\n\
                    <input type="text" name="tag_' + i + '" value="" placeholder="TEG" />\n\
                </div>\n\
            </div>\n\
            <div class="col_centr">\n\
                <div class="border">\n\
                    <input type="text" name="tag_name_' + i + '" value="" placeholder="Название поля" />\n\
                </div>\n\
            </div>\n\
            <div class="col_right">\n\
                <div class="border">\n\
                    <select type="radio" name="tag_template_' + i + '">\n\
                        <option value="0">Текстовое</option>\n\
                        <option value="1">Числовое с переводом числа в текст</option>\n\
                        <option value="2">Срок исполнения</option>\n\
                    </select>\n\
                </div>\n\
            </div>\n\
            <div class="clear"></div>\n\
        </div>\n\
        <!--------- Строка конец --------->\n\
\n\
').fadeIn('slow').appendTo('.inputs');
                i++;
                document.getElementById('last_numer').value = i;

  });

  $('#remove').click(function(event) {
            if(i == 1) return;
            event.preventDefault();
            $('.field:last').remove();
            i--;
            document.getElementById('last_numer').value = i;

  });


// here's our click function for when the forms submitted

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


  var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });

    if(answers.length == 0) {
        answers = "none";
    }

  alert(answers);

  return false;

  });



});

</script>

</head>

<body>
<!--------- Строка начало --------->
        <div class="field">
            <div class="col_left">
                <div class="border">
                    <input type="text" name="tag_1" value="" placeholder="TEG" />
                </div>
            </div>
            <div class="col_centr">
                <div class="border">
                    <input type="text" name="tag_name_1" value="" placeholder="Название поля" />
                </div>
            </div>
            <div class="col_right">
                <div class="border">
                    <select type="radio" name="tag_template_1">
                        <option value="0">Текстовое</option>
                        <option value="1">Числовое с переводом числа в текст</option>
                        <option value="2">Срок исполнения</option>
                    </select>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <!--------- Строка конец --------->
        <div class="inputs">

        </div>
        <input id="last_numer" name="" value="1">
    <!--------- Строка начало --------->
        <div class="form_group">
            <div class="col_left">
            <a href="#" id="add">Добавить</a> | <a href="#" id="remove">Удалить</a>
            <div class="clear"></div>
        </div>
        </div>
        <!--------- Строка конец --------->

    </body>
</html>

Цитата:

Сообщение от laimas (Сообщение 469439)

вот так надо:

tag[], tag_nam[], ....

И получите массив в $_POST.

спасибо, попробую так.

skitskis,
$("[name='tag[]']").each()

но наверно будет достаточно $(".field").serialize()

skitskis,
еще раз и последний - именование полей как tag_1, tag_2, ... это бессмыслица ничего кроме геморроя на сервере не дающая, так как требует сканирования ключа. Это и на клиенте геморрой, так как вся эта кухня с расчетом ради этого у вас и крутится.

Начните с именования полей, и просто клонирование, и код будет лаконичней, и мусора в нем будет меньше.

рони, спасибо!
Работает.
Я так понимаю добавили только это:

.click(function(event) {event.preventDefault()

А почему он считал на прибавление нормально а на минус нет?

laimas, рони
Спасибо Вам большое.

skitskis,
все таки вы остановились на самом худшем, это значит, что и в РНР у вас не очень продуман код. )

laimas
неее, я попробую как советовали. tag[], tag_nam[], ....

Цитата:

Сообщение от skitskis

я попробую как советовали

В этом случае "бухгалтерии" на клиенте не нужно, я же вижу что так и осталось - добавление с описанием, нумерацией... Кнопка удалить должна быть у каждого добавляемого блока своя, а Добавить одна общая. И список не может быть типом "radio".

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

Сегодня с утра решал почти такую же задачу.
https://jsfiddle.net/320zmnxw/