Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    Aggiungere e Rimovere elementi

    Ciao ragazzi.
    E' da un po che non scrivo, sentivo la vostra mancanza

    Sto creando una semplice pagina di iscrizione, dove però mi servono dei campi che possono essere varibili. Queste variazioni, devono essere fatte direttamente sul modulo, senza un refresh della pagina.

    Ho quindi il mio FORM, con diversi campi, se l'utente seleziona tramite il check "X", si deve visualizzare il campo "A", se l'utente invece seleziona "Y", si deve visualizzare il campo "B".

    Ho cercato quasi tutta la sera su google, ho girato qui per il forum, per le guide di html.it, ma non ho trovato quasi nulla che potesse servirmi, se non qualche riga. Diciamo che in un modo o nell'altro, sono arrivato a questo codice:

    codice:
    function campi(id, tipo)
    {	
    	if(id == 0) // id, tipo utente X = id 1, Y = id 0
    	{
    		var trContenitore=document.createElement("TR");
    		var tdC1=document.createElement("TD");
    		var p = document.createElement("P");
    		var tdC2=document.createElement("TD");
    		var inputC1=document.createElement("INPUT");
    		var text = document.createTextNode('Campo utente...');		
    		p.appendChild(text);	
    		inputC1.setAttribute("type","text");
    		inputC1.setAttribute("id","nomefrm");
                    inputC1.setAttribute("name","nome");
    		tdC1.appendChild(p);
    		tdC2.appendChild(inputC1);
                    trContenitore.appendChild(tdC1);
    		trContenitore.appendChild(tdC2);	
    		document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    	}else{
    		var trContenitore=document.createElement("TR");
    		var tdC1=document.createElement("TD");
    		var p = document.createElement("P");
    		var tdC2=document.createElement("TD");
    		var inputC1=document.createElement("INPUT");
    		var text = document.createTextNode('Secondo campo altro utente');		
    		p.appendChild(text);	
    		inputC1.setAttribute("type","text");
    		inputC1.setAttribute("id","nomefrm");
                    inputC1.setAttribute("name","nome");
    		tdC1.appendChild(p);
    		tdC2.appendChild(inputC1);
                    trContenitore.appendChild(tdC1);
    		trContenitore.appendChild(tdC2);	
    		document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    	}
    }
    
    function deleteCampi()
    {
           var elimina1 = document.getElementsByName('TBODY')[1];
    	elimina1.removeChild(elimina1);
    	return true;
    }
    Ma ovviamente non mi funziona!
    In qualche modo sono riuscito poi a farlo partite, inserisce ed elimina il campo ma se ripeto l'operazione più volte piano piano mi spariscono gli altri form fino alla cancellazione completa di tutti!

    Non esiste una guida completa, oppure qualche script già realizzato da dove posso prendere spunto?

    Illuminatemi...
    Grazie, Fabio.
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

  2. #2
    Ma c'è qualcosa di sbagliato in ciò...

    getElementsByTagName('TBODY')[1]... ma quanti tbody dovresti avere nella tabella, ce ne può essere uno solo:

    usa getElementsByTagName('TBODY')[0]

    poi la funzione per eliminare la riga è completamente sbagliata...

    function deleteCampi()
    {
    var elimina1 = document.getElementsByName('TBODY')[1];
    elimina1.removeChild(elimina1);
    return true;
    }

    getElementsByName?! varrai dire getElementsByTagName

    E poi, fai eliminare da un elemento se stesso? non ha molto senso, al max potresti usare:

    elimina1.parentNode.removeChild(elimina1);

    per eliminarlo.

    Comunque non sarebbe meglio aggiungere un id alla righa e poi usar quello per cancellare SOLO la riga:

    metti un contatore fuori dalle funzioni:
    var counter = 0;

    Poi nella funzione di inserimento aggiungi
    counter++;
    trContenitore.id = "myTr"+counter;


    La funzione di cancellazione la fai:
    function deleteCampi()
    {
    var elimina1 = document.getElementsById('myTr'+counter);
    elimina1.parentNode.removeChild(elimina1);
    counter--;
    return true;
    }

    In questo modo ne togli uno alla volta e non tutti insieme

  3. #3
    Ciao!
    Ok, ho provato a fare come mi hai detto...però ci sono altri errori!

    Ho corretto:
    codice:
    var elimina1 = document.getElementsById('myTr'+counter);
    in
    codice:
    var elimina1 = document.getElementById('myTr'+counter);
    Poi ho messo come hai detto tu, il contatore sopra tutte le funzioni (utilizzo un file esterno javascript, l'ho messo proprio in alto), ho scritto la tua funzione per eliminare un campo e modificato l'inserzione così:

    codice:
    var counter = 0;
    
    function campi(id, completo)
    {	// id 0: Modulo 1/\ id 1: Modulo 2 \\
    	if(id == 0)
    	{
    		// siccome effettivamente lui cerca sempre di eliminare un campo
                    // anche se questo non è stato creato, al primo id, dalla pagina stessa
                    // mando come completo = 1, in modo che (teoricamente) non provvede
                    // ad eliminare il campo....anche se sembra che questo passaggio non lo
                    // vede proprio...
    		if(completo != 1)
    		{
    			deleteCampi();	
    		}
    		var trContenitore=document.createElement("TR");
    		var tdC1=document.createElement("TD");
    		var p = document.createElement("P");
    		var tdC2=document.createElement("TD");
    		var inputC1=document.createElement("INPUT");
    		var text = document.createTextNode('Nome Amministratore');		
    		p.appendChild(text);	
    		inputC1.setAttribute("type","text");
    		inputC1.setAttribute("id","nomefrm");
                    inputC1.setAttribute("name","nome");
    		tdC1.appendChild(p);
    		tdC2.appendChild(inputC1);
    		trContenitore.setAttribute("id","myTr"+counter);
                    trContenitore.appendChild(tdC1);
    		trContenitore.appendChild(tdC2);	
    		document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    		counter++;
    	}else{
    		// stessa cosa di prima....
    		if(completo != 1)
    		{
    			deleteCampi();	
    		}
    		var trContenitore=document.createElement("TR");
    		var tdC1=document.createElement("TD");
    		var p = document.createElement("P");
    		var tdC2=document.createElement("TD");
    		var inputC1=document.createElement("INPUT");
    		var text = document.createTextNode('Nome Amministratore 2');		
    		p.appendChild(text);	
    		inputC1.setAttribute("type","text");
    		inputC1.setAttribute("id","nomefrm");
                    inputC1.setAttribute("name","nome");
    		tdC1.appendChild(p);
    		tdC2.appendChild(inputC1);
    		trContenitore.setAttribute("id","myTr"+counter);
                    trContenitore.appendChild(tdC1);
    		trContenitore.appendChild(tdC2);	
    		document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    		counter++;
    	}
    }
    
    function deleteCampi()
    {
    var elimina1 = document.getElementById('myTr'+counter);
    elimina1.parentNode.removeChild(elimina1);
    counter--;
    return true;
    }
    Purtroppo si, ho bisogno di utilizzare 2 campi che si aggiungono o si levano nella tabella, quindi pensavo di usare getElementsByTagName('TBODY')[1] e getElementsByTagName('TBODY')[2]...non funziona così?

    Fatto sta, che provando con firefox poi mi viene questo errore:

    Errore: elimina1 is null
    File sorgente: ******.js
    Riga: 62
    Nella pagina dove mi server, ho provato a richiamare lo script inizialmente dando come completo = 0, in modo che non passasse subito all'eliminazione degli altri campi che tanto non ci sono ancora, e poi ogni volta passava come completo = 1 così' eliminava anche gli altri campi...posto la funzione..

    codice:
    [....]
    // il file esterno l'ho già richiamato sopra...passando come secondo valore 1
    // teoricamente non dovrebbe passare all'eliminazione dei campi...ma lo fa lo stesso
    <script language="javascript">campi(1,1);</script>
    [....]
    
    <input name="radiobutton" type="radio" value="1" checked="checked" onclick="javascript:campi(1,0);">Modulo 1
    
    <input name="radiobutton" type="radio" value="2" onclick="javascript:campi(0,0);"/>Modulo 2
    
    [...]
    
    // questi sono i due tbody che mi servono per i due campi aggiuntivi...
    <tbody></tbody>
    <tbody></tbody>
    Heeeelp!
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

  4. #4
    no, il counter++; devi metterlo PRIMA di settare l'ID alla riga sennò capita questo:

    Step1 PAg caricata

    counter = 0;
    Nessuna riga

    Step2 utente clicca sul bottone aggiungi

    Creata rica con id = "MyRow0";
    counter = 1

    Step3 Utente cancella riga

    getElementById("MyRow1");
    Giutamente non da nessun risultato

  5. #5
    Oki grazie...
    Ho provato a fare come mi dici, però continua a darmi errore... Mi sa che per javascript sono proprio negato...

    Allora, ho inserito il counter all'inizio di ogni funzione...in questo modo:
    codice:
    var counter = 0;
    
    function campi(id, completo)
    {	// id 0: Modulo 1/\ id 1: Modulo 2 \\
    	if(id == 0)
    	{
    		if(completo != 1)
    		{
    			deleteCampi();	
    		}
    		counter++;
    		var trContenitore=document.createElement("TR");
    		var tdC1=document.createElement("TD");
                    [....]
                   document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    	}else{
    		// Creo il nuovo nodo
    		if(completo != 1)
    		{
    			deleteCampi();	
    		}
    		counter++;
                    [...]
    		trContenitore.setAttribute("id","myTr"+counter);
    		document.getElementById('tabella').getElementsByTagName('TBODY')[1].appendChild(trContenitore);
    	}
    }
    
    function deleteCampi()
    {
           var elimina1 = document.getElementById('myTr'+counter);
           elimina1.parentNode.removeChild(elimina1);
           counter--;
           return true;
    }
    Nel codice HTML della pagina, ho quindi la solita funzione:
    codice:
    <script language="javascript">campi(1,1);</script>
    e la tabella con l'id da cercare
    codice:
    <table width="63%" border="0" align="center" id="tabella">
    Però ancora non riesco a farlo funzionare, con la consolle degli errori di Firefox mi restituisce questo:

    Errore: document.getElementById("tabella") is null
    File sorgente: *****.js
    Riga: 54

    Errore: elimina1 is null
    File sorgente: *****.js
    Riga: 62
    Ovviamente non mi fa vedere la creazione dei due campi....
    Aiutooo!
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

  6. #6
    se il sito è visibile mi dai il link? altrimenti posta il codice HTML

  7. #7
    Originariamente inviato da artorius
    se il sito è visibile mi dai il link? altrimenti posta il codice HTML
    Scusa per l'attesa, ho dovuto fare dei piccoli chiarimenti. Non posto il codice direttamente sul forum, tanto si incasina solo, lo hostato su un server, lo puoi vedere da qui:http://www.fileshost.com/en/file/548...-page-zip.html. E' un archivio ZIP, dentro c'è un file con il blocco note che sarebbe il sorgente della pagina...non è nemmeno tanto grosso e quindi facile da capire il contenuto!


    Grazie mille,
    aspetto risposte,
    Fabio.
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

  8. #8
    Up....
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

  9. #9
    ciao, scusa se ti rispondo solo ora, ma non ho proprio avuto tempo, ecco, in effetti avrei dovuto leggere la tua risposta meglio:

    quando inserisci <script language="javascript">campi(1,1);</script> in un punto del body siglinifica ORA a questo punto esegui subito la funzione campi conh gli argomenti passati... beh, a questo punto del codice non esiste ancora la tabella con id="tabella", dato che è definita sotto. Per chiamare gli script nel body è sempre buona prassi metterli dopo la parte della pagina dove devono fare effetto. Tuttavia, io non uso mai questo tipo di script, ma li inserisco nell'evento onLoad della pagina:
    <head>
    <script type="text/javascript">
    window.onload = function(){
    campi(1,1);
    }
    </script>
    </head>
    Così sono sicuro che la pagina sia completa quando lo chiami.
    Comunque, non dovrebbe essere campi(1,0)?

  10. #10
    Originariamente inviato da artorius
    ciao, scusa se ti rispondo solo ora, ma non ho proprio avuto tempo, ecco, in effetti avrei dovuto leggere la tua risposta meglio:

    quando inserisci <script language="javascript">campi(1,1);</script> in un punto del body siglinifica ORA a questo punto esegui subito la funzione campi conh gli argomenti passati... beh, a questo punto del codice non esiste ancora la tabella con id="tabella", dato che è definita sotto. Per chiamare gli script nel body è sempre buona prassi metterli dopo la parte della pagina dove devono fare effetto. Tuttavia, io non uso mai questo tipo di script, ma li inserisco nell'evento onLoad della pagina:
    <head>
    <script type="text/javascript">
    window.onload = function(){
    campi(1,1);
    }
    </script>
    </head>
    Così sono sicuro che la pagina sia completa quando lo chiami.
    Comunque, non dovrebbe essere campi(1,0)?
    Grazie mille, appena ho un secondo lo testo!
    Io avevo impostato campi(1,1) in modo che appare il secondo, ma può anche apparire il primo e cambiare dopo...è solo per una questione di dati nulla di che

    Cerco subito di provarlo così ti faccio sapere!
    Grazie mille!
    Realizzazione script php/mysql, per info:
    delrossofabio@gmail.com

    http://forum.html.it/forum/showthread.php?s=&threadid=1478962

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 © 2025 vBulletin Solutions, Inc. All rights reserved.