Barra laterale
programmazione:jquery:form
I form con Jquery
Autore: Fabio Di Matteo
Ultima revisione: 16/05/2014 - 10:08
Con Jquery è possibile realizzare velocemente complete form application a partire dalle sue api. Di seguito un esempio di un form html che manda alcuni dati (nome, cognome, email) ad una certa pagina (save.php) che grazie ad uno script php restituisce un output alla pagina del form in un preciso <div> (in questo caso riscrive i dati). Dunque i file sono 2 : form.html e save.php .
Ecco una demo:
Il form html
L'oggetto jquery che si occupera' di inviare il form è $.ajax.
form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){ //intercetto il submit del form
//raggruppo tutti i campi del form in un oggetto
var querystring = $(this).serialize();
$.ajax({
url: 'save.php', //pagina che si occupera' di ricevere i dati
type: "POST", //tipo di form
dataType: 'html', //tipo di dati ritornati dal server
data: querystring, //dati del form
success: function(data) {
//codice da eseguire in caso di successo della chiamata ajax. In "data" abbiamo la risposta del server.
$('#outputServer').html(data);
},
error: function(data){
//codice da eseguire in caso di errore della chiamata ajax
$('#outputServer').html('Si sono verificati alcuni errori: ');
},
statusCode: { // (Opzionale) - tramite questo oggetto possiamo intercettare i codici di stato http
404: function() {
alert( "page not found" );
}
}
});
//Evita che il form venga inviato tradizionalmente
return false;
});
});
</script>
<title>Form con jquery</title>
</head>
<body>
<form action="#" id="myform" method="post">
nome: <input type="text" name="nome" id="nome"/><br />
cognome: <input type="text" name="cognome" id="cognome"/><br />
email: <input type="text" name="email" id="email"/><br />
<input type="submit" value="invia" name="submit" />
</form>
<div id="outputServer"></div>
</body>
</html>
Pagina lato server
save.php
<?php echo 'Hai inviato i seguenti dati:<br>'; echo $_POST['nome']. ' '.$_POST['cognome'].' '.$_POST['email']; ?>
programmazione/jquery/form.txt · Ultima modifica: 18/04/2018 - 15:49 (modifica esterna)
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
