Почему введённые в поле данные исчезают при добавлении такого же нового поля?
Всем привет!
Если в приведённом примере выбрать файл, а затем нажать на "Добавить поля", то при добавлении нового поля уже введённые данные исчезают. Что неправильно? Подскажите, пожалуйста.
<!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>
|
Цитата:
Что происходит при изменении этого свойства: 1) Содержимое элемента полностью очищается. Все заполненные инпуты при этом исчезают. 2) Парсер парсит новый HTML и из него создает инпуты и все прочее. Используй appendChild() или insertAdjacentHTML |
<!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>
|
danik.js, спасибо за участие, но с appendChild() у меня почему-то не получилось. :(
DeV1doR, большое спасибо! Всё работает! Только я заменил 'afterend' на 'beforeEnd' и теперь все поля добавляются в конец списка. Странно, что insertAdjacentHTML я не нашел в "JavaScript Подробное руководство", Дэвид Флэнаган, 5-е издание. Тем не менее вопрос решён, ещё раз спасибо! |
javascript_pupil,
Да, так пожалуй правильней будет, прошляпил. Сам учусь) |
Цитата:
<!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 на файловых инпутах. Но тут можно что-нибудь придумать. |
danik.js, да, круто. Оказывается есть несколько решений и у каждого свои плюсы.
|
| Часовой пояс GMT +3, время: 18:51. |