dodawanie pól input, automatyczne dodawanie pól formularza Opcje

[fokra]

Sprawa jest taka, że nie znam JS, a potrzebuję formularza, który dodawałby pola typu 'file' do formularza nie kasując zapisanych wartości w poprzednich polach.. Konkretnie to chcę przesłać na serwer nieznaną wcześniej ilośc plików (np fotek) i po dodaniu każdego pliku chciałbym, żeby istniała możliwość bądź wysłania tego co jest bądź dołożenia kolejnego pliku (dopisania do formularza kolejnego pola input typu file).

[gekon]

Ja bym to zrobił mniej więcej tak:

Kod

addFileInput = function(parentElement){
var inputName = prompt('Atrybut name dla kolejnego inputa', ' ');
var fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.name = inputName;
fileInput.value = '';
parentElement.appendChild(fileInput,parentElement.firstChild);
}

window.onload=function(){
var insert = document.getElementById('addFileInput');
if(insert){
  insert.onclick = function(){
   addFileInput(insert.parentNode);
  }
}
else { return false; }
}

[HTML] pobierz, plaintext 
<form id="fileForm" action="plik.php" method="get">
<input type="button" id="addFileInput" value="dodaj pole pliku">
<input type="submit" value="wyslij">
<input type="file" name="imie" >
</form>
[HTML] pobierz, plaintext 

[fokra]

