Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2010, 09:43
Новичок на форуме
Отправить личное сообщение для SleepTT Посмотреть профиль Найти все сообщения от SleepTT
 
Регистрация: 03.06.2010
Сообщений: 8

Помогите с input
Люди добрые подскажите затылку как jquery пользоваться
Нужно сделать примерно такое:
...
<form action="..." method="post">
<input id="a" name="a" value="a:" type="text" /> <img src="/img/add.png" /> <img src="/img/delete.png" /><br />
</form>
...

При нажатие на add чтобы добавлялось новое поле:
...
<form action="..." method="post">
<input id="a" name="a" value="a:" type="text" /> <img id="add" src="/img/add.png" /><br />
<input id="b" name="b" value="b:" type="text" /> <img id="delete" src="/img/delete.png" /><br />
</form>
...

Если тыкать на delete то это поле уберается
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2010, 09:57
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от SleepTT
как jquery пользоваться
у него отличная документация, и помимо этого в инете огромное количество статей, обучающих основам jQuery
Сообщение от SleepTT
Нужно сделать примерно такое:
когда приложите усилия к изучению jQuery, эту задачу вы сможете решить сами.
Помимо этого ваша задача является типичной, и про нее написано также огромное количество статей, и тем на форуме
гуглите "динамические формы"

PS
Цитата:
Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2010, 10:00
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,571

Добавление:
$('form[name=form1]').append('<input  id="b" name="b" value="b:" type="text" /> <img id="delete" src="/img/delete.png"  /><br  />');

Удаление попробуй сам сделать, что не получится пиши.
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2010, 10:50
Новичок на форуме
Отправить личное сообщение для SleepTT Посмотреть профиль Найти все сообщения от SleepTT
 
Регистрация: 03.06.2010
Сообщений: 8

Сообщение от micscr Посмотреть сообщение
Добавление:
$('form[name=form1]').append('<input  id="b" name="b" value="b:" type="text" /> <img id="delete" src="/img/delete.png"  /><br  />');

Удаление попробуй сам сделать, что не получится пиши.
Спасибо добавлять научился Удалять тоже правда не один а все input-ы а возможно сделать чтобы первому добавленому input-у присваивалось name=b второму name=c и т.д?

Еще проблема с удалением есть если нажать на <img id="delete" src="/img/delete.png" /> который сразу на странице есть то все удаляется если нажимать на добавленную картинку не чего не происходит

Последний раз редактировалось SleepTT, 03.06.2010 в 10:53.
Ответить с цитированием
  #5 (permalink)  
Старый 03.06.2010, 10:58
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,571

конечно можно, правда чуть по другому. Храните в переменной флаг - число начинающееся с 97, и при добавлении инкрементируйте его. А вставляйте Символ с кодом равным этому числу:
alert(String.fromCharCode(97) + '\n' + String.fromCharCode(98) + '\n' + String.fromCharCode(99))
Ответить с цитированием
  #6 (permalink)  
Старый 03.06.2010, 12:17
Новичок на форуме
Отправить личное сообщение для SleepTT Посмотреть профиль Найти все сообщения от SleepTT
 
Регистрация: 03.06.2010
Сообщений: 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
  
  $('.add').click(function(){						   
     $('form[name=form1]').append('<div><input id="c" name="c" value="c:" type="text" /> <img class="delete" src="/img/delete.png" /></div>');

  });
  $("div .delete").click(function () {
     $(this).parents('div').remove();
  });

});
</script>
</head>

<body>
<form name="form1" action="test.php" method="post">
<div><input id="a" name="a" value="a:" type="text" /> <img class="add" src="/img/add.png" /> <img class="delete" src="/img/delete.png" /></div>
<div><input id="b" name="b" value="b:" type="text" /> <img class="delete" src="/img/delete.png" /></div>
<input name="" type="submit" />
</form>
</body>
</html>

Вот что получилось Но так я и не понял почему добавленный input не удаляется
Ответить с цитированием
  #7 (permalink)  
Старый 03.06.2010, 12:34
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от SleepTT
Но так я и не понял почему добавленный input не удаляется
аналогичная проблема
Ответить с цитированием
  #8 (permalink)  
Старый 04.06.2010, 10:21
Новичок на форуме
Отправить личное сообщение для SleepTT Посмотреть профиль Найти все сообщения от SleepTT
 
Регистрация: 03.06.2010
Сообщений: 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
var i = 1
  $('.add').click(function(){                         
	 $('p:first').append('<div><input type="text" /> <img class="delete" src="/img/delete.png" /></div>');
	 
	 i++
	 newObj.find('div input').attr('value', 'a' + i);
	 
	 $("div .delete").click(function () {
	    $(this).parents('div').remove();
	 });
	  	 
  });
	
});
</script>
</head>

<body>
<form action="test.php" method="post">
<div><input name="a" value="a:" type="text" /> <img class="add" src="/img/add.png" /></div>
<p></p>
<input name="" type="submit" />
</form>
</body>
</html>

В чем проблема подскажите ) Почему значение Value не присваевается к добавленому input-у
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка нескольких file input Temlekur Работа 8 21.01.2010 18:30
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55