Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    7

    Recupero dati checkbox da HTML a Javascript per invio mail automatiche

    Ciao a tutti. Sto lavorando a una pagina web in cui "iscriversi" inserendo nome, mail, paese di provenienza e due campi in checkbox. Una volta completata la registrazione invia automaticamente una mail al mio indirizzo di posta elettronica. Ho preso come base un javascript di Contact Form, il problema è che mancano i checkbox, io avevo aggirato il problema mettendo due textbox al posto del checkbox per scrivere la risposta positiva o negativa, però è davvero brutto. Non ho mai studiato in javascript, qualcosa ne capisco però davvero non riesco a risolvere. In breve il problema è:

    -Recuperare nel file Javascript i risultati delle due checkbox in html (Se checked o no) e inviare al file php la risposta in modo da poter inserire nella mail la preferenza. Esempio:

    Newsletter (checked)

    Nella mail deve apparire newsletter: yes

    Posto il codice nel caso fosse poco chiaro, sia la parte html che la parte in js con quello che ho provato a fare:

    HTML:

    codice:
    <form id="formail" method="post" action="">
        <div id="risposta">
        </div>
        <input type="text" id="oggetto" name="ogggetto"  value="User registration" disabled="disabled"/><br /><br />
        <input type="text" id="nome" name="nome"  value="" placeholder="Name" /><br /><br />
        <input type="text" id="email" name="email"  value="" placeholder="Email" /><br /><br />
        <input type="text" id="country" name="country" placeholder="Country"><br /><br />
        <div align="center">
        <input type="checkbox" id="newsletter" name="newsletter" checked="checked">Newsletter &nbsp;
        <input type="checkbox" id="adopt" name="adopt">Adopt<br /><br /><br />
        <input type="submit" id="invia" name="invia" value="Submit" />&nbsp;&nbsp;
        <input type="reset" id="reset" name="reset" value="Reset" />
        <input type="hidden" id="risposta" name="risposta"  />
        </div>
        </form>
    JS:

    codice:
     $(document).ready(function(){
        $("#invia").click(function(){
        
        //Recuperiamo tutte le variabili
            var valid = '';
            var isr = ' is requested.</p>';
            var name = $("#nome").val();
            var mail = $("#email").val();
            var subject = $("#oggetto").val();
            var country = $("#country").val();
            var risposta = $("#risposta").val();
            var newsletter = document.getElementById('newsletter');
            var adopt = document.getElementById('adopt');
            
        //Checkbox
            
            if (newsletter.checked)
                risposta += 'Newsletter: Yes \n';
            else
                risposta +='Newsletter: No \n';
            if (adopt.checked);
                risposta += 'Adopt: Yes';
            else
                risposta += 'Adopt: No';
    
    var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&country=' + country + '&risposta=' + risposta;
                $("#risposta").css("display", "block");
                $("#risposta").css("background-color","#FFFFA0");
                $("#risposta").html("<p>Sending message..</p>");
                $("#risposta").fadeIn("slow");
                setTimeout("send('"+datastr+"')",2000);


    Grazie mille in anticipo

  2. #2
    codice:
     $(document).ready(function(){
        $("#invia").click(function(){
        
        //Recuperiamo tutte le variabili
            var valid = '';
            var isr = ' is requested.</p>';
            var name = $("#nome").val();
            var mail = $("#email").val();
            var subject = $("#oggetto").val();
            var country = $("#country").val();
            var risposta = $("#risposta").val();
            
            //le due variabili conterranno 'true' o 'false' a seconda che la rispettiva checkbox sia spuntata o meno
            var newsletter = $('#newsletter').is(':checked');
            var adopt = $('#adopt').is(':checked');
            
        //Checkbox
            
            if (newsletter.checked)
                risposta += 'Newsletter: Yes \n';
            else
                risposta +='Newsletter: No \n';
            if (adopt.checked);
                risposta += 'Adopt: Yes';
            else
                risposta += 'Adopt: No';
    
    var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&country=' + country + '&risposta=' + risposta;
                $("#risposta").css("display", "block");
                $("#risposta").css("background-color","#FFFFA0");
                $("#risposta").html("<p>Sending message..</p>");
                $("#risposta").fadeIn("slow");
                setTimeout("send('"+datastr+"')",2000);

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    7
    Non mi funziona lo stesso... provo a postare il codice completo del javascript e non solo la parte dei checkbox e anche la parte php..

    PHP

    codice:
    <?php
    //Recuperiamo tutte le variabili
        $mail = $_POST['mail'];
        $name = $_POST['name'];
        $subject = $_POST['subject'];
        $country = $_POST['country'];
        $risposta = $_POST['risposta'];
        
    //Qui andrà inserito il tuo indirizzo e-mail
    $to = "sc.papa93@gmail.com";
    
    
    //Creazione del mesaggio da inviare
    $message = "Name: ".$name."<br />";
    $message .= "Mail: ".$mail."<br />";
    $message .= "From: ".$country."<br />";
    $message .= .$risposta.;
    $headers = "From: $mail \n";
    $headers .= "Reply-To: $mail \n";
    $headers .= "MIME-Version: 1.0 \n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1 \n";
    
    
    //Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio
     if(mail($to, $subject,$message, $headers)){
        echo "<p>Message sent successfully.</p>";
    }
    //Altrimenti un messaggio di errore
    else{ 
        echo "<p>Error: the message has not been sent.</p>";
    }
    ?>
    JS:

    codice:
     $(document).ready(function(){    $("#invia").click(function(){
        
        //Recuperiamo tutte le variabili
            var valid = '';
            var isr = ' is requested.</p>';
            var name = $("#nome").val();
            var mail = $("#email").val();
            var subject = $("#oggetto").val();
            var country = $("#country").val();
            var risposta = $("#risposta").val();
            
            //le due variabili conterranno 'true' o 'false' a seconda che la rispettiva checkbox sia spuntata o meno
            var newsletter = $('#newsletter').is(':checked');
            var adopt = $('#adopt').is(':checked');
            
        //Checkbox
            
            if (newsletter.checked)
                risposta += 'Newsletter: Yes \n';
            else
                risposta +='Newsletter: No \n';
            if (adopt.checked);
                risposta += 'Adopt: Yes';
            else
                risposta += 'Adopt: No';
    		
    	//Eseguiamo una serie di controlli
    		if (name.length<1) {
    			valid += '<p>A valid name'+isr;
    		}
    		if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
    			valid += '<p>A valid E-mail address'+isr;
    		}
    		if (subject.length<1) {
    			valid += '<p>A valid country'+isr;
    		}
    		if (country.length<1) {
    			valid += '<p>A valid country'+isr;
    		}
    		
    	//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 + '&subject=' + subject + '&country=' + country + '&risposta=' + risposta;
                $("#risposta").css("display", "block");
                $("#risposta").css("background-color","#FFFFA0");
                $("#risposta").html("<p>Sending message..</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")',2000);
    	}
    	});
    }
    Grazie ancora.. Senza la parte dei checkbox mi esce sopra al momento dell'invio "Invio del messaggio in corso" e poi manda la mail, così mi fa solo un refresh della pagina senza fare nulla..

  4. #4
    Scusa, la mia risposta precedente era inesatta.
    Il metodo con cui gestisci i checkbox è corretto, in generale.

    Prova questa soluzione. Se non va, descrivi il comportamento della pagina ed il contenuto della console degli errori.


    codice:
     $(document).ready(function(){    
          $("#invia").click(function(){
        
        //Recuperiamo tutte le variabili
            var valid = '';
            var isr = ' is requested.</p>';
            var name = $("#nome").val();
            var mail = $("#email").val();
            var subject = $("#oggetto").val();
            var country = $("#country").val();
            var newsletter=$('#newsletter');
            var adopt=$('#adopt');
            var risposta = '';
            
            
        //Checkbox
            
            if (newsletter.is(':checked'){
                risposta += 'Newsletter: Yes ';
            }else{
                risposta +='Newsletter: No ';
            }
            if (adopt.is(':checked'){
                risposta += 'Adopt: Yes';
            }else{
                risposta += 'Adopt: No';
            }
            
        //Eseguiamo una serie di controlli
            if (name.length<1) {
                valid += '<p>A valid name'+isr;
            }
            if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
                valid += '<p>A valid E-mail address'+isr;
            }
            if (subject.length<1) {
                valid += '<p>A valid country'+isr;
            }
            if (country.length<1) {
                valid += '<p>A valid country'+isr;
            }
            
        //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 + '&subject=' + subject + '&country=' + country + '&risposta=' + risposta;
                $("#risposta").css("display", "block");
                $("#risposta").css("background-color","#FFFFA0");
                $("#risposta").html("<p>Sending message..</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")',2000);
        }
        });
    }

  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    7
    Ho fatto copia e incolla del testo pari pari, ma niente.. ti lascio il link della che è più facile capirne il comportamento:

    Non funzionante:
    http://www.nolimitsadventure.com/Vario/iscrizione.html

    Come dovrebbe essere, senza i textbox ma con i checkbox:
    http://www.nolimitsadventure.com/pro...scrizione.html

    Spero non sia spam, non ho comunque nessun guadagno è tutto per una associazione no-profit

  6. #6
    La console degli errori segnala un errore alla riga 37 di jQuery_mail.js

    codice:
    if(newsletter.is(':checked'){
    manca una chiusa tonda prima dell'aperta graffa.

  7. #7
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    7
    Funziona! Grazie mille davvero, mi hai risolto un bel grattacapo!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.