Pagina 1 di 8 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 71
  1. #1
    Utente di HTML.it L'avatar di Freedom
    Registrato dal
    Jan 2003
    Messaggi
    839

    Form sul dinamico andante...

    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

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    esempio
    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("riga "+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 border="1" id="tabella">
    <tbody>
    <tr>
    <td><input type="text" name="testo0" /></td><td>riga 0</td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>
    ciao

  3. #3
    Utente di HTML.it L'avatar di Freedom
    Registrato dal
    Jan 2003
    Messaggi
    839
    Grazie Xinod!!

    Era quello che cercavo... almeno, in parte.

    E' possibile eliminare il solo campo scelto?
    Sicut Nox Silentes

  4. #4
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    si' (ma pensa tu, se ti e' necessario, a come riordinare gli indici)
    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 oButt=document.createElement("INPUT");
    
    		// setta attributi
      		oField.setAttribute("type","text");
    		oField.setAttribute("name","testo"+num);
    		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);
    		oTd2.appendChild(oButt);
    		oTr.appendChild(oTd1);
    		oTr.appendChild(oTd2);
    		document.getElementById('tabella').getElementsByTagName('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').getElementsByTagName('TBODY')[0];
    		
    		// rimuovi
    		tb.removeChild(srg);
    	}
    }
    //-->
    </script>
    </head>
    <body>
    <form name="modulo">
    <input type="button" value="accoda" onclick="accoda()" />
    <table border="1" id="tabella">
    <tbody>
    <tr>
    <td><input type="text" name="testo0" /></td><td><input type="button" disabled="disabled" value="rimuovi" /></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>

  5. #5
    Utente di HTML.it L'avatar di Freedom
    Registrato dal
    Jan 2003
    Messaggi
    839
    Xinod, sei un genio!

    Era proprio quello che stavo cercando.

    Ti posso chiedere un ultima cosa...? Poi, prometto solennemente di non abusare più della tua pazienza.

    Io il codice l'ho 'modificato' così:

    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 oFieldB=document.createElement("INPUT"); 
    		var oButt=document.createElement("INPUT");
    
    		// setta attributi
      		oField.setAttribute("type","text");
    		oField.setAttribute("name","testo"+num);
    		  		oFieldB.setAttribute("type","text");
    				oFieldB.setAttribute("name","testoB"+num); 
    		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); 
    		oTd2.appendChild(oButt);
    		oTr.appendChild(oTd1);
    		oTr.appendChild(oTd2);
    		document.getElementById('tabella').getElementsByTagName('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').getElementsByTagName('TBODY')[0];
    		
    		// rimuovi
    		tb.removeChild(srg);
    	}
    }
    //-->
    </script>
    </head>
    <body>
    <form name="modulo" action="aa.asp" method="post">
    <input type="button" value="accoda" onclick="accoda()" />
    <table border="1" id="tabella">
    <tbody>
    <tr>
    <td>
    
    Dal  <input type="text" name="testo0" />
    /Al  <input type="text" name="testo0B" /> 
    </td><td>
    <input type="button" disabled="disabled" value="rimuovi" />
    </td>
    </tr>
    </tbody>
    </table>
    
    
    <input type="submit" name="Submit" value="Prosegui"></p>
    </form>
    
    <%
    response.write(request.form())
    %>
    </body>
    </html>

    In rosso le modifiche apportate.

    Dunque, il quesito è questo: come posso rendere questo codice più 'personalizzabile' per quanto riguarda la paginazione. Cioè, come devo fare per eliminare la tabella?
    Poi, in azzurro, ho messo quello che vorrei fare, cioè, vorrei aggiungere ad ogni input quei testi.

    Grazie ancora per la pazienza! :rollo:
    Sicut Nox Silentes

  6. #6
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    per aggiungere testo prima o dopo basta creare nodi di testo e appenderli nell' ordine all' elemento corretto
    codice:
    ...
    		var oField=document.createElement("INPUT");
    			var oFieldB=document.createElement("INPUT");
    		var oButt=document.createElement("INPUT");
    		var oText1=document.createTextNode("dal");
    		var oText2=document.createTextNode("/al");
    ...
    		// appendi al relativo padre
    		oTd1.appendChild(oText1);
    		oTd1.appendChild(oField);
    		oTd1.appendChild(oText2);
    			oTd1.appendChild(oFieldB); 
    ...
    perche' ti vuoi liberare della tabella?
    a logica la rappresentazione tabellare ci sta tutta
    e torna comodo per l' eliminazione risalire ad un elemento che contenga inequivocabilmente una riga

    vuoi sostituire la tabella con un div x ogni riga?

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    127
    Ciao,
    una domanda riguardante a questo script.
    Una volta aggiunti i campi, come posso leggere il valore contenuto in questi utilizzando js?

    Ho provato a fare il classico document.modulo.elements["testo"+num].value ma con explorer non funziona.
    Come errore mi da che document.testo1.value è nullo o non è un oggetto.

    Invece provando con firefox funziona correttamente.

    Perchè explorer no e firefox sì?
    Grazie mille a tutti

  8. #8
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    243
    Salve a tutti
    ho usato il seguente codice per inserire delle righe ad una tabella.
    Qualcuno sa come posso assoicare l'Attributo maxlength dell'input creata a 3

    ho provato a fare oField.setAttribute("maxlength","3") ma non
    funziona.

    Grazie !

  9. #9
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    aldila' di qualsiasi regola (almeno da me) immaginabile,
    devi usare maxLength invece che maxlength!
    ciao

  10. #10

    x anna.elisa

    Penso che ormai hai risolto... ma per il popolo... io ho risolto facendo
    codice:
    document.getElementById("testo"+num).value
    Io l'ho testato solo con la proprietà focus() ma penso che valga anche per le altre.

    Ciao
    :tongue:

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.