Ciao,
come è possibile realizzare un 'form dinamico' del genere:
<INPUT 1> [link:elimina]
<INPUT 2> [link:elimina]
...
[link:inserisci nuovo input]
In modo che l'utente possa aggiungere infiniti input a piacere e li possa eliminare uno alla volta. Ovviamente, almeno un input deve sempre essere visibile (non deve esserci la possibilità di poter eliminare tutti gli input).
Ho provato a fare una cosa del genere in asp, ma ho abbandonato.
Grazie a chiunque mi voglia dare una mano
Sicut Nox Silentes
Ragazzi, bellissimo codice. L'ho modificato per le mie esigenze, ma sto impazzendo per cercare la soluzione che è sicuramente sotto il mio naso.
Una volta generate le caselle del form, che avrenno un name testo0, testo1, testo2, etc, come le trasmetto in php?
Il codice è questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aggiungi / rimuovi campi input</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
if(document.createElement && document.getElementById && document.getElementsByTagName) {
// crea elementi
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oTd2=document.createElement("TD");
var oField=document.createElement("INPUT");
var oFieldB=document.createElement("INPUT");
var oFieldC=document.createElement("INPUT");
var oFieldD=document.createElement("INPUT");
var oButt=document.createElement("INPUT");
// setta attributi
oField.setAttribute("type","text");
oField.setAttribute("name","testo"+num);
oField.setAttribute("placeholder","Codice prodotto");
oFieldB.setAttribute("type","text");
oFieldB.setAttribute("name","testoB"+num);
oFieldB.setAttribute("placeholder","Descrizione");
oFieldC.setAttribute("type","text");
oFieldC.setAttribute("name","testoC"+num);
oFieldC.setAttribute("placeholder","Formato");
oFieldD.setAttribute("type","text");
oFieldD.setAttribute("name","testoD"+num);
oFieldD.setAttribute("placeholder","Quantita'");
oButt.setAttribute("type","button");
oButt.setAttribute("value","rimuovi");
// setta gestore evento
if(oButt.attachEvent) oButt. attachEvent('onclick',function(e){rimuovi(e);})
else if(oButt.addEventListener) oButt. addEventListener('click',function(e){rimuovi(e);}, false)
// appendi al relativo padre
oTd1.appendChild(oField);
oTd1.appendChild(oFieldB);
oTd1.appendChild(oFieldC);
oTd1.appendChild(oFieldD);
oTd2.appendChild(oButt);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);
// incrementa variabile globale
num++
}
}
function rimuovi(e){
if(document.removeChild && document.getElementById && document.getElementsByTagName) {
if(!e) e=window.event;
var srg=(e.target)?e.target:e.srcElement;
// risali al tr del td che contiene l' elemento che ha scatenato l' evento
while(srg.tagName!="TR"){srg=(srg.parentNode)?srg. parentNode:srg.parentElement}
// riferimento al tbody
var tb=document.getElementById('tabella').getElementsB yTagName('TBODY')[0];
// rimuovi
tb.removeChild(srg);
}
}
//-->
</script>
</head>
<body>
<form name="modulo" action="invio.php" method="post">
<input type="button" value="Aggiungi riga" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td>
<input type="text" name="testo0" placeholder="Codice prodotto"/>
<input type="text" name="testoB0" placeholder="Descrizione"/>
<input type="text" name="testoC0" placeholder="Formato"/>
<input type="text" name="testoD0" placeholder="Quantita'"/>
</td><td>
<input type="button" disabled="disabled" value="rimuovi" />
</td>
</tr>
</tbody>
</table>
<input type="submit" name="Submit" value="Invia Ordine"></p>
</form>
</body>
Hai gia' una discussione tutta tua sull'argomento, non mi pare il caso riesumare e colonizzarne un'altra per i tuoi scopi.
Cartellino giallo ed invito a ripassare e rispettare il regolamento
Il guaio per i poveri computers e' che sono gli uomini a comandarli.
Attenzione ai titoli delle discussioni: (ri)leggete il regolamento
Consultate la discussione in rilievo: script / discussioni utili
Usate la funzione di Ricerca del Forum
Permessi di invio
