Показать сообщение отдельно
  #1 (permalink)  
Старый 23.06.2015, 11:53
Новичок на форуме
Отправить личное сообщение для lastnext Посмотреть профиль Найти все сообщения от lastnext
 
Регистрация: 23.06.2015
Сообщений: 8

Вставка элемента в конец 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> и т.д.

Заранее большое спасибо!
Ответить с цитированием