Visualizzazione risultati 1 fino 12 di 12
Like Tree4Likes
  • 1 Post By alemoppo
  • 1 Post By alemoppo
  • 1 Post By tampertools
  • 1 Post By alemoppo

Discussione: Problema Focus javascript su template HTML5

  1. #1
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Question Problema Focus javascript su template HTML5

    Salve Ragazzi, ho un problema con un form e il suo controllo in javascript.
    Ho un form chiamato modulo e tre campi : name, email e message (Serve appunto per inviare l'email).
    Lo script utilizzato controlla che le caselle di testo non siano vuote. Nel caso risultino vuote, avvisa l'utente (alert) e posiziona il cursore nella casella (focus). Con tutte le altre pagine funziona, con questa in HTML5 invece esegue l'alert e ricarica la pagina (e cancella le altre 2 caselle di testo "riempite").
    attualmente, l'unica differenza che noto è che questa pagina è cosi composta da paragrafi:
    Codice HTML:
    <html>
    <head>
    javascript
    </head>
    <body> 
    <section id="a">
    <section id="b">
    <section id="c">
    </body>
    </html>
    è possibile che questo impedisca al javascript di eseguire il focus senza ricaricare la pagina?
    allego il codice javascript e il codice html del modulo.
    Codice HTML:
    		<script>
    <!--
    function Modulo()
    {
    
      if(document.modulo.name.value=="") {
      
          alert("Inserisci il Nome e Cognome");
           document.modulo.name.focus();
            return false;
                
          }
     
    
     else if (document.modulo.email.value=="") {
             alert("Inserisci la tua email");
             document.modulo.email.focus();
            return false;
           }
           
     st = document.modulo.email.value;
     var espressione = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$");
           if ( !espressione.test(st) ){
    
              alert("Questa Mail non è valida");
              document.modulo.email.focus()
               return false;
                 }
                 
                  else if (document.modulo.message.value=="") {
             alert("Inserisci un messaggio");
             document.modulo.message.focus();
            return false;
           }
    
                 else {
            document.modulo.action = "mail.php";
            document.modulo.submit();
        }
    //---->
      }
    </script>
    
    
    <form name="modulo" method="post">
    <div class="row half">
    <div class="6u"><input type="text" class="text" name="name" placeholder="Nome e Cognome" /></div>
    <div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
    </div>
    <div class="row half">
    <div class="12u">
    <textarea name="message" placeholder="Messaggio"></textarea>
    </div>
    </div>
    <div class="row">
    <div class="12u">
    <a href="" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>
    </div>
    </div>
    </form>
    Riepilogando, gli alert funzionano bene, l'unica imprecisione è che non esegue il focus, ma ricarica la pagina e tutti i dati inseriti vengono cancellati.
    Ultima modifica di alemoppo : 25-02-2014 alle ore 15.56.09 Motivo: +tag [html]

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    15,147

    Predefinito

    Per non far ricaricare la pagina, come href del link metti #, ovvero:
    Codice HTML:
    <a href="#" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>
    Comunque, senza un input di tipo submit, i dati del form non vengono inviati! (e nel form non c'é nemmeno l'action).

    Ciao!

  3. #3
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Predefinito

    no, i dati vengono inviati tranquillamente, perchè quando clicchi sul pulsante prima controlla se i campi sono riempiti, poi li invia alla pagina mail.php tramite il metodo:
    document.modulo.action = "mail.php";
    document.modulo.submit();
    Ho provato a seguire il tuo consiglio, e purtroppo non funziona.
    <a href="#" onClick="Modulo()" class="button submit">Richiedi un Preventivo</a>
    Cioè, controlla se le caselle sono vuote, se sono tutte piene invia la email (funziona) ma, se uno è vuoto appare l'alert e la pagina viene refreshata (e perdo il valore delle altre caselle).
    Grazie comunque per l'aiuto :)

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    15,147

    Predefinito

    Citazione Originalmente inviato da andreacivita Visualizza messaggio
    no, i dati vengono inviati tranquillamente, perchè quando clicchi sul pulsante prima controlla se i campi sono riempiti, poi li invia alla pagina mail.php tramite il metodo:
    document.modulo.action = "mail.php";
    document.modulo.submit();
    Sarebbe meglio non farlo via javascript, così possono utilizzarlo anche chi non ha javascript attivato/supportato. Cosa ci guadagni a farlo in quel modo?

    Ho provato a seguire il tuo consiglio, e purtroppo non funziona.
    A me funziona. Hai aggiornato la cache del browser?

    Ciao!
    andreacivita likes this.

  5. #5
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Predefinito

    Ciao, allora intanto uso questo metodo perchè cosi non è possibile inviare i dati finchè non sono stati immessi..altrimenti, se lasciassi senza controllo, chiunque potrebbe cliccare ripetutamente sul tasto di invio e ottengo una valanga di email vuote. Ho provato a pulire la cache, ma, anche da cellulare, noto che prima effettivamente esegue il focus, e poi la pagina viene aggiornata. A te va? :(

  6. #6
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Predefinito

    Allora, sono riuscito a far funzionare tutto, il problema era nel CSS. Consiglio per chi in futuro avrà questo problema o simile, affinchè questo thread possa servire per risolvere questo problema e anche per imparare :)
    Il problema in questo caso è che, se il pulsante è di tipo submit, da un refresh della pagina. Il CSS (in questo caso class="button submit") simulava appunto lo stesso comportamento di un bottone submit, e quindi dava il fastidioso problema. La soluzione è utilizzare un pulsante di tipo button (o nel mio caso, un <a href="#nomeparagrafo# class="button">testo</a> che svolgeva lo stesso compito).
    In questo modo non si incorre nel refresh della pagina, ma al contrario viene eseguito solo il javascript.
    Grazie alemoppo per il tuo aiuto, fa sempre piacere poter contare su qualcuno di più esperto :D

  7. #7
    tampertools non è connesso Utente
    Data registrazione
    28-01-2014
    Messaggi
    204

    Predefinito

    Quando alemoppo diceva di non fare i controlli con javascript intendeva di farli tramite php:
    javascript è facilmente "bypassabile"

    EDIT
    Ho guardato il tuo sito, il form per la mail dovresti cambiarlo:
    La action la lasci come predefinita (così anche chi non ha js può scriverti, tanto fai anche i controlli php) e la togli all'onload, così che chi ce l'ha attivato veda comunque gli alert

    EDIT 2
    (Scusate se è ot)
    Un consiglio per rallentare un pochino i tempi di caricamento della pagina...
    L'icona 42x42 color "arcobaleno" in alto a sinistra è in realtà da 1032 × 774 x 72kb!!!
    (450 volta più grande )
    Ultima modifica di tampertools : 25-02-2014 alle ore 19.22.31

  8. #8
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Predefinito

    Citazione Originalmente inviato da tampertools Visualizza messaggio

    EDIT
    Ho guardato il tuo sito, il form per la mail dovresti cambiarlo:
    La action la lasci come predefinita (così anche chi non ha js può scriverti, tanto fai anche i controlli php) e la togli all'onload, così che chi ce l'ha attivato veda comunque gli alert
    In che senso la tolgo all'onload? Non ho capito questo pezzo. Inoltre, se lasciassi la action, automaticamente mi rimanderebbe alla pagina php, saltando i controlli lato client...questa cosa dell'onload mi ha incuriosito parecchio

  9. #9
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    15,147

    Predefinito

    Secondo me è meglio una cosa del tipo:

    Codice HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ciao</title>
    <style type="text/css">
    .errore
    {
    	visibility: hidden;
    }
    </style>
    <script type="text/javascript">
    function check()
    {
    	if(document.nome_form.ciao.value == '')
    	{
    		document.getElementById('errore1').style.visibility="visible";
    		document.nome_form.ciao.focus();
    		return false;
    	}
    	else
    		document.getElementById('errore1').style.display="hidden";
    	
    	//---
    	
    	var espressione = new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$");
    	if ( !espressione.test(document.nome_form.email.value) )
    	{
    		document.getElementById('errore2').style.visibility="visible";
    		document.nome_form.email.focus();
    		return false;
    	}
    	else
    		document.getElementById('errore2').style.display="hidden";
    
    	//---
    	return true;
    }
    </script>
    </head>
    <body>
    <form action="pagina.php" method="POST" onSubmit="return check()" name="nome_form">
    <input type="text" name="ciao" required><span class="errore" id="errore1">Questo campo deve essere compilato!</span><br>
    <input type="text" name="email" required pattern="[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})"><span class="errore" id="errore2">Questo campo deve essere una email!</span><br>
    <input type="submit" value="as">
    </form>
    </body>
    </html>
    In questo modo, i browser recenti che supportano HTML5 non necessitano di javascript perché vengono usati "required" e "pattern". Per quelli vecchi, li gestisci con javascript (anche se io probabilmente non li metterei proprio).
    Non dimenticarti però di fare i veri controlli con PHP! Come ha detto tampertools, queste cose sono facilissimamente aggirabili.

    Ciao!
    Ultima modifica di alemoppo : 26-02-2014 alle ore 00.58.22
    andreacivita likes this.

  10. #10
    tampertools non è connesso Utente
    Data registrazione
    28-01-2014
    Messaggi
    204

    Predefinito

    Scusa se mi spiego male

    Comunque nella mail anziché il pattern si può anche mettere solo type='email', se le espressioni regolari non ti sono amiche...
    Tanto sempre html5 è: chi non supporta uno non supporterebbe neanche l'altro
    andreacivita likes this.

  11. #11
    andreacivita non è connesso Neofita
    Data registrazione
    30-12-2013
    Messaggi
    17

    Predefinito

    Ho impostato i controlli sia da javascript, sia da php. In questo modo se qualcuno disabilitasse il javascript oppure crei un'altra pagina con lo stesso html, ma che abbia l'action e non richiami la funzione di verifica, non riesce ad inviare comunque la mail. Inoltre voglio inserire una variabile di sessione, che memorizzi un valore dopo che la mail è stata inviata. In questo modo, se l'utente esegue il refresh, la mail non verrà inviata due volte, ma vedrà solo un messaggio di errore. Che dite ragazzuoli, può andar bene o si riesce comunque a bypassare tutti questi controlli? :D
    Grazie comunque per la disponibilità :)

  12. #12
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    15,147

    Predefinito

    Dovrebbe andar bene.

    Ciao!
    andreacivita likes this.

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •