aggiungere campi dinamicamente

**emu86** · 31-03-2006, 14:37

Ciao a tutti!!!
Avrei un quesito da farvi: come posso aggiungere dinamicamente dei campi ad un form?

Preticamente io ho un form con il quale l'utente va a caricare uno o più file (immagini). Io volevo che appena il form viene caricato si presenti un solo campo di input di tipo file con, accanto, un pulsante con scritto + o aggiungi (insomma, qualcosa che faccia capire all'utente che con quel pulsante aggiunge un altro campo per caricare un secondo file.
Come posso fare? io avevo provato così, ma non funziona:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<script language="javascript">
function aggiungi() {
	var nfile;
	nfile = 1;
	nfile = nfile++;
	document.write('
<input type="file" name="file' + nfile + '"  />
<button onclick="javascript:aggiungi()">+</button>');
	document.FormFile.files.value = nfile;
}
</script>
</head>

<body>
<form name="FormFile" action="">
<input type="file" name="file1"  />
<button onclick="javascript:aggiungi()">+</button>


<input type="hidden" value="1" />
</form>
</body>

</html>

Ringrazio anticipatamente delle risposte....

PS: é possibile inserire un filtro per le immagini in maniera tale che il controllo avvenga direttamente quando l'utente seleziona il file oppure devo per forza farlo sul file che esegue le operazioni di caricamento?

Grazie mille

**Andrea1979** · 31-03-2006, 14:50

Qualcosa del genere?

codice:

<html>
<head>
<script language="javascript">
function addfield() {
  document.forms[0].innerHTML = '<input type="file" name="fileupload[]" />
'+document.forms[0].innerHTML;
}
</script>
<body>
<form>
<input type="file" name="fileupload[]" /><input type="button" onclick="addfield();" value="Carica più file" />

<input type="submit" value="Submit" />
</form>
</body>
</html>

Per la seconda domanda, la limitazione del tipo di file, non so risponderti. A pelle direi di no, ossia che il controllo andrebbe fatto lato server

**emu86** · 31-03-2006, 15:20

perfetto...
ma è possibile aggiungere la funzione per togliere un campo? magari aggiungendo il pulsate per eliminare vicino ad ogni campo.
un'altra curiosità: il pulsante che inserisce un nuovo campo, posso metterlo dove voglio (ad esempio in basso o in alto oppure sia in alto che in basso) o deve rimanere per forza dove sta?

**Andrea1979** · 31-03-2006, 19:44

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing File Fields</title>
<script language="JavaScript" type="text/javascript">
<!--
var addedField ='<input type="file" name="file[]" />
';
var baseForm = '<input type="file" name="file[]" /><input name="addF" type="button" id="addF" value="Add Fields" onclick="modifyForm(1);" /><input name="remF" type="button" id="remF" value="Remove Fields" onclick="modifyForm(-1);" />';
var counter = 0;

function modifyForm(n) {
  counter += n;
  var newForm = "";
  for (var i=0; i < counter; i++) {
    newForm += addedField;
  }
  document.form1.innerHTML = newForm+baseForm;
}

-->
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <input type="file" name="file[]" /><input name="addF" type="button" id="addF" value="Add Fields" onclick="modifyForm(1);" /><input name="remF" type="button" id="remF" value="Remove Fields" onclick="modifyForm(-1);" />
</form>
</body>
</html>

**emu86** · 31-03-2006, 21:00

però il pulsante remove field si vede solamente vicino al pulsante add field, mentre io avevo chiesto, se possibile, che il pulsante fosse vicino ad ogni riga per eliminare il relativo campo. in maniera tale che possa eliminare, ad esempio, il secondo, il quinto e il settimo campo senza dover eliminare i campi giusti.

Grazie

**riccardo1975** · 08-04-2006, 19:49

Ho un pò scopiazzato e modificando il form ho ottenuto questo:

<html>
<head>
<script language="javascript">
function addfield() {
document.forms[0].innerHTML = '<input type="text" name="file[]" />
'+document.forms[0].innerHTML;
}
</script>
<body>
<form name="FormFile" method="post" action="risultati.php">
<input type="text" name="file[]" />
<input type="button" onclick="addfield();" value="Aggiungi" />

<input type="submit" value="Submit" />
</form>
</body>
</html>

Mi chiedo dove stanno i valori che io negli n campi di testo ho inserito??? come posso visualizzarli a video nel file risultati.php?????

**lordmark** · 14-10-2006, 02:49

il primo codice qui mi è perfetto per un modulo che sto realizzando, però i nuovi campi dinamici vengono posizionati dentro al div sopra alla tabella che incolonna i vari form, invece che di seguito sotto al campo text base...

io ho usato:

Codice PHP:


<script language="javascript">

function addfield() {

  document.forms[0].innerHTML = ' larghezza <input type="text" size="4" maxlength="4" name="l" /> altezza <input type="text" size="4" maxlength="4" name="h" />
</td></tr>'+document.forms[0].innerHTML;

}

</script>

e quindi

Codice PHP:


<tr>

            <td align="center">Misure indicative (in cm):

</td>

            <td> larghezza <input type="text" size="4" maxlength="4" name="l" /> altezza <input type="text" size="4" maxlength="4" name="h" />

            
<input type="button" onclick="addfield();" value="Aggiungi un altro campo" /></td>

            </tr>

come posso gestire il punto di creazione del nuovo text? credo c'entri quel forms[0]....però sono compleatmente digiuno di js....

grazie

**lordmark** · 14-10-2006, 23:25

ho risolto applicando questo script...

ora però ho il problema di inviare i dati inseriti alla pagina php che li processa: in pratica, prima ricevevo $valore, adesso dovrei fare in modo che ad ogni field aggiunto venga assegnato value="$valore+1" ed anche trasmettere alla pagina php quanti campi fields aspettarsi.

come potrei fare? grazie

**cavicchiandrea** · 14-10-2006, 23:59

Originariamente inviato da lordmark
ho risolto applicando questo script...

ora però ho il problema di inviare i dati inseriti alla pagina php che li processa: in pratica, prima ricevevo $valore, adesso dovrei fare in modo che ad ogni field aggiunto venga assegnato value="$valore+1" ed anche trasmettere alla pagina php quanti campi fields aspettarsi.

come potrei fare? grazie

leggi qua

**lordmark** · 15-10-2006, 18:33

grazie, sembra fare al caso mio ma non capisco abbastanza il codice da poterlo adattare...

posto la il problema

Discussione: aggiungere campi dinamicamente

Strumenti discussione

Ricerca discussione

Visualizza

aggiungere campi dinamicamente

Permessi di invio