Inserire più input dinamicamente

W

wiz

Nuovo Utente
24 Lug 2012
5
0
0
Codice: 
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(tabella){
	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("class","dimensioni");
		oField.setAttribute("name","materia"+num);
		oButt.setAttribute("type","button");
		oButt.setAttribute("class","pulsante button");
		oButt.setAttribute("value","-");

		// 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 globalemma
		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);
		// decrementa variabile globale
		num--
	}
}
//-->
</script>

Il problema è questo:
lo script poteva essere utilizzato una volta nella pagina perché come parametri delle funzioni utilizzava valori prefissati. Io ho modificato la prima parte cioè la funzione accoda aggiungendo come parametro una variabile che viene passata alla funzione al generarsi di un evento onClick solo che non riesco a fare lo stesso per la funzione rimuovi. Non capisco a cosa serve il parametro e che gli viene già passato. (Per ulteriore chiarezza io devo utilizzare lo script in più di tre form diversi nella stessa pagina).
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
io non sono riuscito a farlo funzionare il codice che hai postato (almeno su firefox)

nel frattempo che aspettiamo qualche risposta ho buttato giu qualcosa di alternativo

HTML: 
<script>
    var input_form_a = 1;
    var input_form_b = 1;
    var incremento;
    function addremove(form,action) {        
        document.getElementById(form).innerHTML = "";
        if(action == "add") {
            if(form == 'form_a') {                   
                input_form_a++;
                incremento = input_form_a;
            }else if(form == 'form_b') {   
                input_form_b++;
                incremento = input_form_b;
            }
        }if(action == "remove") {
            if(form == 'form_a') { 
                if(incremento>1)      
                    input_form_a--;
                incremento = input_form_a;
            }else if(form == 'form_b') { 
                if(incremento>1) 
                    input_form_b--;
                incremento = input_form_b;
            }
        }       
        for(var i=1; i<incremento;i++) {
            document.getElementById(form).innerHTML += '<input name="' + form + i +'" type="text"/>';
        }
    }
</script>
<div style="width:220px">
    <fieldset>
        <legend>Form A </legend>
        <form  method="post">        
            <div id="form_a"></div>
            <input type="button" onclick="addremove('form_a','add')" value="aggiungi"/>
            <input type="button" onclick="addremove('form_a','remove')" value="rimuovi"/>
        </form>
    </fieldset>
    <fieldset>
        <legend>Form B </legend>
        <form method="post">
            <div id="form_b"></div>
            <input type="button" onclick="addremove('form_b','add')" value="aggiungi"/>
            <input type="button" onclick="addremove('form_b','remove')" value="rimuovi"/>            
        </form>
    </fieldset>
</div>

non ho testato a dovere
 
W

wiz

Nuovo Utente
24 Lug 2012
5
0
0
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=utf-8" />
<title>Documento senza titolo</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(tabella){
	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("class","dimensioni");
		oField.setAttribute("name","materia"+num);
		oButt.setAttribute("type","button");
		oButt.setAttribute("class","pulsante button");
		oButt.setAttribute("value","-");

		// 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 globalemma
		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);
		// decrementa variabile globale
		num--
	}
}
//-->
</script>
<body>
	<form name="modulo">
			<table id="tabella">
					<tbody>
						<tr>
							<td>
                        		<input type="text" name="materia0" class="dimensioni" /></td><td><input type="button" disabled="disabled" id="disabled" value="-" />
                    	    </td>
                		</tr>
            	    </tbody>
        	</table>
            
            <table>
                <tr>
                	<td style="text-align:right">
                    
                    	<input type="button" value="Aggiungi Materia" onclick="accoda('tabella')" class="pulsante" />
                    
                    </td>
                </tr>
            </table>
            
            <table>
                <tr>
                	<td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 1

                    </td>
                    
                    <td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 2
                    </td>
                    
                    <td>
                    	<input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 3
                    </td>
                </tr>
            </table>
                    Materie:
        <form name="modulo">
			<table id="tabella1">
					<tbody>
						<tr>
							<td>
                        		<input type="text" name="materia0" class="dimensioni" /></td><td><input type="button" disabled="disabled" id="disabled" value="-" />
                    	    </td>
                		</tr>
            	    </tbody>
        	</table>
            
            <table>
                <tr>
                	<td style="text-align:right">
                    
                    	<input type="button" value="Aggiungi Materia" onclick="accoda('tabella1')" class="pulsante" />
                    
                    </td>
                </tr>
            </table>
            
            <table>
                <tr>
                	<td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 1

                    </td>
                    
                    <td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 2
                    </td>
                    
                    <td>
                    	<input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 3
                    </td>
                </tr>
            </table>
                    Materie:
        <form name="modulo">
			<table id="tabella2">
					<tbody>
						<tr>
							<td>
                        		<input type="text" name="materia0" class="dimensioni" /></td><td><input type="button" disabled="disabled" id="disabled" value="-" />
                    	    </td>
                		</tr>
            	    </tbody>
        	</table>
            
            <table>
                <tr>
                	<td style="text-align:right">
                    
                    	<input type="button" value="Aggiungi Materia" onclick="accoda('tabella2')" class="pulsante" />
                    
                    </td>
                </tr>
            </table>
            
            <table>
                <tr>
                	<td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 1

                    </td>
                    
                    <td>
           	            <input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 2
                    </td>
                    
                    <td>
                    	<input type="radio" name="indirizzo" value="" style="vertical-align:bottom;"> indirizzo 3
                    </td>
                </tr>
            </table>
            
        </form>

