A scopo didattico.. Dove sbaglio?

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Sto cercando di studiare jquery e ho una difficoltà a capire come formulare una funzione del genere, nel senso che mi sembra impossibile che non funzioni.. Forse sbaglio in qualcosa??

Codice:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(function () {
    $("#submit").click(function(){
    $("#grazie").fadeIn("slow");
  });
});
</script>

</head>

<body>
<form id="target" action="?">
    <input type="text">
    <input id="submit" type="submit" value="Vai">
</form>
<div id="grazie" style="color: red; display: none;"></div>
</body>
</html>

Un paio di domandine.. Il primo selettore poteva essere scritto così? $("#grazie, :submit") o forse meglio cosi $(":submit, #grazie") ?
Il div comunque non appare e mi sto scervellando a capire perchè.. Mha
Grazie in anticipo..
 

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Ho aggiunto qualcosa nel div :p e ho cambiato il nome dell'id ma ancora nulla ..
Codice:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function () {
  $("#inviaform").click(function(){
    $("#grazie").fadeIn("slow");
  });
});
</script>
</head>

<body>
<form id="target" action="?">
    <input type="text" placeholder="test">
    <input id="inviaform" type="submit" value="Vai">
</form>
<div id="grazie" style="background-color: green; color: red; display: none; height: 25px; width: 40px">Grazie</div>
</body>
</html>
 

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Neanche così... :crying: Mi sto demoralizzando uhauhauha

Codice:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( "#inviaform" ).click(function() {
    $("#grazie").fadeIn("slow");
});

</script>
</head>

<body>
<form id="target" action="?" method="post">
    <input type="text" placeholder="test">
    <input id="inviaform" type="submit" value="Vai" onclick="return test();">
</form>
<div id="grazie" style="background-color: green; color: red; display: none; height: 25px; width: 40px">Grazie</div>
</body>
</html>
 

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Sto impazzendo con sta fesseria.. ma proprio non riesco a farla funzionare.. E sopratutto non riesco a capire il perchè :crying:
Qui mi funziona l'alert ma non fa il fadeIn perchè?????
Una giornata a scrivere in mille modi la stessa cosa... ho provato a cambiare selettore... con :submit e il risultato è uguale.. E' come se non prendesse il questo.. $("#div1").fadeIn("slow");
Codice:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
      $(function (){
        $("#premi").click(function(){
          $("#div1").fadeIn("slow");
          alert("Grazie per averci contattato! A presto..");
        })
      })
    </script>
</head>

<body>
<form id="target" action="?" method="post">
    <input type="text" placeholder="test">
    <input id="premi" type="submit" value="Vai">
</form>
<div id="div1" style="background-color: green; color: red; display:none; height: 25px; width: 40px">Grazie</div>
</body>
</html>
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Devi tener presente che normalmente (a prescindere da jQuery) la funzione di un pulsante submit, in un form HTML, esegue un ricaricamento della pagina (oltre ad inviare eventuali dati all'eventuale pagina indicata sull'action). Questo, puoi capire, che interrompe qualunque azione nel momento in cui avviene il submit, perché avviene, appunto, il ricaricamento della pagina.

Ora, bisogna capire cosa esattamente vuoi ottenere.

A mo' di esempio puoi prevenire, via jQuery, l'azione del submit. Però è chiaro che questo va ad impedire l'azione stessa del submit e quindi sarebbe un submit fittizio:
Codice:
<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#submit").click(function(event){
          event.preventDefault();
          $("#grazie").fadeIn("slow");
        });
      });
    </script>
  </head>
  <body>
    <form id="target" action="?">
      <input type="text">
      <input id="submit" type="submit" value="Vai">
    </form>
    <div id="grazie" style="color: red; display: none;">Grazie</div>
  </body>
</html>

Se ti interessa invece eseguire il submit senza ricaricare la pagina, dovrai ricorrere ad AJAX.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
si che lo prende, il problema e che ricarichi la pagina con il form e il div riprrende le impostazioni del css.
Puoi togliere il tag form e sostituire l'attributo type="submit" con type="button"
edit
non avevo visto la risposta di WmbertSea
 

otto9due