Dzięki działa świetnie.. ale tylko pod IE
Niastety mam (i większość moich znajomków) mozillkę 1.7.2... a tu już sprawa wygląda gorzej.. po kliknięciu buttona 'dodaj plik' nie wskakuje nowe pole input..
Mam jednak coś co działa tylko.. sorki ale proszę mi wybaczyć zupełną zieloność nie wiem gdzie wstawić znacznik nowej lini żeby to jakoś wyglądało na stronce (no żeby nowy input wyskakiwał w nowym wierszu a nie obok poprzedniego.. No i czy to się da jakoś przerobić na zbilżony do pospolitego formularza (gdzie mogę określić metodę i skrypt docelowy php)w części kodu html?
oto kody JS i html

Kod

var countInputs = 0;
function addInput(id)
{

var oDiv = document.getElementById(id);
var inputElement = document.createElement("input");
inputElement.setAttribute("name","userfile_"+countInputs);
inputElement.setAttribute("type","file");
oDiv.appendChild(inputElement);
countInputs++;
}

[HTML] pobierz, plaintext 
<div id="inputLayer"></div>
<a href="javascript:addInput('inputLayer')">Dodaj plik</a>
[HTML] pobierz, plaintext 

[TomASS]

Zademonstruje Ci na przykładzie selecta:

Kod

function $(id){
return document.getElementById(id);
}

function make_select(div){
    var select = document.createElement("select");
    select.name = "przeladunek_z["+numer+"][]";    
    var br = document.createElement("br");
    $(div).appendChild(br);                           //o cała tajemnica <Br>
    $(div).appendChild(select);    
}

[HTML] pobierz, plaintext 
<form method="post" action="plik.php">
<div id="inputLayer"></div>
<a href="make_select('inputLayer');">Dodaj plik</a>
</form>
[HTML] pobierz, plaintext 

[gekon]

Zamieniłbym jednak diva na fieldset.

A co do mojego przykładu, wystarczy usunąć linijkę:

Kod

fileInput.value = '';

i stara Mozilla powinna też łykać.

[fokra]

dzięki serdeczne
ale niestety ten nie działa wogóle (mimo poprawienia błędu w linku do funkcji) ani w mozillce ani w IE
cóż mimo wszystko dzięki.. już mam 3 różniste przykłady rozwiązania to może w końcu pojmę jak to-to (javascript) działa
w każdym razie Dzięki ( również za to że nie dostałem tu wiązanki określającej precyzyjnie poziom mojej tępoty w zakresie JS.. )

[fokra]

witam wyjadaczy

ktoś może wie dlaczego to mi działa w mozilli a w IE nie che??

Kod

<script type="text/javascript">
function addInput(id)
{
var countInputs = 0;
var Div = document.getElementById(id);
var inputElement = document.createElement("input");
var br = document.createElement("br");
inputElement.setAttribute("name","userfile_"+countInputs);
inputElement.setAttribute("type","file");
Div.appendChild(inputElement);
Div.appendChild(br);
countInputs++;
}
</script>

i

[HTML] pobierz, plaintext 
<form method="post" action="plik.php" enctype= "multiple">
<div id="inputLayer"></div>
<br>
<a style=text-decoration:none href="javascript:addInput('inputLayer')"><button>dodaj</button></a>
<input type="submit" value="wyslij">
[HTML] pobierz, plaintext 

[mike]

Coś mi się widzi że o HTMLu słyszałeś tylko z daleka i niewyraźnie

[HTML] pobierz, plaintext 
<script type="text/javascript">
function addInput(id)
{
    var countInputs = 0;
    var Div = document.getElementById(id);
    var inputElement = document.createElement("input");
    var br = document.createElement("br");
    inputElement.setAttribute("name","userfile_"+countInputs);
    inputElement.setAttribute("type","file");
    Div.appendChild(inputElement);
    Div.appendChild(br);
    countInputs++;
}
</script>
 
<form method="post" action="plik.php" enctype="multipart/form-data">
  <div id="inputLayer"></div>
  <br>
  <input type="button" onclick="addInput('inputLayer'); return false;" value="dodaj" />
  <input type="submit" value="wyslij" />
</form>
[HTML] pobierz, plaintext 

[yasiek]

A jak dorzucić do tego kodu funkcję odwrotną - po kliknięciu znikają kolejne pola, które wcześniej się dodało? a gdybym chciał na przykład oprócz file dodać jeszcze select z ustalonymi wartościami do wyboru...?

Ten post edytował yasiek 29.10.2006, 14:21:42

[wowerson]

Coś mi się widzi że o HTMLu słyszałeś tylko z daleka i niewyraźnie

[HTML] pobierz, plaintext 
<script type="text/javascript">
function addInput(id)
{
    var countInputs = 0;
    var Div = document.getElementById(id);
    var inputElement = document.createElement("input");
    var br = document.createElement("br");
    inputElement.setAttribute("name","userfile_"+countInputs);
    inputElement.setAttribute("type","file");
    Div.appendChild(inputElement);
    Div.appendChild(br);
    countInputs++;
}
</script>
 
<form method="post" action="plik.php" enctype="multipart/form-data">
  <div id="inputLayer"></div>
  <br>
  <input type="button" onclick="addInput('inputLayer'); return false;" value="dodaj" />
  <input type="submit" value="wyslij" />
</form>
[HTML] pobierz, plaintext 

Teraz take pytanko..jak przeiterować przez tak utworzoną tablicę w PHPie?

[kryspi]

Ja sie przylacze do tematu pozwole sobie zapytac sie w jaki sposob dobrac sie do wartosci tych pola dynamicznie dodawanych, zeby np je walidowac. Mam pola dodawane tak jak na ponizszym przykladzie ale nie wiem w jaki sposob przy pomocy JavaScriptu odczytac kolejne wartosci z powstalej tablicy:

[PHP] pobierz, plaintext 
<?php
var div = document.createElement('div');
var data_wyjazdu = document.createElement('input');
data_wyjazdu.setAttribute('type', 'text');
data_wyjazdu.setAttribute('name', 'data_wyjazdu[]');
data_wyjazdu.setAttribute('value', '0000-00-00');
div.appendChild(data_wyjazdu);
?>
[PHP] pobierz, plaintext 

[gekon]

@yasiek: dodawać id dla kazdego inputa i usuwac element odwolujac się do rodzica, np.:

[HTML] pobierz, plaintext 
function deleteMe(handler){
 handler.onclick = function{
  this.parentNode.removeChild(this);
 }
}
[HTML] pobierz, plaintext 

@wowerson: Można zmienić name na userfile[+countInputs+], wtedy jest regularna tablica.
@kryspi: getElementsByTagName('input')