Envoyer data "resultat" par email

Question

tibewww

7 Jan 2014 à 20:20

Bonjour a tous,

voila, cela faite quelques jours que je m'arrache les cheveux . . . je suis entrain de creer un quiz online. J'aimerais envoyer les resulats de ce quiz par email, via un formulaire de contact aux moderateur.

J'ai tente differentes options par $POST data,etc mais je n'arrive a rien . .

mon HTML est:


<div class="questionContainer radius">
    <div class="question"><b>Question 1:</b> Inside which HTML element do we put the JavaScript?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q1" id="q1-a" />&lt;js&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-b" />&lt;script&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-c" />&lt;scripting&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-d" />&lt;javascript&gt;</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="next">
            <a class="btnNext">Next &gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer hide radius">
    <div class="question"><b>Question 2:</b> What is the correct JavaScript syntax to write "Hello World"?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q2" id="q2-a" />response.write("Hello World")</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-b" />("Hello World")</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-c" />"Hello World"</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-d" />document.write("Hello World")</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="prev">
            <a class="btnPrev">&lt; Prev</a>
        </div>
        <div class="next">
            <a class="btnNext">Next &gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer radius hide">
    <div class="question"><b>Question 3:</b> Where is the correct place to insert a JavaScript?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q3" id="q3-a" />Both the &lt;thead&gt; section and the &lt;body&gt; section are correct</label>
            </li>
            <li>
                <label><input type="radio" name="q3" id="q3-b" />The &lt;body&gt; section</label>
            </li>
            <li>
                <label><input type="radio" name="q3" id="q3-c" />The &lt;head&gt; section</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="prev">
            <a class="btnPrev">&lt;&lt; Prev</a>
        </div>
        <div class="next">
            <a class="btnNext">Next &gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer radius hide">
    <div class="question"><b>Question 4:</b> What is the correct syntax for referring to an external script called "xxx.js"?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q4" id="q4-a" />&lt;script type="text/javascript" name="xxx.js"&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q4" id="q4-b" />&lt;script type="text/javascript" href="xxx.js"&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q4" id="q4-c" />&lt;script type="text/javascript" src="xxx.js"&gt;</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="prev">
            <a class="btnPrev">&lt; Prev</a>
        </div>
        <div class="next">
            <a class="btnNext">Next &gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer radius hide">
    <div class="question"><b>Question 5:</b> The external JavaScript file must contain the &lt;script&gt; tag?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q5" id="q5-a" />True</label>
            </li>
            <li>
                <label><input type="radio" name="q5" id="q5-b" />False</label>
            </li>
        </ul>
    </div>
       
    
    
    <div class="btnContainer">
        <div class="prev">
            <a class="btnPrev">&lt;&lt; Prev</a>
        </div>
        <div class="next">

<form action="submit.php" method="POST" id="form">
        
    <label>Name</label>
    <input name="name" placeholder="Type Here">
    
     <label>Email</label>
    <input name="email" type="email" placeholder="Type Here">
            
    <label>Message</label>
    <textarea name="message" placeholder="Type Here"></textarea>
    
        <input id="button" type="submit" value="Send">

    </form>

 </div>
        <div class="clear"></div>
    </div>
</div>


<div class="txtStatusBar">Status Bar</div>
<div id="progressKeeper" class="radius">
    <div id="progress"></div>
</div>
<div id="resultKeeper" class="radius hide"></div>
</div>

Jquery part du test:

<script>
$(function(){
    var jQuiz = {
        answers: { q1: 'a', q2: 'a', q3: 'a', q4: 'a', q5: 'a' },
        questionLenght: 5,
        checkAnswers: function() {
            var arr = this.answers;
            var ans = this.userAnswers;
            var resultArr = []
            for (var p in ans) {
                var x = parseInt(p) + 1;
                var key = 'q' + x;
                var flag = false;
                if (ans[p] == 'q' + x + '-' + arr[key]) {
                    flag = true;
                }
                else {
                    flag = false;
                }
                resultArr.push(flag);
            }
            return resultArr;
        },
        init: function(){
            $('.btnNext').click(function(){
                if ($('input[type=radio]:checked:visible').length == 0) {
                            
                    return false;
                }
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).next().fadeIn(500);
                });
                var el = $('#progress');
                el.width(el.width() + 120 + 'px');
            });
            $('.btnPrev').click(function(){
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).prev().fadeIn(500)
                });
                var el = $('#progress');
                el.width(el.width() - 120 + 'px');
            })
            $('.btnShowResult').click(function(){
                var arr = $('input[type=radio]:checked');
                var ans = jQuiz.userAnswers = [];
                for (var i = 0, ii = arr.length; i < ii; i++) {
                    ans.push(arr[i].getAttribute('id'))
                }
            })   
             $('.btnShowResult').click(function(){
                $('#progress').width(300);
                $('#progressKeeper').hide();
                var results = jQuiz.checkAnswers();
                var resultSet = '';
                var trueCount = 0;
                for (var i = 0, ii = results.length; i < ii; i++){
					 
                }
                resultSet += '<div class="totalScore"></br>Your total score is ' + trueCount * 1 + ' / 5</div>'
                $('#resultKeeper').html(resultSet).show(); 
				
				if (trueCount > 4) {
 resultSet += '<div class="totalScoreok"></br>CONGRATULATION YOU PASS, why not to try the next level ?</div>'
                $('#resultKeeper').html(resultSet).show();
				                    }
									
									  if (trueCount <= 4 && trueCount >2)  {
 resultSet += '<div class="totalScoreok"></br>YOUR LEVEL IS OK</div>'
                $('#resultKeeper').html(resultSet).show();            
				        }	
				
				 if (trueCount <= 2) {
 resultSet += '<div class="totalScoreok"></br>YOU SUCK</div>'
                $('#resultKeeper').html(resultSet).show();
				                    }
				
            })
        }
    };
	

    jQuiz.init();
})