</body>
</html>
L'ho scritto completo ora non dovresti avere problemi a farlo funzionare.
Comunque il tuo codice funziona ma non è adatto alla situazione perché purtroppo io devo fare in modo che in base ad un dato inserito dall'utente mi stampi nella pagina tot. form (questo lo faccio in php e non centra con il problema) che vanno da 1 ad un qualsiasi numero. Lo script deve funzionare per uno come per cento questo è in sostanza il problema. Se adesso provi il codice che ti ho postato (esempio con tre form) vedrai che puoi aggiungere a tutti e tre l'input però mi fa eliminare gli input solo dal primo perchè nella funzione rimuovi non riesco a capire come opera la funzione rimuovi. In pratica io dovrei passargli un parametro di modo che lo script riconosca su quale input sta operando l'utente come ho fatto per la funzione accoda.
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Nella funzione rimuovi ti riferisci sempre alla prima tabella
devi invece passargli la tabella su cui stai lavorando

prova a modificare le funzioni cosi:
HTML: 
<script language="JavaScript" type="text/javascript">

var num=1;
function accoda(tabella){
	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("class","dimensioni");
		oField.setAttribute("name","materia"+num);
		oButt.setAttribute("type","button");
		oButt.setAttribute("class","pulsante button");
		oButt.setAttribute("value","-");

		// setta gestore evento
		if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e,tabella);})
		else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e,tabella);},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 globalemma
		num++
	}
}

function rimuovi(e,tabella){
	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);
		// decrementa variabile globale
		num--
	}
}
//-->
</script>
 
W

wiz

Nuovo Utente
24 Lug 2012
5
0
0
Ci avevo già provato però non mi funzionava perché provavo a passare valori al parametro e della funzione rimuovi. Adesso ho semplicemente passato i valori in questo modo rimuovi(e,'tabella1') per la tabella1 ad esempio e funziona. Quindi per non passare un valore ad un parametro basta riscriverlo nella chiamata?

Ora il codice è questo:

Codice: 
<script language="JavaScript" type="text/javascript">

var num=1;
function accoda(tabella){
	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("class","dimensioni");
		oField.setAttribute("name","materia"+num);
		oButt.setAttribute("type","button");
		oButt.setAttribute("class","pulsante button");
		oButt.setAttribute("value","-");
		if(tabella == "tabella"){
		oButt.setAttribute("onClick","rimuovi(e,'tabella')");
		}
		else if(tabella == "tabella1"){
		oButt.setAttribute("onClick","rimuovi(e,'tabella1')");
		}
		else{
		oButt.setAttribute("onClick","rimuovi(e,'tabella2')");
		}


		// setta gestore evento
		if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e,tabella);})
		else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e,tabella);},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 globalemma
		num++
	}
}

function rimuovi(e,tabella){
	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);
		// decrementa variabile globale
		num--
	}
}
//-->
</script>
 
W

wiz

Nuovo Utente
24 Lug 2012
5
0
0
si si adesso funziona... mi chiedevo solamente per chiarezza se scrivendo appunto onClick="rimuovi(e,'tabella1');" nella funzione al parametro e non viene passato nulla cosa che non accade invece quando si scrive onClick="rimuovi(qualsiasi_valore,'tabella1');" non so se sono stato più chiaro adesso.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M PHP/SQL Inserire più valori in una colonna di tipo integer - Checkbox - PHP 3
filippino Inserire un articolo in più categorie è penalizzante lato seo? SEO e Posizionamento 0
JackIlPazzo Inserire array in più righe PHP 9
nim inserire più frasi in un record MySQL 8
B inserire più musiche di sfondo HTML e CSS 9
L Inserire più record in una sola volta PHP 1
I Inserire più dati in database PHP 43
D inserire più Include PHP 0
D inserire più valori in una POST PHP 4
B inserire link a più pagine HTML e CSS 2
L inserire menu su più pagine HTML e CSS 6
Elisacau [Contact form 7] Inserire Numero auto incrementante WordPress 1
gara1 inserire immagine di sfondo in canvas Javascript 0
FDF182 Inserire pdf in db PHP 3
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
D Inserire link PHP 0
L PHPSpreadsheet inserire dati da file .xlsx/.xls su database PHP 2
P inserire due voci in un titolo post wp WordPress 1
R inserire video nel sito HTML e CSS 15
J Inserire blog wordpress in angular CMS (Content Management System) 0
A inserire variabile php colore in div html PHP 2
L inserire dati multi livello PHP 8
G Inserire una scritta Java 1
M Inserire variabile nella value di una hidden PHP 3
S Inserire foto in ogni cella di una tabella Javascript 0
G inserire dati automaticamente in mysql PHP 0
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
Shyson Inserire placeholder nel campo cerca PHP 5
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
B inserire valori da una tabella a un altra mysql PHP 34
D [Javascript] inserire uno script in un file php Javascript 6
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
P [PHP] Inserire stringhe in input(text),memorizzarle e stamparle in file successivo PHP 0
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
Shyson [PHP] Inserire testo nel codice PHP 2
D Mailchimp - Possibile inserire doppia condizione per i triggers? Email Marketing 0
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
Alex_70 Inserire photo in php PHP 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0

Discussioni simili

Alto Basso