Form dipendente da un flag

scegli un altro forum

Pagine (2): [ 1 2 > ]

Indietro Ricarica Avanti

Autore

Discussione

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ:

MSN:

Skype:

Form dipendente da un flag

Buon giorno a tutti.
Non riesco a creare un checkbox, se viene selezionata mi "compare" un campo dove l'utente può mettere una cifra. Se viene tolta la selezione il campo sparisce.
pensavo con onclick (ma non so se sia giusto e come usarlo).
Grazie

Segnala ad un moderatore | IP: Collegato | Permalink

19-03-2012 15:09

Clicca qui per inviare all'utente Oiki un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente Oiki

Aggiungi l'utente Oiki alla tua lista degli utenti amici

darkonme
Utente di HTML.it

Registrato il: Jun 2007

Provenienza:

Messaggi: 74

ICQ :

MSN :

Skype :

così? Ho usato jQuery
codice PHP:



<html>

    <head>

    </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <body>

        <input type="checkbox" id="box" name="box" onclick="if(this.checked){$('#tNum').show();}else{$('#tNum').hide();}"/>  

        <input type="text" id="tNum" name="tNum" style="display: none;"/>

    </body>

</html>

__________________
..
"Voi che avete gl'intelletti sani,mirate la dottrimna che s'asconde dietro il velame delli versi strani".

Segnala ad un moderatore | IP: Collegato | Permalink

19-03-2012 15:47

Clicca qui per inviare all'utente darkonme un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente darkonme

Aggiungi l'utente darkonme alla tua lista degli utenti amici

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Grazie mille! risposta celere!
Provo subito.
Posso chiederti come funzionano
L'onclick e lo script?
codice PHP:



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Scusa l'ignoranza, perchè vedendo così credo di capire che
codice PHP:



{$('#tNum').show();}else{$('#tNum').hide();}"/

In pratica gli dico l'id della variabile e la rendo visibile (show) o no (hide).
lo script invece è per "aggiornare" la pagina al flag?
Almeno imparo e non è solo un copia e incolla.
Grazie

ps funziona alla grande! Piccolo problemino,non so quale variabile usa e quanto assegna in caso di flag, perchè vorrei scrivere 2 paroline che compaiono, per far capire all'utente cosa inserire, ma solo nel caso flag selezionato. Pensavo a qualcosa tipo
codice PHP:



if(tNum=="tNum"){echo "inserisca valore";}

Ultima modifica ad opera dell'utente Oiki il 19-03-2012 alle 16:47

Segnala ad un moderatore | IP: Collegato | Permalink

19-03-2012 16:23

darkonme
Utente di HTML.it

Registrato il: Jun 2007

Provenienza:

Messaggi: 74

ICQ :

MSN :

Skype :

all'onclick viene richiamato lo script, che verifica se checked o no (this.checked). $('#tNum') seleziona l'elemento con id 'tNum', show e hide sono funzioni di jquery.

Ti posto una versione migliorata e completa con i commenti... spero d'aver spiegato bene...

codice PHP:



<html>

    <head>

    </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        /* questa funzione filta i tasti premuti ammettendo solo i numeri */

        $.fn.NumericOnly = function(){

            return this.each(function()

            {

                $(this).keydown(function(e)

                {

                    var key = e.charCode || e.keyCode || 0;

                    return (

                        key == 8 || 

                        key == 9 ||

                        key == 46 ||

                        (key >= 37 && key <= 40) ||

                        (key >= 48 && key <= 57) ||

                        (key >= 96 && key <= 105));

                });

            });

        };

        function check(el){

            if(el.checked){

                /* *

                 * .val() -> inserisce un testo in #tNum 

                 * .NumericOnly() -> applica la funzione solo numeri

                 * .focus() chimama .select() e fa in modo che se #tNum ottiene il focus, venga selezionato tutto il contenuto

                 * fadeIn() e .fadeOut() sono come hide e show ma con effetto di fade

                 * */

                $('#tNum').val("Insert a number").NumericOnly().focus(function(){

                    this.select();

                }).fadeIn();

            }else{

                $('#tNum').fadeOut();

            }

            return false;

        }

    </script>

    <body>

        <input type="checkbox" id="box" name="box" onclick="check(this);"/>  

        <input type="text" id="tNum" name="tNum" style="display: none;"/>

    </body>

