Динамічне додавання полів форми на Jquery

Інколи доволі зручним рішенням додавання додаткових полів для вводу тексту є використання динамічних ефектів за допомогою бібліотеки jQuery.

За допомогою наведеного нище коду користувач зможе динамічно добавляти та видаляти поля форми.

Код на JS:
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10;
var x = 1;
$('#add_field').click(function( e ){
e.preventDefault();
if ( x < max_fields ) {
x++;
$('.vote').append('<div class="fields"><input type="text" maxlength="120" name="poll_options[]" /><b class="clear">×</b></div>');

}
});
$('#input_fields').on("click",".clear", function(e){
if( x > 1 ) {
e.preventDefault();
$(this).parent('div').remove();
x--;
}
})
});
</script>

Код CSS:
.vote{ width: 300px; margin: 0 0 3px 0 }
.vote .clear{ text-align: center; line-height: 1.4; box-sizing: border-box; border-left: 1px solid #dedede; position: absolute; top: 1px; right: 1px; width: 40px; color: #000; background-color: #f0f0f0; font-size: 16px; cursor: pointer; z-index: 3; height: 23px}
.vote .fields{ margin-top: 5px; position: relative }
.vote input[type="text"]{ width: 100%; box-sizing: border-box }
input[type="submit"]{ background: #687582 no-repeat 4px 5px; padding: 4px 20px 3px 20px; color: #fff; font-size: 14px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #1A87B9; cursor: pointer }

Код Html:
<div id="input_fields">
<input type="submit" id="add_field" value="Додати варіант відповіді" />
<div class="vote">
<div class="fields"><input type="text" maxlength="120" name="poll_options[]"></div>
<div class="fields"><input type="text" maxlength="120" name="poll_options[]"></div>
</div>
</div>

В кінцевому результаті отримаємо форму з динамічним додаванням полів:
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

KovelX - безкоштовні оголошення

Photo KovelX
75 грн.
Photo KovelX
210 грн.
Photo KovelX
1 800 грн.
Photo KovelX
1 700 грн.
Photo KovelX
15 грн.
Photo KovelX
15 грн.
Photo KovelX
70 грн.
Photo KovelX
3 898 грн.
Photo KovelX
1 470 грн.
Photo KovelX
2 590 грн.
Photo KovelX
26 399 грн.
Photo KovelX
3 600 грн.
Photo KovelX
410 грн.
Photo KovelX
999 грн.
Photo KovelX
3 700 грн.

Читайте нас також: