Как на JQuery по мере ввода информации пользователем добавить новый элемент на страницу

Небольшая заметка о том, как динамически добавлять элементы формы с использованием JQuery / JavaScript. Это полезно, когда DOM уже загружен, и вы должны добавить дополнительный элемент, полагаясь на действия пользователей (событие change). Разумееется так вы можете вставлять на страницу любые новые элементы формы, а не только поля ввода. В качестве альтернативы вы также можете создать форму входа на странице и просто скрыть её, а затем показать, когда она потребуются.

Пример:  добавим поле подтверждения пароля confirm_password, когда пользователь уже заполнил поле ввода пароля password.

JavaScript:

jQuery(document).ready(function($) {

    var passwordField = $('#password');
    // При выборе поля password добавляет второй инпут:
    passwordField.one('change', function() {
        // Динамическая генерация нового поля ввода и вставка его после password:
        $("<input type='password' name='confirm_password' id='confirm_password' value='' />").insertAfter(passwordField);
    });

});

HTML:

<input type="password" id="password" value="" name="password" />

Подтверждение пароля будет добавлено только 1 раз благодаря методу .one().

Опубликовано 15-10-2013 в 10:07


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты