Как добавить поля в форму динамически
поэтому моя форма выглядит так:
<form action="/reservation-add" method="post"> <select id="dropdownlist"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input></input> </form> Если выбран, например, 3, он должен добавить 3 новых входа (может быть массив, чтобы принимать все значения). Я знаю, что мне нужно использовать javascript, но я не знаю, как это сделать.
Используйте этот способ:
$("#dropdownlist").change(function () { var numInputs = $(this).val(); for (var i = 0; i < numInputs; i++) $("#inputArea").append('<input name="inputs[]" />'); });
Иметь другой div , с идентификатором «inputArea»:
<div id="inputArea"></div>
отрывок
$("#dropdownlist").change(function () { var numInputs = $(this).val(); for (var i = 0; i < numInputs; i++) $("#inputArea").append('<input name="inputs[]" />'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="dropdownlist"> <option>Select...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <div id="inputArea"></div>
$("#dropdownlist").on("change",function(e){ for(i=0; i < $(this).val() ;i++){ $("form").append($("<input type='text'/>")); } })
<form action="/reservation-add" method="post" id="appendform"> <select id="dropdownlist"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input></input> </form>
Код Jquery
$(document).ready(function () { $('#dropdownlist').on('change',function () { var howmuch = $(this).val(); var appendhtml = ''; for (i = 0; i < howmuch; i++) { appendhtml+= "<input name="+i+" value="">"; } $('.appendform').append(appendhtml); }); });
попробуй это
<script> function fireChange(val) { var form = document.forms[0]; if(val) { for (var i = 0; i < val; i++) { var in = document.createElement('input'); form.appendChild(in); } } } </script> <form action="/reservation-add" method="post" onchange="fireChange(this.value)"> <select id="dropdownlist"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input></input> </form>
Шаг 1 — Добавьте идентификатор в форму
Шаг 2. Используйте метод jquery onchange, код, показанный ниже.
<form action="/reservation-add" method="post" id="myForm"> <select id="dropdownlist"> <option value="1"></option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </form> $('#dropdownlist').on("change",function() { for(var i=0;i<this.value;i++) { $("#myForm").append("<input type='text' name='myname[]'/> <br>"); } });