</html>

Per quanto riguarda jQueri, sul sito trovi la documentazione con una miriade di esempi d'uso e demo.
Se ti servisse: http://docs.jquery.com/Main_Page

__________________
..
"Voi che avete gl'intelletti sani,mirate la dottrimna che s'asconde dietro il velame delli versi strani".

Segnala ad un moderatore | IP: Collegato | Permalink

19-03-2012 17:13

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

GRAZIE! Un po' in ritardo (pensavo di aver risposto,ma mi sa di aver sbagliato qualcosa :mame

Gentilissimo, figo anche il fatto che controlli e faccia inserire solo numeri, sarebbe stato perfetto anche per me (purtroppo così non prende la virgola (o il punto) e mi serviva float, comunque sei stato gentilissimo in fondo non te lo avevo neanche chiesto

).
Hai spiegato bene, non ho capito perchè l'uso delle funzioni?Quando si toglie-mette la spunta al flag non si aggiorna da sola la pagina?
Pensavo di mettere quel insert a number di fianco e non dentro al form, posso mettere solo l'if?, qualcosa tipo:
codice PHP:



if(el.checked){ 

                echo"Inserite valore"; 

                }

oppure devo metterlo nella funzione

codice PHP:



function check(el){ 

if(el.checked){ 

                echo"Inserite valore"; 

                } }

Segnala ad un moderatore | IP: Collegato | Permalink

21-03-2012 17:39

darkonme
Utente di HTML.it

Registrato il: Jun 2007

Provenienza:

Messaggi: 74

ICQ :

MSN :

Skype :

No, non si aggiorna la pagina in javascript, è eseguito lato client, non fa richieste al server. Le funzioni non le puoi evitare...

Prova questo, la validazione ora è sui float, ammette un solo punto, e il testo è di fianco

codice PHP:



<html>

    <head>

    </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        /* questa funzione filta i tasti premuti ammettendo solo i numeri */

        

        $(document).ready(function(){

            $('#tNum').val("0.0").FloatNumericOnly().focus(function(){

                this.select();

            });

        });

        

        $.fn.FloatNumericOnly = function(){

            return this.each(function()

            {

                $(this).keydown(function(e)

                {

                    var dot = ($(this).val().indexOf('.')!=-1);

                    var len = ($(this).val().length);

                    var key = e.charCode || e.keyCode || 0;

                    return (

                    key == 8 || 

                        key == 9 ||

                        key == 46 ||                        

                        ((key == 190 || key == 110) && !dot && len > 0) ||

                        (key >= 37 && key <= 40) ||

                        (key >= 48 && key <= 57) ||

                        (key >= 96 && key <= 105));

                });

            });

        };

        function check(el){

            if(el.checked){

                /* *

                 * .val() -> inserisce un testo in #tNum 

                 * .NumericOnly() -> applica la funzione solo numeri

                 * .focus() chimama .select() e fa in modo che se #tNum ottiene il focus, venga selezionato tutto il contenuto

                 * fadeIn() e .fadeOut() sono come hide e show ma con effetto di fade

                 * */

                $('#tNum').val("0.0")

                $('#toshow').fadeIn();

            }else{

                $('#toshow').fadeOut();

            }

            return false;

        }

    </script>

    <body>

        <input type="checkbox" id="box" name="box" onclick="check(this);"/>  

        <div id="toshow" style="display: none;"><input type="text" id="tNum" name="tNum"/><span id="message">Inserire un numero</span></div>

    </body>

</html>

