Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2012, 23:29
Новичок на форуме
Отправить личное сообщение для Escargot Посмотреть профиль Найти все сообщения от Escargot
 
Регистрация: 29.11.2012
Сообщений: 2

Функция, создающая новое поле 'input'
Здравствуйте!
Я только начинаю пробовать разбираться с javascript и с программированием в целом, поэтому заранее извиняюсь за кривые коды.
Задача такая: мне необходимо при клике на определенную кнопку создать новое поле загрузки картинки на сервер. Так же я хочу, чтобы поля выводили в столбик, т.е. под друг другом.
Сам код:
Код:
<head>
  <title>Загрузка файлов на сервер</title>
</head>
<body>
      <h2><p><b> Форма для загрузки файлов </b></p></h2>
      <form action="http://localhost/add.php" id = "frm" method="post" enctype="multipart/form-data" name="firstform">
      <input type="button" value='Добавить поле' onclick="newInput()"> <br>
      <input type="file" name="fname[]"><br> 
      <input type="submit" value="Загрузить" id="firstinput"><br>
      </form>

<script language="JavaScript">

function newInput() {
  var firstform = document.getElementsById('frm')
  var m=firstform.getElementsById('firstinput')
  var newinput = document.createElement('input')
  newinput.type = "file"
  newinput.name = "fname[]"
  firstform.insertBefore( newinput, m)
  
}
</script>
</body>
В этом случае ничего не выходит, поля не добавляются вообще.
Если я использую такой фрагмент:
function newInput() {
    myform = document.forms['myform']
    newinput = document.createElement('input')
    newinput.type = "file"
    newinput.name = "input[]"
    myform.appendChild(newinput)
}


то все прекрасно создается,но поля выводятся не так как мне нужно.
Первое добавляемое поле появляется по кнопкой "загрузить", а следующие справа от него и так далее.

Что не так в первом коде? Как же мне всё-таки расположить их под друг другом?

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 30.11.2012, 00:10
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Escargot,
А точку с запятой в конце каждой строки кто будет ставить за тебя ??? И метод правильно называется getElementById, есть только у документа.
function newInput() {
	  var firstform = document.getElementById('frm');
	  var m=document.getElementById('firstinput');
	  var newinput = document.createElement('input');
	  newinput.type = "file";
	  newinput.name = "fname[]";
	  firstform.insertBefore( newinput, m);
	}

Последний раз редактировалось Hoshinokoe, 30.11.2012 в 00:18.
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2012, 00:14
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Escargot,
<head>
  <title>Загрузка файлов на сервер</title>
</head>
<body>
      <h2><p><b> Форма для загрузки файлов </b></p></h2>
      <form action="http://localhost/add.php" id="frm" method="post" enctype="multipart/form-data" name="firstform">
      <input type="button" value='Добавить поле' onclick="newInput()"> <br>
      <input type="file" name="fname[]"><br>
      <input type="submit" value="Загрузить" id="firstinput"><br>
      </form>
 
<script language="JavaScript">
 
function newInput() {
  var firstform = document.getElementById('frm');
  var newinput = document.createElement('input');
  var br = document.createElement("br");
  newinput.type = "file";
  newinput.name = "fname[]";
  firstform.appendChild(newinput); firstform.appendChild(br);
}
</script>
</body>
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2012, 00:31
Новичок на форуме
Отправить личное сообщение для Escargot Посмотреть профиль Найти все сообщения от Escargot
 
Регистрация: 29.11.2012
Сообщений: 2

Hoshinokoe, на сколько я читала, можно не использовать точки с запятой, разве нет? По крайней мере, без них всё работает.
На счет метода - с буквой просто описалась, про сам метод почитаю повнимательнее.
lord2kim, спасибо! Даже не подумала о этом.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
IE 8: курсор, установленный в поле INPUT, пробивает стены насквозь! Маэстро Internet Explorer 4 21.06.2011 01:38
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Перенос id чекбокса в поле input azarubin Общие вопросы Javascript 7 14.01.2011 22:30