Форум

SleepTT · #1 (**permalink**) 03.06.2010, 09:43

Люди добрые подскажите затылку как 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 то это поле уберается

Gvozd · #2 (**permalink**) 03.06.2010, 09:57

Сообщение от SleepTT

как jquery пользоваться

у него отличная документация, и помимо этого в инете огромное количество статей, обучающих основам jQuery

Сообщение от SleepTT

Нужно сделать примерно такое:

когда приложите усилия к изучению jQuery, эту задачу вы сможете решить сами.
Помимо этого ваша задача является типичной, и про нее написано также огромное количество статей, и тем на форуме
гуглите "динамические формы"

PS

Цитата:

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

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

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

micscr · #3 (**permalink**) 03.06.2010, 10:00

Добавление:

$('form[name=form1]').append('<input  id="b" name="b" value="b:" type="text" /> <img id="delete" src="/img/delete.png"  /><br  />');

Удаление попробуй сам сделать, что не получится пиши.

SleepTT · #4 (**permalink**) 03.06.2010, 10:50

Сообщение от 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" /> который сразу на странице есть то все удаляется если нажимать на добавленную картинку не чего не происходит

micscr · #5 (**permalink**) 03.06.2010, 10:58

конечно можно, правда чуть по другому. Храните в переменной флаг - число начинающееся с 97, и при добавлении инкрементируйте его. А вставляйте Символ с кодом равным этому числу:

alert(String.fromCharCode(97) + '\n' + String.fromCharCode(98) + '\n' + String.fromCharCode(99))

SleepTT · #6 (**permalink**) 03.06.2010, 12:17

<!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 не удаляется

Gvozd · #7 (**permalink**) 03.06.2010, 12:34

Сообщение от SleepTT

Но так я и не понял почему добавленный input не удаляется

аналогичная проблема

SleepTT · #8 (**permalink**) 04.06.2010, 10:21

<!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-у

Форум

Справочник

Discord чат

Курсы javascript