__________________
..
"Voi che avete gl'intelletti sani,mirate la dottrimna che s'asconde dietro il velame delli versi strani".

Segnala ad un moderatore | IP: Collegato | Permalink

21-03-2012 20:21

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Lo provo subito! Grazie

Segnala ad un moderatore | IP: Collegato | Permalink

22-03-2012 09:46

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Funziona perfettamente!! per usarne 2? Devo creare con un dupplicato di funzioni?
Perdona la mia ignoranza

Segnala ad un moderatore | IP: Collegato | Permalink

23-03-2012 19:12

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Ps Scusami se non ti ho detto subito che erano 2, ma non sapevo che ne servivano 2.
Specifico 2 flag (indipendenti) con i rispettivi form dipendenti dal rispettivo flag.

Flag 1 (se flag 1 attivo, allora mostra messaggio1 e campo 1)
Flag 2 (se flag 2 attivo allora mostra messaggio2 e campo 2)

messaggio 1 e 2 sono messaggi all'utente per far capire cosa inserire.

Esattamente come ha fatto darkonme, ma 2 volte (mea culpa)

Segnala ad un moderatore | IP: Collegato | Permalink

28-03-2012 11:01

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Non c'è più bisogno, ci sono riuscito

Segnala ad un moderatore | IP: Collegato | Permalink

02-04-2012 00:37

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Ciao a tutti.
Posto la soluzione a cui sono arrivato
codice:

 

<html> 
    <head> 
    </head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript"> 
        /* questa funzione filta i tasti premuti ammettendo solo i numeri */ 
         
        $(document).ready(function(){ 
            $('#tNum').val("0.0").FloatNumericOnly().focus(function(){ 
                this.select(); 
				});
				/*seconda*/
			$('#val_assi').val("0.0").FloatNumericOnly().focus(function(){ 
                this.select(); 	
            }); 
        }); 
         
        $.fn.FloatNumericOnly = function(){ 
            return this.each(function() 
            { 
                $(this).keydown(function(e) 
                { 
                    var dot = ($(this).val().indexOf('.')!=-1); 
                    var len = ($(this).val().length); 
                    var key = e.charCode || e.keyCode || 0; 
                    return ( 
                    key == 8 ||  
                        key == 9 || 
                        key == 46 ||                         
                        ((key == 190 || key == 110) && !dot && len > 0) || 
                        (key >= 37 && key <= 40) || 
                        (key >= 48 && key <= 57) || 
                        (key >= 96 && key <= 105)); 
                }); 
            }); 
        }; 
        function check(el){ 
            if(el.checked){ 
                /* * 
                 * .val() -> inserisce un testo in #tNum  
                 * .NumericOnly() -> applica la funzione solo numeri 
                 * .focus() chimama .select() e fa in modo che se #tNum ottiene il focus, venga selezionato tutto il contenuto
                  * fadeIn() e .fadeOut() sono come hide e show ma con effetto di fade
                  * */ 
                $('#tNum').val("0.0") 
                $('#toshow').fadeIn(); 
            }else{ 
                $('#toshow').fadeOut(); 
            } 
            return false; 
        } 
		
		//Seconda
		  function check1(el){ 
            if(el.checked){ 
                /* * 
                 * .val() -> inserisce un testo in #tNum  
                 * .NumericOnly() -> applica la funzione solo numeri 
                 * .focus() chimama .select() e fa in modo che se #tNum ottiene il focus, venga selezionato tutto il contenuto
                  * fadeIn() e .fadeOut() sono come hide e show ma con effetto di fade
                  * */ 
                $('#val_assi').val("0.0") 
                $('#opzS1').fadeIn(); 
            }else{ 
                $('#opzS1').fadeOut(); 
            } 
            return false; 
        }
		
		
		
    </script> 
    <body> 
        <input type="checkbox" id="box" name="box" onclick="check(this);"/>   
        <div id="toshow" style="display: none;"><input type="text" id="tNum" name="tNum"/><span id="message">Inserire un numero</span></div>
     
	 <?php //SECONDA ?>
	 <input type="checkbox" id="box" name="box" onclick="check1(this);"/>   
  <div id="opzS1" style="display: none;">
   <span id="mesS1">Inserire un numero</span>
   <input type="text" id="val_assi" name="val_assi"/>
  </div>
	 
	 </body> 
