jquery: eseguire un form senza ricaricare la pagina

**ricman** · 29-11-2010, 11:52

Ciao, ultimamente ho visto come usare il jquery per caricare una "pagina dentro a un'altra" tramite Load

Dentro un menu laterale in index.php carico la mia "pag_1.php"
$('#content').load('pag_1.php')
e la visualizzo.

Adesso vorrei eseguire un form dentro la pag_1.php restando "fermo lì" senza ricaricare index.php.
Il form ha method

ost ed è tipo questo

<form action="pag_1.php?op=edit" method="post" name="pag_1" id="pag_1" enctype="multipart/form-data">

Ringrazio anticipatamente

**fcaldera** · 29-11-2010, 11:58

all'onsubmit
1) serializza i dati (.serialize())
2) mandali via ajax ($.post)
3) blocca il submit (.preventDefault())

**ricman** · 29-11-2010, 13:12

Originariamente inviato da fcaldera
all'onsubmit
1) serializza i dati (.serialize())
2) mandali via ajax ($.post)
3) blocca il submit (.preventDefault())

Mi sto leggendo le documentazioni su jquery.com ... non è che hai un esempio da farmi vedere? Capisco quello che scrivono loro ma non riesco ad applicare la teoria alla realtà

**fcaldera** · 29-11-2010, 14:28

un esempio da adattare al tuo caso e da eseguire dopo che hai caricato il form in pagina

codice:

$('form').submit(function(evt) {
   var $form = $(this),
        $postdata = $form.serialize(),
        $postURI  = $form.attr('action');
 
   $.post($postURI, $postdata, function() {
       /* dati spediti via ajax */
   });

   evt.preventDefault();
});

**ricman** · 29-11-2010, 16:38

Stavo provando il tuo codice... ho fatto una pagina test3.php e c'ho scritto questo codice (sotto).
La console degli errori di FF mi dice

Errore: $ is not defined
File sorgente: http://localhost:8888/template_new/test3.php
Riga: 27

e alla riga 27 c'è $('form').submit(function(evt) {

codice:

<form method="post" action="test3.php?op=edit" id="test3" name="test3">
	<input type="text" name="nome">
	<input type="submit" value="manda">
</form>


<script type="text/javascript">

$('form').submit(function(evt) {
   var $form = $(this),
        $postdata = $form.serialize(),
        $postURI  = $form.attr('action');
 
   $.post($postURI, $postdata, function() {
       /* dati spediti via ajax */
   });

   evt.preventDefault();
});


</script>

**fcaldera** · 29-11-2010, 16:41

cè poco da interpretare... se $ non è difinito non stai caricando correttamente jQuery

**ricman** · 29-11-2010, 16:51

Originariamente inviato da fcaldera
cè poco da interpretare... se $ non è difinito non stai caricando correttamente jQuery

E' vero... non avevo caricato il jquery...

Adesso non ho errori... ma come stampo a video il nome inserito nel campo nome? E come riutilizzo ciò che abbiamo serializzato (?op=edit)?

Mi scuso se dico banalità....

**fcaldera** · 29-11-2010, 17:14

premesso che dovresti farti restituire qualcosa dal seerver, i dati di ritorno li gestisci dentro la funzione (che equivale ad una success callback)

codice:

$.post($postURI, $postdata, function(data) {
       alert(data)
});

essendo un esempio non ho previsto una callback di errore e un timeout per la chiamata ajax (assolutamente da prevedere)

**silvyy** · 30-11-2010, 12:44

Ciao, è il mio primo post... scusate se dico castronerie...

Ho la stessa necessità di "ricman". In assenza di esperienza ho copiato il vostro codice per vedere come funziona.
Non capisco quello che succede. Mi aspettavo che nell'alert vedessi ciò che ha inviato il form, invece vedo praticamente tutto il codice html della pagina test3.php.

Mi date una mano? Posto il codice così come l'ho "copiato"...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>prova</title> 
<script type="text/javascript" src="/js/jquery.js"></script>
<style type="text/css"></style> 
</head>
<body> 

<form method="post" action="test3.php?op=edit" id="test3" name="test3">
	<input type="text" name="nome">
	<input type="submit" value="manda">
</form>


<script type="text/javascript">

$('#test3').submit(function(evt) {
   var $form = $(this),
        $postdata = $form.serialize(),
        $postURI  = $form.attr('action');
 
   $.post($postURI, $postdata, function(data) {
       alert(data)
   });

   evt.preventDefault();
});

</script>

**fcaldera** · 30-11-2010, 14:03

Originariamente inviato da silvyy

Non capisco quello che succede. Mi aspettavo che nell'alert vedessi ciò che ha inviato il form, invece vedo praticamente tutto il codice html della pagina test3.php.

ed è esattamente quello che fa quel pezzo di codice
'data' è la variabile che contiene la risposta del server come spiegato nel post subito prima del tuo

i dati che tu mandi al server sono contenuti nella variabile $postdata

jQuery ha una documentazione eccellente, se si hanno problemi basta fare una ricerca nel sito ufficiale, ci sono anche degli esempi molto semplici...

Discussione: jquery: eseguire un form senza ricaricare la pagina

Strumenti discussione

Ricerca discussione

Visualizza

jquery: eseguire un form senza ricaricare la pagina

Permessi di invio