A scopo didattico.. Dove sbaglio?

otto9due · 4 Dic 2014

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 · 4 Dic 2014

Ho aggiunto qualcosa nel div

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 · 4 Dic 2014

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 · 4 Dic 2014

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 · 4 Dic 2014

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 · 4 Dic 2014

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 · 4 Dic 2014

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..

Cerca

Cerca

A scopo didattico.. Dove sbaglio?

otto9due

Utente Attivo

otto9due

Utente Attivo

otto9due

Utente Attivo

otto9due

Utente Attivo

WmbertSea

Moderatore

criric

Super Moderatore

otto9due

Utente Attivo

Discussioni simili