$(function() {
      $('#button').click(function(e) {
            e.preventDefault();
            $.ajax({
                  url:'<submit.php>',
                  type:'POST',
                  data:{'message':$('.totalScoreok').html(),'subject':'Subject of your e-mail'},
                  success:function(data) {
                        alert('You data has been successfully e-mailed');
                        alert('Your server-side script said: ' + data);
                  }
            });
      });
});
</script>

et le PHP submit:



<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$formcontent .= $totalScoreok . " out of 5 correct!\n ";
$recipient = "myemail@gmail.com";
$subject = "Contact Form Kino Web";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
sleep(1);//seconds to wait..
header("Location:http://www.kinosurface.com/sucess.html");
?>

Si quelqu'un peut m'eclairer vers ou aller, ce qui ne va pas . .. je serais tres reconnaissant envers cette personne =)

merci pour tout[/i]
Modifié par tibewww (07 Jan 2014 - 20:26)

niuxe

Modérateur

7 Jan 2014 à 20:34

Salut,

Lorsque tu cliques sur le btn #button qu'est ce que ça te retourne dans la console ? Sauf erreur de ma part, ton url est fausse. Enlève les chevrons :


$.ajax({
                  url:'submit.php',
                  //etc.
            });

tibewww

7 Jan 2014 à 20:50

Salut nluxe, merci de ta reponse

lorsque tu dis enlever les chevrons, qu'est ce cela signifie ?

si j'utilise cette portion du code



$(function() {
      $('#button').click(function(e) {
            e.preventDefault();
            $.ajax({
                  url:'<submit.php>',
                  type:'POST',
                  data:{'message':$('.totalScoreok').html(),'subject':'Subject of your e-mail'},
                  success:function(data) {
                        alert('You data has been successfully e-mailed');
                        alert('Your server-side script said: ' + data);
                  }
            });
      });
});

je ne recois rien par email,

si je l'enleve, je recois just les noms, prenoms et message de la contact form, mais pas les resultats du quiz via:


<form action="submit.php" method="POST" id="form">
        
    <label>Name</label>
    <input name="name" placeholder="Type Here">
    
     <label>Email</label>
    <input name="email" type="email" placeholder="Type Here">
            
    <label>Message</label>
    <textarea name="message" placeholder="Type Here"></textarea>
    
        <input id="button" type="submit" value="Send">

    </form>

je debute en jquery et Php . . . si tu peux un m'eclairer =)

merci pour tout

kustolovic

Modérateur

7 Jan 2014 à 22:56

Bonsoir,

je voulais rajouter un truc alors je profite pour répondre à ça:

tibewww a écrit :
Salut nluxe, merci de ta reponse

lorsque tu dis enlever les chevrons, qu'est ce cela signifie ?

remplacer url:'<submit.php>' par url:'submit.php' qui est plus correct. (les chevrons sont < et >)

je rajouterais qu'au lieu de

