Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите с input (https://javascript.ru/forum/jquery/9725-pomogite-s-input.html)

SleepTT 03.06.2010 09:43
Помогите с 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 то это поле уберается

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

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

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

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

micscr 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 03.06.2010 10:50
Цитата:
Сообщение от micscr (Сообщение 57657)
Добавление:
$('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 03.06.2010 10:58
конечно можно, правда чуть по другому. Храните в переменной флаг - число начинающееся с 97, и при добавлении инкрементируйте его. А вставляйте Символ с кодом равным этому числу:
alert(String.fromCharCode(97) + '\n' + String.fromCharCode(98) + '\n' + String.fromCharCode(99))

SleepTT 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>

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

Gvozd 03.06.2010 12:34
Цитата:
Сообщение от SleepTT
Но так я и не понял почему добавленный input не удаляется
аналогичная проблема

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


Часовой пояс GMT +3, время: 17:47.