</html>

Funziona e credo sia corretta

Segnala ad un moderatore | IP: Collegato | Permalink

22-04-2012 13:46

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1472

ICQ :

MSN :

Skype :

No, ti prego, jQuery per questo no!!! Butta via tutto quel codice inutile e fa' così:

codice:

<html> 
    <head> 
     <script type="text/javascript"> 
		/* questa funzione filta i tasti premuti ammettendo solo i numeri */ 
		function numbersOnly(oToCheckField, oKeyEvent) {
			return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
		}

		/* questa funzione mostra/nasconde il box di testo */
		function showHide (oChkBox, sElId) {
			document.getElementById(sElId).style.display = oChkBox.checked ? "inline" : "none";
		}

		/* questa funzione controlla i campi di testo da mostrare/nascondere all'apertura della pagina */
		window.onload = function () {
			document.getElementById("toshow").style.display = document.tuoForm.box1.checked ? "inline" : "none";
			document.getElementById("opzS1").style.display = document.tuoForm.box2.checked ? "inline" : "none";
		}

    </script>
    </head>
    <body>
		<form name="tuoForm">
		<div>
			<input type="checkbox" id="ckbox1" name="box1" onchange="showHide(this, 'toshow');" />   
			<div id="toshow" style="display: none;">
				<span id="message">Inserire un numero</span>
				<input type="text" id="tNum" name="tNum" onkeypress="return numbersOnly(this, event);" onpaste="return false ;" />
			</div>
		</div>
		
		<div>
			<input type="checkbox" id="ckbox2" name="box2" onchange="showHide(this, 'opzS1');" />   
			<div id="opzS1" style="display: none;">
				<span id="mesS1">Inserire un numero</span>
				<input type="text" id="val_assi" name="val_assi" onkeypress="return numbersOnly(this, event);" onpaste="return false;" />
			</div>
		</div>
		</form>
	 </body> 
</html>

Ultima modifica ad opera dell'utente carlomarx il 22-04-2012 alle 14:35

Segnala ad un moderatore | IP: Collegato | Permalink

22-04-2012 14:26

Clicca qui per inviare all'utente carlomarx un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente carlomarx

Aggiungi l'utente carlomarx alla tua lista degli utenti amici

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Non ti arrabbiare

ho modificato la parte di codice che mi hanno passato, era la mia prima volta che provo con java. Per me è stato un buon risultato

Grazie

mille!

Segnala ad un moderatore | IP: Collegato | Permalink

22-04-2012 18:39

Oiki
Utente di HTML.it

Registrato il: Feb 2012

Provenienza:

Messaggi: 50

ICQ :

MSN :

Skype :

Purtroppo così mi prende solo gli interi, i ho bisogno che siano accettati anche i float.
Grazie

Segnala ad un moderatore | IP: Collegato | Permalink

25-04-2012 11:12

carlomarx
Utente di HTML.it

Registrato il: Oct 2009

Provenienza:

Messaggi: 1472

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da Oiki
Purtroppo così mi prende solo gli interi, i ho bisogno che siano accettati anche i float.
Grazie

Cambia il pezzo sottostante in questo modo:

codice:

		/* questa funzione filta i tasti premuti ammettendo solo i numeri */ 
		function numbersOnly(oMyField, oKeyEvent) {
			var nChar = oKeyEvent.charCode, sChar = String.fromCharCode(nChar), rSeparator = /^$|,/;
			return nChar === 0 || /\d/.test(sChar) || (rSeparator.test(sChar) && !rSeparator.test(oMyField.value));
		}