Utente Attivo
22 Feb 2014
590
25
28
Alla fine della giornata.. Dopo una sudata immane.. Poco prima di leggere le vostre risposte ( grazie mille perchè avete confermato quanto avevo notato testando lo script su i tester disponibili online ) ho notato come anticipavo che dopo l'invio del form appariva per qualche millisecondo il div e poi procedeva con l'invio fittizio e scompariva lasciando solamente l'alert..
Grazie comunque per l'intervento..
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [PHP] Scopo di una variabile PHP 4
dbdenny Grafica volantino manifestazione cinofila a scopo benefico Webdesign e Grafica 1
M Scopo della mia presentazione Sito MbyWeb.eu Presenta il tuo Sito 0
Dusy Materiale didattico... Discussioni Varie 5
R mi da errore dove inizia il while PHP 1
T foreach e fetchAll dove recupero solo l'ultimo record PHP 5
B Sito dove vendere e comprare di tutto Offerte e Richieste di Lavoro e/o Collaborazione 1
W [PHP] dirmi dove posso trovare.. Offerte e Richieste di Lavoro e/o Collaborazione 1
C Dove trovo ipcamera cgi solo html IP Cam e Videosorveglianza 0
Michelebozzo Dove sono finiti i miti del web? Discussioni Varie 1
P [HTML] Creazione pagina web da dove iniziare HTML e CSS 2
C [PHP] Come realizzare un tema wordpress per monetizzarlo?e dove testarlo gratis? PHP 3
filograndipad2 Da dove arrivano i parametri degli event handler? Sviluppo app per Android 1
W una single board dove gira Windows Hardware 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
D prima prova con ASP... dove sbaglio? Classic ASP 13
Merlina3377 dove vengono salvati i dati Linux e Software 1
Licantropo [phpBB] Forum, rischi e dove installarlo phpBB 4
jonnino2004 guessmyage.it sito dove indovinare l'età delle persone Presenta il tuo Sito 8
G Google recaptcha in verify.php - dove inserire il codice PHP 1
D dove viene memorizzato il mio db sqlite? Sviluppo app per Android 0
G Chi sono, dove vado. Presentati al Forum 1
gandalf1959 [PHP] ciclo while non scrive dove dovrebbe... PHP 2
patrizio hosting da dove iniziare? Hosting 5
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
filippino Facebook UserID dove lo trovo? Social Media Marketing 0
M creare una tabella dove inserire i dati del database Database 1
M Cartella predefinita dove salvare i backup PHP 0
G Dove comprare un sito web Compravendita siti e domini 2
filippino IP Vodafone Station: dove posso leggerlo? Reti LAN e Wireless 1
P Non riesco a capire dove sta l'errore e perchè non mi memorizza il contenuto PHP 14
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 7
S Dove vanno a finire le discussioni inviate? Discussioni Varie 1
max_400 Hosting gratuito dove mettere giochi in flash Hosting 2
otto9due Qualcuno mi dice dove sbaglio in questa classe .. PHP 4
otto9due importare file .php tramite .load dove sbaglio?? jQuery 2
Shyson Dove posizionare i codici php? PHP 5
L da dove escono questi tag? HTML e CSS 3
N Comprare fan facebook? Ecco dove Annunci servizi di Social Media Marketing 2
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
C [Servizio]Visite per siti web o video provenienti da facebook.com o da dove vuoi tu Annunci servizi di Social Media Marketing 0
Mauro Guardiani chi sa dove mettere questo codice Tubular jQuery plugin Javascript 1
L Dove si trovano i bot per aumentare i fans e bisite ai siti!? Sicurezza e Virus 0
filippino Dove comprare domini a prezzi bassissimi (max 3 eu ciascuno)? Domini 1
W Da dove si parte a creare una App?? Sviluppo app per Android 2
D Record disconesso contatore dove sbaglio? Classic ASP 0
M Dove sbaglio con questo script per inserimento record? PHP 1
F Dove promuovere articoli e contenuti (aggregatori)? SEO e Posizionamento 2
N Aiuto php : Modulo Mail non funzionante - Dove sbaglio ? PHP 5

Discussioni simili