Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: Checkbox che aggiunge righe ad una tabella con campi di input differenti

  1. #1

    Checkbox che aggiunge righe ad una tabella con campi di input differenti

    Ciao a tutti !

    Sto cercando di realizzare un form che aggiunge righe a una tabella alla selezione di una checkbox.

    Nel form c'e' un campo checkbox da cui si puo' scegliere se Italiano o Straniero, alla selezione di italiano mi dovrebbe aggiungere tot righe della tabella con i relativi campi di input (città, provincia, cap ecc..ecc...), mentre alla selezione di straniero una riga sola con un solo campo di input nazionalità.

    Ho trovato in rete, e sto cercando di adattarlo alle mie esigenze, questo script, e alla fine sarebbe proprio quello che fa per me:

    codice:
    <script type="text/javascript"> 
        
        function displayForm(c) {
            if (c.value == "1") {
    
                document.getElementById("italiano").style.visibility = 'visible';
                document.getElementById("straniero").style.visibility = 'hidden';
            } else if (c.value == "2") {
                document.getElementById("italiano").style.visibility = 'hidden';
                document.getElementById("straniero").style.visibility = 'visible';
            } else {}
        }
        
    </script>
    
    
    <form>
        
        <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Italiano
    
        <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Straniero
    
        <div style="visibility:hidden; position:absolute" id="italiano">
        
                    <p>Citta
                        
                        <input type="text" id="citta" name="citta" value="">
                    
                    </p>
                    
                    <p>Provincia
    
                        <input type="text" minlength="16" id="prov" name="prov" value="">
                        
                    </p>    
        
        </div>
        
        <div style="visibility:hidden; position:absolute" id="straniero">
            
                    <p>Nazione
                    
                        <input type="text" id="nazione" name="nazione" value="">
    
                    </p>
        
        </div>
        
    </form>
    L'unico problema che non riesco a risolvere e' che dovrei utilizzare una tabella con le relative righe, mentre li si lavora con i div.

    Come posso fare a inserire la funzione in una tabella ?

    Cia a tutti e grazie anticipatamente per l'aiuto !

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    se ho capito bene quello che desideri ti basta sostituire il div con una riga e relativa cella...
    in questo caso puoi omettere il valore position
    Ultima modifica di Vincent.Zeno; 06-10-2017 a 12:26

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    se ho capito bene quello che desideri ti basta sostituire il div con una riga e relativa cella...
    in questo caso puoi omettere il valore position
    Ciao !

    Non e' proprio cosi' semplice anche perche' avevo fatto delle prove in quel senso.
    Facendo come dici tu, come faccio ad assegnare al tr e td la visibilita' o meno ?

  4. #4
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    Quote Originariamente inviata da _Micky_73 Visualizza il messaggio
    Non e' proprio cosi' semplice


    codice:
    <script type="text/javascript"> 
        function displayForm(c) {
            if (c.value == "1") {
                document.getElementById("italiano").style.display = 'block';
                document.getElementById("straniero").style.display = 'none';
            } else if (c.value == "2") {
                document.getElementById("italiano").style.display = 'none';
                document.getElementById("straniero").style.display = 'block';
            } else {}
        }
    </script>
    
    
    <form>
        <input value="1" type="radio" name="formselector" onClick="displayForm(this)">Italiano
        <input value="2" type="radio" name="formselector" onClick="displayForm(this)">Straniero
    	<table>
    	<tr style="display:none;" id="italiano">
    		<td>
                    <p>Citta
                        <input type="text" id="citta" name="citta" value="">
                    </p>
                    <p>Provincia
                        <input type="text" minlength="16" id="prov" name="prov" value="">
                    </p>    
    	</td>
    	</tr>
    	<tr style="display:none;" id="straniero">
    		<td>
                    <p>Nazione
                        <input type="text" id="nazione" name="nazione" value="">
                    </p>
    		</td>
    	</tr>
    	</table>
    </form>

  5. #5
    Avevo provato anche io con quella soluzione, pero', essendo una capra in javascript, ommettevo lo style display: none e/o block , e mantenendo il dispaly visible e hidden me li faceva apparire e scomparire ma mi manteneva gli spazi vuoti anche quando non selezionavo nullac e la cosa non mi piaceva a livello estetico.

    Ma se volessi che i due campi input della parte italiano fossero divisi da tr e td ?
    Devo aggiungere una condizione allo script o basta che assegno a tr lo stesso valore ?

    <tr style="display:none;" id="italiano">


    Ma intanto grazie 1000 per l'aiuto

  6. #6
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    un id deve essere univoco all'interno della pagina: non puoi averne più di uno con lo stesso nome/valore.

    nel tuo contesto puoi settare due tabelle diverse invece di due righe

  7. #7
    Niente, non c'e' verso di far comportare questa dannata tabella come piacerebbe a me !

    codice HTML:
    <form method="post" action="index.php?sez=26&amp;azione=modCv&amp;sottoSez=5">
    
        <table bgcolor="#e8e8e8" cellpadding="4" cellspacing="1" align="center" border="0" width="90%">
            <tr bgcolor="FFFFFF">
                <td align="center" colspan="3">
    
                    <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="10" width="100%">
                        <tr>
                            <td align="center"><span class="normale">Modifica CV utente <b>JOHN.BROWN@GMAIL.COM</b>.<br />I campi contrassegnati con * sono obbligatori</span></td>
                        </tr>
                    </table>
        
                </td>
            </tr>
        
            <script type="text/javascript">
        
                function displayForm(c) {
                    if (c.value == "1") {
                        document.getElementById("italiano").style.display = 'block';
                        document.getElementById("straniero").style.display = 'none';
                    } else if (c.value == "2") {
                        document.getElementById("italiano").style.display = 'none';
                        document.getElementById("straniero").style.display = 'block';
                    } else {}
                }
            </script>
    
            <tr bgcolor="FFFFFF">
                <td width="33%" align="center">
    
                    <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td align="center"><span class="normale">Nazione *</span></td>
                        </tr>
                    </table>
    
                </td>
                <td width="33%" align="center">
    
                    <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="12" width="100%">
                        <tr>
                            <td align="center"><ul class="form-style-2"><li><input onClick="displayForm(this)" type="radio" name="nazione" value="1" ><span class="normale">&nbsp;Italia&nbsp;&nbsp;&nbsp;&nbsp;</span><input onClick="displayForm(this)" type="radio" name="nazione" value="2"><span class="normale">&nbsp;Estero</span></li></ul></td>
                        </tr>
                    </table>
        
                </td>
                <td width="33%" align="center">
    
                    <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td align="center"><span class="normale">Obbligatorio</span></td>
                        </tr>
                    </table>
    
                </td>
            </tr>
            <tr style="display:none;" id="italiano" bgcolor="FFFFFF">
            <td width="33%" align="center">
    
                <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="5" width="100%">
                    <tr>
                        <td align="center"><span class="normale">Città *</span></td>
                    </tr>
                </table>
    
            </td>
            <td width="33%" align="center">
            
                <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="5" width="100%">
                    <tr>
                        <td align="center"><ul class="form-style-2"><li><input type="text" size="40" name="citta" id="citta" value=""></li></ul></td>
                    </tr>
                </table>
    
            </td>
            <td width="33%" align="center">
    
                <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="5" width="100%">
                    <tr>
                        <td align="center"><span class="normale">Obbligatorio</span></td>
                    </tr>
                </table>
    
            </td>
        </tr>
    </table>
    
    </form>

  8. #8
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    a parte che lo script non deve stare dove capita...
    a parte che tra due righe non deve esserci assolutamente nulla...
    a parte che, pare, tu stia facendo un'uso spropositato di tabelle...

    manca la riga con l'id "straniero"...

  9. #9
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    a parte che lo script non deve stare dove capita...
    a parte che tra due righe non deve esserci assolutamente nulla...
    a parte che, pare, tu stia facendo un'uso spropositato di tabelle...

    manca la riga con l'id "straniero"...

    Hai ragione anche tu, allora:
    lo script l'ho messo li per non stare a metterti tutta la struttura della pagina (e' cmq nell'header e ad ogni modo sia messo nell'header sia li, il risultato non cambia)
    per le tabelle, lo so, sto modificando (aggiungendo appunto la parte relativa alla nazionalita'...) un vecchio form in php che ad ogni modo funziona ancora benone per quel che deve fare (tra l'altro in intranet dove si utilizza solo ed esclusivamente IE), e non ho nessuna voglia (..e sopratutto tempo...Sai com'e' quando ti chiedono dall'alto qualcosa fatto per ieri...) di rifare tutto il form con i canoni di oggi con div css ecc..ecc..
    manca la riga id straniero perche' stavo testando la parte italiana, nel frattempo ho aggiunto la parte straniero, ma il risultaton e' lo stesso.
    Funziona a livello di logica, solo che mi incasina la tabella.

    demo.jpg
    demo_estero.jpg

    Io ti ringrazio tanto per tutto gli aiuti che mi stai dando, ma penso che dovro' optare per una soluzione alaternativa perche' probabilmente non ho la giusta struttura di base.
    Ultima modifica di _Micky_73; 06-10-2017 a 14:46

  10. #10
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    guarda che questo lavoro è una scemenza!

    posta l'esempio reale di cosa devi ottenere che magari te lo mettiamo a posto a modo

    edit
    o meglio: posta l'esempio di quello che hai e di come lo vorresti
    Ultima modifica di Vincent.Zeno; 06-10-2017 a 14:52

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