Форум

lastnext · #1 (**permalink**) 23.06.2015, 11:53

Добрый день! Не ругайтесь сильно, я только неделю изучаю javascript и jquery. Я хочу динамически добавлять input в форму.

Вот сама форма

<form action="fooddel.php" method="POST" id='food_del' name="food_del">
								<label class="">Ваше имя:</label><br />
								<input name="food_name" type="text" id="food_name" size="36"><br />
								<label class="">Ваша фамилия:</label><br />
								<input name="food_names" type="text" id="food_sname" size="36"><br />
								<label class="">Адрес доставка:</label><br />
								<input name="food_add" type="text" id="food_add" size="36"><br /><br />
								<label class="">Список товаров:</label><br />
								<div class="inputs">
								<label class="">Товар №1:</label><br />
								<input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
								<label class="">Товар №2:</label><br />
								<input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
								<label class="">Товар №3:</label><br />
								<input name="food_goods[]" type="text" id="food_goods_one" size="36">
								<a href="#" id="add" class="btn btn-small btn-primary">Добавить товар</a>
								</div>
								<input type="submit" name="food_send" class="btn btn-large btn-primary" value="Отправить заявку">
							</form>

Вот код jQ

$(function(){
$('#add').click(function(){
$('.inputs').append('<br /><label class="">Товар №i:</label><br /><input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />');
return false;
}); // Конец click

Данный код работает, поля добавляются, но кнопка остается на 3-м input. Попробовал изменить код так:

$(function(){
$('#add').click(function(){
$('.inputs').append('<br /><label class="">Товар №i:</label><br /><input name="food_goods[]" type="text" class="append_goods" id="food_goods_one" size="36"><br />');
$('#add').remove().find('.append_goods').append('<input type="submit" name="food_send" class="btn btn-large btn-primary" value="Отправить заявку">');
return false;
}); // Конец click

Но кнопка просто удаляется и все. Что я делаю не так? И как можно сделать так, чтобы добавлялось не <label>Товар №i:</label>, а <label>Товар №4:</label>, <label>Товар №5:</label> и т.д.

Заранее большое спасибо!

jackdempsey2015 · #2 (**permalink**) 23.06.2015, 13:20

<html>

<head>
<meta charset="utf-8">
</head>

<body>

<form action="fooddel.php" method="POST" id='food_del' name="food_del">
                                <label class="">Ваше имя:</label><br />
                                <input name="food_name" type="text" id="food_name" size="36"><br />
                                <label class="">Ваша фамилия:</label><br />
                                <input name="food_names" type="text" id="food_sname" size="36"><br />
                                <label class="">Адрес доставка:</label><br />
                                <input name="food_add" type="text" id="food_add" size="36"><br /><br />
                                <label class="">Список товаров:</label><br />
                                <div class="inputs">
                                <label class="">Товар №1:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
                                <label class="">Товар №2:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
                                <label class="">Товар №3:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36">
                                <a href="#" id="add" class="btn btn-small btn-primary">Добавить товар</a>
                                </div>
                                <input type="submit" name="food_send" class="btn btn-large btn-primary" value="Отправить заявку">
                            </form>

<script>



i=3
add.onclick=function(){
 var s=document.createElement("span")
 s.innerHTML='<br /><label class="">Товар №i:'+(++i)+'</label><br /><input name="food_goods[]" type="text" id="food_goods_one" size="36">'
 document.querySelector("form div").appendChild(s)
}


</script>
</body>
</html>

lastnext · #3 (**permalink**) 23.06.2015, 13:25

jackdempsey2015,
Спасибо большое! Товар добавляется с нужным номером, но кнопка добавления все равно висит рядом с третьим полем. Как это можно исправить?

jackdempsey2015 · #4 (**permalink**) 23.06.2015, 13:56

Так не пойдет?

<html>

<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>

<form action="fooddel.php" method="POST" id='food_del' name="food_del">
                                <label class="">Ваше имя:</label><br />
                                <input name="food_name" type="text" id="food_name" size="36"><br />
                                <label class="">Ваша фамилия:</label><br />
                                <input name="food_names" type="text" id="food_sname" size="36"><br />
                                <label class="">Адрес доставка:</label><br />
                                <input name="food_add" type="text" id="food_add" size="36"><br /><br />
                                <label class="">Список товаров:</label><br />
                                <div class="inputs">
                                <label class="">Товар №1:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
                                <label class="">Товар №2:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36"><br />
                                <label class="">Товар №3:</label><br />
                                <input name="food_goods[]" type="text" id="food_goods_one" size="36">
                                </div>
                                <a href="#" id="add" class="btn btn-small btn-primary">Добавить товар</a>
                                <input type="submit" name="food_send" class="btn btn-large btn-primary" value="Отправить заявку">
                            </form>

<script>



i=3
add.onclick=function(){
 var s=document.createElement("span")
 s.innerHTML='<br /><label class="">Товар №i:'+(++i)+'</label><br /><input name="food_goods[]" type="text" id="food_goods_one" size="36">'
 document.querySelector("form div").appendChild(s)
}


</script>
</body>
</html>

рони · #5 (**permalink**) 23.06.2015, 14:16

return false в конец onclick иначе страница прыгает

lastnext · #6 (**permalink**) 24.06.2015, 09:03

jackdempsey2015,
рони,
Всем большое спасибо!)

Форум

Справочник

Discord чат

Курсы javascript