Динамически добавлять текстовое поле внутри формы

Question

Динамически добавлять текстовое поле внутри формы

0

У меня есть форма, подобная следующей, и я хочу, когда пользователь заполнит текст ввода, а затем автоматически добавит еще один текст ввода, и это действие продолжится.

Пример html:

<form method="post" action="http://localhost/save" class="save">
 <fieldset>

  <div>
   <label>Text 1:</label><br>
   <input type="text" value="" name="text1" id="text" class="input-tags">
  </div>

  <div>
   <label>Text 2:</label><br>
   <input type="text" value="" name="text2" id="text" class="input-tags">
  </div>

  <div>
   <input type="submit" value="Save" class="elgg-button elgg-button-submit">
  </div><!-- developers:end forms/application_description/save -->
 </fieldset>
</form>

Как это сделать с помощью jQuery?

Итак, вопрос в меньших словах заключается в следующем: как я могу показать text2 только при заполнении text1?

Christos Papoulas 03 окт. 2013, в 16:06

Источник

Теги:

jquery

html

2 ответа

2

что-то вроде этого будет работать. Его довольно грубо, но проверено, и он отлично работает

$(document).ready(function(){
    $("#testForm").append($("<input type='text'/>"));

    $("#testForm").on("blur", 'input', function(){
        $("#testForm").append($("<input type='text'/>"));
    });
});

Вот ссылка на мою скрипку. Вы можете отделиться и играть с ним.

http://jsfiddle.net/ricobano/bxEAb/

Richard Banks 03 окт. 2013, в 10:37

0

Вы показали мне правильный путь! Спасибо
Christos Papoulas 03 окт. 2013, в 13:23

Ещё вопросы

Вы показали мне правильный путь! Спасибо

andrunix · Accepted Answer · 2013-10-03T11-19-00.000Z

Да, вы можете динамически добавлять поля в форму или весь фрагмент HTML по вашему выбору. Функции jQuery, на которые вы должны обратить внимание, - это prepend, prependTo, append или appendTo. Все они делают в основном одно и то же несколько разными способами.

Вы можете сохранить переменную с количеством созданных текстовых полей и увеличивать ее каждый раз, когда вы ее добавляете. Если вы добавите атрибут id в свой div, это будет проще. Например, в div, окружающем вашу кнопку отправки, вы добавили такой идентификатор:

<div id="submit-div">

Вы могли бы сказать что-то вроде:

function addField() {
    n++;
    '<div><label>Text ' + n + ': </label><input type="text" name="text' + n + '" class="input-tags"></div>'.prependTo('#submit-div');
}

Как и когда вы вызываете эту функцию, зависит от вас, но вы можете прикрепить ее к событию размывания последнего поля ввода. Затем, когда вы создаете новый, вы можете удалить обработчик событий из предыдущего поля ввода.