Добавление поля формы HTML в существующую форму при нажатии кнопки без перезагрузки

Question

Я нашел немало JavaScript примеров, когда гуглил по этому поводу. Однако ни один из них не работал для меня.

Я хочу выполнить относительно простую задачу: при нажатии кнопки добавления поля в форме должно появиться второе поле выбора. Это должно продолжаться до бесконечности. Поскольку я уже использую библиотеку jQuery , я бы предпочел использовать ее и здесь.

Страница не должна перезагружаться после нажатия кнопки добавления поля.

Answer 1

Используйте метод добавления для простого написания сценариев. Однако, если вы хотите сделать это на более серьезной основе, прочитайте сценарии DOM .

См:

• Тинкер тут

• Дополнительная информация: Как динамически добавлять элементы формы с помощью JavaScript

Answer 2

Проверьте образец Как скрыть, показать или переключить ваш div .

Answer 3

Попробуйте методы after(), append() и appendTo() (см. Категория: Манипуляции ).

Answer 4

Без примера кода я могу только догадываться, в чем проблема, но похоже, что вы используете ввод данных вместо кнопки ввода, что приводит к отправке вашей формы и перезагрузке страницы вместо простого запуска "добавить элемент "функция.Если это так, вот что нужно сделать:

Измените кнопку добавления, чтобы она выглядела следующим образом:

 <input type="button" id="addOption" value="Add" />

Если это еще не сделано, добавьте прослушиватель событий в свой сценарий, когданажата кнопка:

 $("#addOption").click (function(){
 // Add stuff
}):

Следуйте советам Патрика о jQuery методах манипуляции.

Answer 5

var newSelectField = "<select><option>Option 1</option><option>Option 2</option></select>"; 

$("#formID").append(newSelectField);

//make sure your button is not of type="submit"
<input type="button" value="Add new field" />

Answer 6

Это очень легко сделать. Либо вы добавляете новый элемент, например так:

$("form").append($('<input type="text">');

ИЛИ, вы уже поместили HTML в форму, но сделали его невидимым с помощью CSS , а затем показали его так:

<form>
    <input type="text" class="hidden">
</form>

$("#theNewField").removeClass('hidden');