jquery въпрос

[vankich]

Гледах този урок http://videotutorials-bg.com/lessons.php?action=viewsub&id=39&t=470 и се опитвам да си го преработя кодчето, за да ми добавя ново поле

<input type="file" name="fileatt"/>

и името му да се променя примерно fileatt1 fileatt2 и така. Обаче не усях

 

[adrian]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Добавяне на input поле към форма</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function() {
var i = $('input').size() + 1;
$('#add').click(function() {
$('<input type="file" name="fileatt' + i + '" />').appendTo('form');
i++;
});

$('#remove').click(function() {
$('input:last').remove();
i--;
});
});
</script>
</head>
<body>
<p>
<a href="#" id="add">Добави</a> | <a href="#" id="remove">Изтрии</a>
<form>
<input type="file" name="fileatt" />
</form>
</p>
</body>
</html>

Мисля, че може сложи проверка ако остане 1 поле при натискане на remove да не прави нищо, но сега излизам и нямам време да проверявам дали можеш да слагаш if, зaщото за jquery чета от вчера.

Не съм го тествал - виж дали работи
Не е трудно, просто трябва да се помисли малко

 

[vankich]

adrian +1
И ако успееш да направиш тази проверка, за която говориш, ще е идеално

 

[adrian]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Добавяне на input поле към форма</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function() {
var i = $('input').size() + 1;
$('#add').click(function() {
$('<input type="file" name="fileatt' + i + '" />').appendTo('form');
i++;
});

$('#remove').click(function() {
if (i<3) {
} else {
$('input:last').remove();
i--;
}
});
});
</script>
</head>
<body>
<p>
<a href="#" id="add">Добави</a> | <a href="#" id="remove">Изтрии</a>
<form>
<input type="file" name="fileatt" />
</form>
</p>
</body>
</html>

Числото в червено ти показва колко полета могат да останат минимум. За 1 поле е 3, за 2 -4, за 3 - 5 и т.н.

Хубаво е да си зададеш някакъв клас за тези инпут полета и в кода да сложиш и класа, защото ако имаш още input полета ще изкарва различен брой.

Успех!

 

[vankich]

Хубаво е да си зададеш някакъв клас за тези инпут полета и в кода да сложиш и класа, защото ако имаш още input полета ще изкарва различен брой.

Нещо такова?

$('<input type="file" class="attached" name="fileatt' + i + '" />').appendTo('form');

 

[adrian]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Добавяне на input поле към форма</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function() {
var i = $('input.attached').size() + 1;

$('#add').click(function() {
$('<input type="file" name="fileatt"' + i + '" class="attached" />').appendTo('form');
i++;
});

$('#remove').click(function() {
if (i<3) {
} else {
$('input.attached:last').remove();
i--;
}
});
});
</script>
</head>
<body>
<p>
<a href="#" id="add">Добави</a> | <a href="#" id="remove">Изтрии</a>
<form>
<input type="file" name="fileatt" class="attached" />
</form>
</p>
</body>
</html>

Така ще предотвратиш грешки по изпълнението ако случайно на същата страница имаш и други input полета.