Salve a tutti, avrei un problema con questo form. In particolare non riesco a recuperare il valore del radio button in questo form che ha controllo dei campi in jquery e poi l'invio in php.
Stile css:
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
#container {
padding: 20px;
margin: 0 auto;
width: 600px;
background: #fff;
}
p:not(#foo) > input[type='radio'], /* Nasconde checkbox e radio button */
p:not(#foo) > input[type='checkbox'] {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
p:not(#foo) > input[type='radio'] + label,
p:not(#foo) > input[type='checkbox'] + label {
margin: 0 10;/* Azzera i margini */
padding: 2px 0 0px 24px; /* Crea spazio con il padding sinistro per ospitare l'immagine di sfondo */
cursor: pointer; /* Imposta il cursore */
background: url('start.png') left center no-repeat; /* Imposta lo sfondo iniziale per checkbox e radio button */
}
p:not(#foo) > input[type='radio']:checked + label { /*Modifica lo sfondo del radio button quando viene attivato */
background-image: url('radiobutton.png');
}
p:not(#foo) > input[type='checkbox']:checked + label { /*Modifica lo sfondo del checkbox quando viene attivato */
background-image: url('checkbox.png');
}
</style>
Ecco l'html:
<form id="formail" action="" method="post">
<h2><span style="color: #000000;">TITOLO</span></h2>
<p><span style="font-size: 14px; color:;">Email: inxxxxfo@xxxxxxxe - Cell. +39 340 0000000 </span> </p>
<br />
<p><strong><span style="color: #000;">I campi con asterisco sono obbligatori</span></strong></p>
<p>Nome <strong><span style="color: #ff0000;">*</span></strong>: <input id="nome" type="text" name="nome" value="" /></p>
<p>E-mail <strong><span style="color:;">*</span></strong>: <input id="email" type="text" name="email" value="" /></p>
<p>Recapito Tel (solo numeri): <input id="tel" type="text" name="tel" value="" /></p>
<p>Data Arrivo: <input id="datepicker" type="text" readonly="readonly" /> Data Partenza: <input id="datepicker1" type="text" readonly="readonly" /></p>
<br/>
<p class="rad">Tipologia:<input type="radio" id="apart1" name="apart" value="Residence "><label for="apart1">Residence </label> <input type="radio" id="apart2" name="apart" value="Case Vacanza "><label for="apart2">Case Vacanza </label></p>
<br/>
<p>Richiesta <strong><span style="color:;">*</span></strong>:</p> <textarea id="messaggio" name="messaggio" rows="9" cols="10"></textarea>
<br/>
<p>
<p><input id="invia" type="submit" name="invia" value="Invia" /></p>
<div id="risposta"> </div>
</form>
controllo jquery
$(document).ready(function(){
$("#invia").click(function(){
//Recuperiamo tutte le variabili
var valid = '';
var isr = ' deve essere inserito.</p>';
var name = $("#nome").val();
var mail = $("#email").val();
var tel = $("#tel").val();
var apart = $("#apart").val();
var datepicker = $("#datepicker").val();
var datepicker1 = $("#datepicker1").val();
var messaggio = $("#messaggio").val();
var invia = $(this, "input[type='submit']");
//Eseguiamo una serie di controlli
if ( (name.length<1) || (name.length>25)) {
valid += '<p>Campo <strong>Nome</strong> Obbligatorio</p>';
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>Inserire una <strong>Mail valida</strong></p>';
}
if ((messaggio.length<1)) {
valid += '<p><strong>Richiesta</strong> Obbligatoria</p>';
}
if ((messaggio.length>300)) {
valid += '<p>Campo <strong>Richiesta</strong> troppo lungo, ridurre i caratteri</p>';
}
if ( isNaN(tel) ) {
valid += '<p>Campo <strong>Telefono</strong> NON corretto, inserire solo numeri</p>';
}
if ( tel.length>15 ) {
valid += '<p>Campo <strong>Telefono</strong> troppo lungo, ridurre i caratteri</p>';
}
//Se i controlli non vengono superati, appare il messaggio di errore.
if (valid!='') {
$("#risposta").fadeIn("slow");
$("#risposta").html("<p><b>Errore:</b></p>"+valid);
$("#risposta").css("background-color","#ffc0c0");
}
//Se i controlli vengono superati, compare un messaggio di invio in corso
else {
var datastr ='name=' + name + '&mail=' + mail + '&apart=' + apart + '&tel=' + tel + '&datepicker1=' + datepicker1 + '&datepicker=' + datepicker + '&messaggio=' + encodeURIComponent(messaggio);
$(invia).attr("disabled", "true");
$("#risposta").css("display", "block");
$("#risposta").css("background-color","#FFFFA0");
$("#risposta").html("<p>Invio del messaggio in corso..</p>");
$("#risposta").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
}
return false;
});
});
//Creazione della funzione di invio. Si baser� sul nostro file php "mail.php".
function send(datastr){
$.ajax({
type: "POST",
url: "mail.php",
data: datastr,
cache: false,
success: function(html){
$("#risposta").fadeIn("slow");
$("#risposta").html(html);
$("#risposta").css("background-color","#e1ffc0");
setTimeout('$("#risposta").fadeOut("slow")',80000);
}
});
}
invio php
<?php
//Recuperiamo tutte le variabili
$mail = $_POST['mail'];
$name = $_POST['name'];
$apart = $_POST['apart'];
$datepicker = $_POST['datepicker'];
$datepicker1 = $_POST['datepicker1'];
$tel = $_POST['tel'];
$messaggio = $_POST['messaggio'];
//Qui andrà inserito il tuo indirizzo e-mail
$to = "xxxxxxxxxxxx Residence ";
// IL SOGGETTO DELLA MAIL
$subject = "[xxxxxxxxxxx.it] - Richiesta Informazioni";
///Creazione del mesaggio da inviare
$headers = "From: $mail \n";
$headers .= "Content-type: text/html; charset=utf-8\n";
$message = "Hai ricevuto una e-mail da xxxxxxxxxxxxx.it <br/><br/>";
$message .= "Nome: ".$name."<br/> ";
$message .= "Email: ".$mail."<br/> ";
$message .= "Telefono: ".$tel."<br/> ";
$message .= "Arrivo: ".$datepicker."<br/> ";
$message .= "Partenza: ".$datepicker1."<br/> ";
$message .= "Tipologia: ".$apart."<br/> ";
$message .= "Messaggio: <br /><br />".$messaggio."<br /><br />";
//Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio
if(mail($to, $subject,$message, $headers)){
echo "<p>Messaggio inviato con successo</p>";
}
//Altrimenti un messaggio di errore
else{
echo "<p>Ci sono stati degli errori nell'invio della e-mail.</p>";
}
?>