Форум

javascript_pupil · #1 (**permalink**) 29.01.2015, 00:47

Всем привет!

Если в приведённом примере выбрать файл, а затем нажать на "Добавить поля", то при добавлении нового поля уже введённые данные исчезают. Что неправильно? Подскажите, пожалуйста.

<!doctype html>
<html>
<head>
<script type="text/javascript">
function addField() {
document.getElementById("file2upload").innerHTML += '<br><input type="file" multiple="multiple" name="upload_file" size="50" value="">';
}
</script>
<title>Title</title>
</head>
<body>
<form method="post" action="/upload.cgi" enctype="multipart/form-data">

Загрузить файл: <div id="file2upload"><input type="file" multiple="multiple" name="upload_file" size="50" value=""></div>
<br><a href="#" onClick="addField(); return false;">Добавить поля</a>

<input type="submit" name="abc" value="Загрузить"></form>

</body>
</html>

danik.js · #2 (**permalink**) 29.01.2015, 01:26

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

Что неправильно?

innerHTML
Что происходит при изменении этого свойства:
1) Содержимое элемента полностью очищается. Все заполненные инпуты при этом исчезают.
2) Парсер парсит новый HTML и из него создает инпуты и все прочее.

Используй appendChild() или insertAdjacentHTML

DeV1doR · #3 (**permalink**) 29.01.2015, 02:48

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript">
	function addField() {

		document.getElementById("file2upload").insertAdjacentHTML('afterend','<input type="file" multiple="multiple" name="upload_file" size="50" value=""><br>');

	}

</script>

<title>Title</title>

</head>

<body>
	<form method="post" action="/upload.cgi" enctype="multipart/form-data">
	Загрузить файл: <div id="file2upload"><input type="file" multiple="multiple" name="upload_file" size="50" value=""></div>
	<br><a href="#" onClick="addField(); return false;">Добавить поля</a>
	<input type="submit" name="abc" value="Загрузить"></form>
</body>
</html>

javascript_pupil · #4 (**permalink**) 29.01.2015, 21:54

danik.js, спасибо за участие, но с appendChild() у меня почему-то не получилось.

DeV1doR, большое спасибо! Всё работает! Только я заменил 'afterend' на 'beforeEnd' и теперь все поля добавляются в конец списка. Странно, что insertAdjacentHTML я не нашел в "JavaScript Подробное руководство", Дэвид Флэнаган, 5-е издание. Тем не менее вопрос решён, ещё раз спасибо!

DeV1doR · #5 (**permalink**) 29.01.2015, 21:59

javascript_pupil,
Да, так пожалуй правильней будет, прошляпил. Сам учусь)

danik.js · #6 (**permalink**) 29.01.2015, 22:49

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

с appendChild() у меня почему-то не получилось

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript">
    function addField() {
        var fieldset = document.getElementById("file2upload");
        var firstField = fieldset.querySelector('.field');
        var clonedField = firstField.cloneNode(true);
        clonedField.value = '';
        fieldset.appendChild(clonedField);
    }
</script>
 
<title>Title</title>
 
</head>
 
<body>
    <form method="post" action="/upload.cgi" enctype="multipart/form-data">
    Загрузить файл: <div id="file2upload">
    <div class="field">
        <input type="file" multiple="multiple" name="upload_file" size="50" />
    </div>
    </div>
    <br><a href="#" onClick="addField(); return false;">Добавить поля</a>
    <input type="submit" name="abc" value="Загрузить"></form>
</body>
</html>

При клонировании инпута его value также сохраняется. Поэтому нужно очистить .value, но тут проблемка - старые IE не дают менять value на файловых инпутах. Но тут можно что-нибудь придумать.

javascript_pupil · #7 (**permalink**) 30.01.2015, 01:30

danik.js, да, круто. Оказывается есть несколько решений и у каждого свои плюсы.

Форум

Справочник

Discord чат

Курсы javascript