Динамичное создание полей для формы в HTML

В этой статье я расскажу как создавать динамичные поля для формы.

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

Вы можете изменять код как хотите под свои нужны. Он в свободном доступе для всех.

HTML

<div class="container"> 
    <div class="width-100">
        <p class="text-center text-italic">
            Данная форма автоматически добавляет новое поле в форму после нажатия на кнопку "<strong>Добавить поле</strong>".
        </p> 
    </div>
    <div class="width-100">
        <form action="" method="post" id="form-id">
 
            <input placeholder="Введите текст" />
 
            <span id="add">Добавить поле</span>
        </form>
    </div>
    <div class="width-100">
        <p class="text-center">
            <a href="https://twitter.com/ateshabaev" target="_blank">Twitter</a>
            <a href="http://bologer.ru/" target="_blank">Сайт</a>
        </p>
    </div>
</div> <!-- .container -->

CSS

.width-100 {width: 100%; float: left; margin: 10px 0; }
.text-center {text-align: center;}
.text-italic {font-style: italic;}

.container { width: 50%; margin: 0 auto; position: relative;}

form input {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    background-color: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 2px solid #4877BB;
    padding: 15px 8px;
    color: #C6CDD8;
    outline: 0;
    font-size: 12pt;
}
form input:active, 
form input:focus {
    background-color: rgba(72, 119, 187, 0.05) !important;
    border-bottom: 2px solid #679CEA !important;
}
form inpu:last-of-type { margin-bottom: 0 !important; }

form #add {
    display: inline-block; 
    border: 2px solid #4877BB;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    float: left; 
    margin: 20px 0;
    padding: 15px 30px;
    text-align:center;
    cursor: pointer;
}
form #add:hover,
form #add:focus { border: 2px solid #679CEA; }

jQuery

$(function() {
     
    $(document).ready(function() {
         
        function checkForm() {
            // Для каждой формы с #form-id, смотрим все input внутри 
            $('#form-id').find('input').each(function( $id ) {
                /* Для каждого input добавляем name="" и data-id атрибут
                   data-id потрубется чуть ниже */
                $(this).attr('name', 'data[' + $id + ']');
            });
        }
      
        checkForm(); // Вызывает функцию при загрузке документа
         
        // При нажатии на кнопку "Добавить поле" 
        $('#add').click(function() {
            // Получение последнего input в форме
            var $last_input = $(this).closest('form').find('input:last-of-type');
             
            // После последнего input добавляем новое значение 
            $last_input.after('<input  placeholder="Введите текст" />');
             
            // Вызываем функцию снова  
            checkForm();
        });
    });
});

Комментарии к jQuery функции описаны в самом коде.

Вкратце как все работает

Скрипт считывает последнее значение input в form и после него ставить новый input. После чего вызывается функция checkForm(), которая меняет id значения для data массива для name атрибута каждого input.

Посмотреть скрипт в песочнице — http://jsfiddle.net/AlexanderT/c22gt5L8/7/.

На этом все. Если у вас есть вопросы — задавайте их в комментариях.

Динамичное создание полей для формы в HTML от Bologer