$('#button').click(function(e) {
  e.preventDefault();
  [etc.]

il vaudrait mieux utiliser:

$('#form').on('submit',function(e) {
  e.preventDefault();
  [etc.]

Ce qui fonctionnera autant quant on presse sur le boutton que quand on soumet le formulaire par «enter». Même si ce n'est pas la source de ton problème.

Quand on débuggue du javascript il vaut mieux avoir une console ouverte, voici comment faire:
http://www.alsacreations.com/astuce/lire/1436-console-javascript.html

Dans chacun de ces outils tu as un onglet console qui va t'afficher des logs, des messages d'informations et des erreurs. Normalement cela devrait t'aider. Ensuite il y a un onglet network ou réseau, qui va te montrer l'appel fait en ajax et l'éventuel retour, c'est très pratique, et instructif.

D'ailleurs, apprend à te servir de la console, par exemple, au lieu de faire des


alert('You data has been successfully e-mailed');
alert('Your server-side script said: ' + data);

tu peux faire des


console.log('You data has been successfully e-mailed');
console.log('Your server-side script said: ', data);
// ou encore console.log(data);

La différence est que cela n'arrête pas le script (comme alert), que cela permet de logguer beaucoup de choses durant le développement, et que si ta variable est un objet, tu auras accès à sa structure au lieu de '[Object Object]'.

tibewww

7 Jan 2014 à 23:53

Amazing, it works now !

Thank you so much !!!!

I've just a last question

I've replace the data by the div id "#resultKeeper" to have by email all the detaisl about which answers are right or not.

It looks like this in the email:

Message: <div> Question 1 is true</div><div> Question 2 is true</div><div> Question 3 is true</div><div> Question 4 is false</div><div> Question 5 is false</div><div class=\"totalScore\"><br>Your total score is 3 / 5</div><div class=\"totalScore\"><br>CONGRATULATION, YOUR LEVEL IS A1.2</div>

Anyway to don't have all the code display (such as <div> <div class=\"totalScore\">,etc) to make it more clean looking ?

here is the portion of jquery part that should be related t . . .

            $('.btnShowResult').click(function(){
                var arr = $('input[type=radio]:checked');
                var ans = jQuiz.userAnswers = [];
                for (var i = 0, ii = arr.length; i < ii; i++) {
                    ans.push(arr[i].getAttribute('id'))
                }
            })
            $('.btnShowResult').click(function(){
                $('#progress').width(300);
                $('#progressKeeper').hide();
                var results = jQuiz.checkAnswers();
                var resultSet = '';
                var trueCount = 0;
                for (var i = 0, ii = results.length; i < ii; i++){
                    if (results[i] == true) trueCount++;
                    resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>'
					 
                }
                resultSet += '<div class="totalScore"></br>Your total score is ' + trueCount * 1 + ' / 5</div>'
                $('#resultKeeper').html(resultSet).show(); 
				
				if (trueCount > 4) {
 resultSet += '<div class="totalScore"></br>CONGRATULATION YOU PASS THE LEVEL XXX , why not to try the next level ?</div>'
                $('#resultKeeper').html(resultSet).show();
				                    }
									
									  if (trueCount <= 4 && trueCount >2)  {
 resultSet += '<div class="totalScore"></br>CONGRATULATION, YOUR LEVEL IS A1.2</div>'
                $('#resultKeeper').html(resultSet).show();            
				        }	
				
				 if (trueCount <= 2) {
 resultSet += '<div class="totalScore"></br>CONGRATULATION, YOUR LEVEL IS A1.1</div>'
                $('#resultKeeper').html(resultSet).show();
				                    }
				
            })
			
			
        }
    };
	

    jQuiz.init();
})


$(function() {
      $('#form').on('submit',function(e) {
  e.preventDefault();
            $.ajax({
                  url:'submit.php',
                  type:'POST',
                  data:{'message':$('#resultKeeper').html(),'subject':'Subject of your e-mail'},
                  success:function(data) {
                        console.log('You data has been successfully e-mailed');
console.log('Your server-side script said: ', data);
                  }
            });
      });
});

Thanks again for everything !![/i][/i][/i]

tibewww

8 Jan 2014 à 00:43

oups . . . j'ai un peu merde au niveau de la langue, desole =), une derniere chose, vu qu'on a change le #button par #form, je recois donc les resultats du test comme je desirais, mais plus les noms, email du destinaire du formulaire de contact


$(function() {
      $('#button').on('submit',function(e) {
  e.preventDefault();

$(function() {
      $('#form').on('submit',function(e) {
  e.preventDefault();

I'm having the results of the test what i wanted, but not anymore the name, email and message from the form below:

<form action="submit.php" method="POST" id="form">
        
    <label>Name</label>
    <input name="name" placeholder="Type Here">
    
     <label>Email</label>
    <input name="email" type="email" placeholder="Type Here">
            
    <label>Message</label>
    <textarea name="message" placeholder="Type Here"></textarea>
    
        <input id="button" type="submit" value="Send">

    </form>

Comment peut-on faire poru "lier" les 2 ?

Merci pour toute ton aide !!

tibewww

8 Jan 2014 à 03:02

oups . . . j'ai un peu merde au niveau de la langue, desole =), une derniere chose, vu qu'on a change le #button par #form, je recois donc les resultats du test comme je desirais, mais plus les noms, email du destinaire du formulaire de contact


$(function() {
      $('#button').on('submit',function(e) {
  e.preventDefault();

$(function() {
      $('#form').on('submit',function(e) {
  e.preventDefault();

I'm having the results of the test what i wanted, but not anymore the name, email and message from the form below:

<form action="submit.php" method="POST" id="form">
        
    <label>Name</label>
    <input name="name" placeholder="Type Here">
    
     <label>Email</label>
    <input name="email" type="email" placeholder="Type Here">
            
    <label>Message</label>
    <textarea name="message" placeholder="Type Here"></textarea>
    
        <input id="button" type="submit" value="Send">

    </form>

Comment peut-on faire poru "lier" les 2 ?

Merci pour toute ton aide !!

Sujet clos

JavaScript, DOM et API Web HTML5

Envoyer data "resultat" par email