Inserire più input dinamicamente

wiz · 24 Lug 2012

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 · 25 Lug 2012

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

wiz · 25 Lug 2012

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 · 26 Lug 2012

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>

wiz · 26 Lug 2012

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>

criric · 26 Lug 2012

Quindi per non passare un valore ad un parametro basta riscriverlo nella chiamata?

questa domanda non l'ho capita, sarò fuso

Ora il codice è questo:

mi pare faccia quello che ti serviva

wiz · 26 Lug 2012

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.

Cerca

Cerca

Inserire più input dinamicamente

wiz

Nuovo Utente

criric

Super Moderatore

wiz

Nuovo Utente

criric

Super Moderatore

wiz

Nuovo Utente

criric

Super Moderatore

wiz

Nuovo Utente

Discussioni simili