Nel sito che sto costruendo, tramite link che fanno uso di jQuery, visualizzo le varie sezioni senza ricaricare ogni volta l'intera pagina.
Ora ho un problema.
In una di queste pagine c'è una form per i contatti.
Vorrei che inviando i dati, questi venissero raccolti da una pagina php che poi spedirà un'email e, nella stessa pagina dell'invio,venga sostituita la form per essere rimpiazzata da un messaggio che informi dell'avvenuto invio.
Per ora ho fatto così, ma vengo rimandato alla home e il messaggio di invio avvenuto non appare:
pagina principale
Codice PHP:
//nell'header ci sono le inclusioni dei file JS e CSS
<body>
<div id="container">
<div id="main">
<div id="header">[img]images/logo.png[/img]</div>
<div id="navigation">
<ul id="hor">
[*][url="#"]Home[/url]
[*][url="#"]Storia[/url]
[*][url="#"]Contatti[/url]
[*][url="#"]Prodotti[/url]
[/list]
</div>
<div class="clear"></div>
<div id="content">
<?php include("home.php") ?>
</div>
<div id="footer">footer</div>
</div>
<div id="shadow-right"></div>
<div id="shadow-bottom"></div>
<div id="shadow-corner"></div>
</div>
</body>
</html>
file contenente la form che viene inclusa
Codice PHP:
<script type="text/javascript">
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// ometto la validazione dei vari campi che funziona.
var dataString = 'email='+ email + '&oggetto=' + oggetto + '&testo=' + testo;
$.ajax({
type: "POST",
url: "../../utils/messaggio.php",
data: dataString,
success: function() {
$('#content_contact').html("<div id='message'></div>");
$('#message').html("<h2>Messaggio inviato!</h2>")
.append("
Sarete presto ricontattati.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("[img]../../images/check.png[/img]");
});
}
});
return false;
});
});
/* runOnLoad è un metodo contenuto in un file js che ho scaricato da un tutorial,
il tutorial messo da solo funziona, quindi questo file dovrebbe essere ok non contenendo
nulla di riferito agli elementi della form */
runOnLoad(function(){
$("input#email").select().focus();
});
</script>
<div id="content_contact">
<div id="dove_siamo">
email: [email]blablabla@isp.it[/email]
Indirizzo: Piazza Venezia, 1 00100 Roma
[img]images/mappa.jpg[/img]
</div>
<div id="contact_form">
<form id="form_contatti" method="post" action="">
<fieldset id="contact_tab">
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">E' necessario inserire un indirizzo email.</label>
<label for="oggetto" id="oggetto_label">Oggetto</label>
<input type="text" name="oggetto" id="oggetto" size="30" value="" class="text-input" />
<label class="error" for="oggetto" id="oggetto_error">E' necessario inserire un oggetto.</label>
<label for="messaggio" id="messaggio_label">Messaggio</label>
<textarea name="messaggio" id="messaggio" cols="50" rows="8" class="text-input"></textarea>
<label class="error" for="messaggio" id="messaggio_error">E' necessario inserire un messaggio.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Invia" />
</fieldset>
</form>
</div>
</div>
Riuscite a capire cosa ci sia che non va?
Rispondi quotando