Вставка элемента в конец input
Добрый день! Не ругайтесь сильно, я только неделю изучаю 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> и т.д. Заранее большое спасибо! |
<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>
|
jackdempsey2015,
Спасибо большое! Товар добавляется с нужным номером, но кнопка добавления все равно висит рядом с третьим полем. Как это можно исправить? |
Так не пойдет?
<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>
|
:write: return false в конец onclick иначе страница прыгает
|
jackdempsey2015,
рони, Всем большое спасибо!) |
| Часовой пояс GMT +3, время: 04:01. |