Ciao a tutti,
avrei bisogno di sapere se in JS è possibile implementare una funzione che mi faccia quest'azione...
vorrei avere un bottone che, ogni volta che viene premuto, mi aggiunge gradualmente un campo di testo (1 click = 1 campo di testo, 2 click = 2 campi di testo, e così via...), devo usare un ciclo?
Grazie
in script / discussioni utili c'e' un link a script che fa probabilmente +o- quello che chiedi "aggiungi / rimuovi input dinamicamente"
ciao
Grazieora leggo
Ecco perfetto lo script va bene... ma ho una domanda... se voglio definire la grandezza del campo di testo ad esempio io ho una size=10
per il campo di default, come faccio ad impostarla in questo codice?
codice:<!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 oText=document.createTextNode(""+num); // setta attributi oField.setAttribute("type","text"); oField.setAttribute("name","testo"+num); // appendi al relativo padre oTd1.appendChild(oField); oTd2.appendChild(oText); oTr.appendChild(oTd1); oTr.appendChild(oTd2); document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr); // incrementa variabile globale num++ } } function rimuovi(){ if(document.removeChild && document.getElementById && document.getElementsByTagName) { // se non e' la prima riga if(num>1){ // riferimento al tbody var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0]; // riferimento all' ultimo TR var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1] // rimuovi tb.removeChild(lastTr); // decrementa variabile globale num-- } } } //--> </script> </head> <body> <form name="modulo"> <input type="button" value="accoda" onclick="accoda()"><input type="button" value="rimuovi" onclick="rimuovi()"> <table align="center" id="tabella"> <tbody> <tr> <td><input maxLength="50" name="Campo0" size=10> </td> </tr> </tbody> </table> </form> </body> </html>
up
beh, hai provato a settare il size come setti il tipo o il name?
oField.setAttribute("size","10");
Perfetto grazie mille!
Stavo cercando proprio uno script del genere!
Il mio problema però è che devo ampliare il form. Per aggiungere altri textfield non c'è problema, ma ho provato ad aggiungere un input di tipo radio e non funziona.
Il radio lo vedo ma non è selezionabile...
dove sbaglio?
function accoda(diff){
for (i=1;i<=diff;i++) {
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 oTd3=document.createElement("TD");
var oTd4=document.createElement("TD");
var oTd5=document.createElement("TD");
var oField1=document.createElement("INPUT");
var oField2=document.createElement("INPUT");
var oField3=document.createElement("INPUT");
var oField4=document.createElement("INPUT");
var oField5=document.createElement("INPUT");
var oText1=document.createTextNode("Nome: ");
var oText2=document.createTextNode("Cognome: ");
var oText3=document.createTextNode("Nick: ");
var oText4=document.createTextNode(" M");
var oText5=document.createTextNode(" F");
// setta attributi
oField1.setAttribute("type","text");
oField1.setAttribute("name","nome"+num);
oField2.setAttribute("type","text");
oField2.setAttribute("name","cognome"+num);
oField3.setAttribute("type","text");
oField3.setAttribute("name","nick"+num);
oField4.setAttribute("type","radio");
oField4.setAttribute("name","sesso"+num);
oField4.setAttribute("value","M");
oField5.setAttribute("type","radio");
oField5.setAttribute("name","sesso"+num);
oField5.setAttribute("value","F");
// appendi al relativo padre
oTd1.appendChild(oText1);
oTd1.appendChild(oField1);
oTd2.appendChild(oText2);
oTd2.appendChild(oField2);
oTd3.appendChild(oText3);
oTd3.appendChild(oField3);
oTd4.appendChild(oText4);
oTd4.appendChild(oField4);
oTd5.appendChild(oText5);
oTd5.appendChild(oField5);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTr.appendChild(oTd3);
oTr.appendChild(oTd4);
oTr.appendChild(oTd5);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);
// incrementa variabile globale
num++
}
}
}
prendo per buono tutto ciò che è postato perchè di java non me ne intendo una mazza, ma vendo fatto diverse prove, salvando la pagina con estenzione php perchè è in tale estenzione che mi serve, mi chiedo:
come recupero il valore del campo nella pagina alla quale punta il form? O meglio quale è il nome di ogni singolo valore?
Prima o poi anch'io vi insegnerò qualcosa
oField.setAttribute("name","testo"+num);
giusto?
testo + num
Permessi di invio
Rispondi quotando