- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- recupero variabile radio button+label
-
recupero variabile radio button+label
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>"; } ?>