show hidden div only if form is filled on submit

Question

It has been one week that I'm trying to achieve that, but I don't manage to make it work . . .

I've a result contain in a div, which is show when we submit a form with the information of the user.

I've "link" the result with a contact form to send all the information by email.

I'd like to show this div (of the result, which is call resultKeeper), only after the submitting is filled, as at the moment user can click submit, and the result appear immediately, even the form is not fill. . . but I receive the information by email only if they fill everything .

here is my jquery:

$(function() {
$('#quesForm').on('submit',function(e) { 
e.preventDefault();
// I am fetching the form values you could get them by other selectors too
var uname = $("input[name=senderName]").val(); 
var uemail = $("input[name=senderEmail]").val();
    var msg = $("input[name=message]").val()

$.post('submit.php',{senderName:uname,senderEmail:uemail,message:msg,results:$('#resultKeeper').html(),subject:'Subject of your e-mail'},function(result){
      // result variable contains your response text
      // I guess you trying to update your response 
     // notice I have used html(result) as you have just used html()
 $('#responseMessage').html(result);
});


  // you dont require `return false`
  // you have already did it using e.preventDefault();
});
}); 

My php submit:

<?php $name = $_POST['senderName'];
   $email = $_POST['senderEmail'];
   $message = $_POST['message'];
   $results = $_POST['results'];
   $results = strip_tags($results); // add this to remove html tags and all
   $formcontent="From: $name \n Email: $email \n Phone: $message \n Results: \n      $results";
   $recipient = "email@email.com";
   $subject = "subject";
   $mailheader = "From: $email \r\n";
   mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
   echo "";
   ?>

My html of the form:

   <form action="submit.php" method="POST" id="quesForm">
   <label form="senderName">Your Name</label>
  <input type="text" name="senderName" id="senderName" placeholder="Please type your name" required maxlength="40" /><br/>

   <label form="senderEmail">Your Email Address</label>
  <input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your name" required maxlength="40" /><br/>

<label form="message" style="padding-top: .5em;">Your Message</label>
  <input type="text" name="message" id="message" placeholder="Please type your message"  required maxlength="40" />

 <input id="button"  type="submit" value="Send" class="btnShowResult"  >

Thank you all your help =)

Answer 1

You have a couple of things you have left out :

1. You are not returning any data from your PHP to JQUERY post
2. There's no $result in your submission, so there's no need for your php to use it
3. There's no div or other item in your html named #responseMessage, so i created one

The code below should work

<?php $name = $_POST['senderName'];
$email = $_POST['senderEmail'];
$message = $_POST['message'];
//$results = $_POST['results'];
//$results = strip_tags($results); // add this to remove html tags and all
$formcontent="From: $name \n Email: $email \n Message: $message \n";
$recipient = "email@email.com";
$subject = "subject";
$mailheader = "From: $email \r\n";
//mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
print $formcontent;
?>

//note that i commented out the mail because i have not configured smtp so i didnt want it to "die"

For your html and jquery

<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<form action="submit.php" method="POST" id="quesForm">
<label form="senderName">Your Name</label>
<input type="text" name="senderName" id="senderName" placeholder="Please type your name" required maxlength="40" />
<br/>
<label form="senderEmail">Your Email Address</label>
<input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your name" required maxlength="40" /><br/>

<label form="message" style="padding-top: .5em;">Your Message</label>
<input type="text" name="message" id="message" placeholder="Please type your message"  required maxlength="40" />
<input id="button"  type="submit" value="Send" class="btnShowResult"  >
<div id="responseMessage"></div>
<script type="text/javascript">
$(function() {
$('#quesForm').on('submit',function(e) { 
e.preventDefault();
// I am fetching the form values you could get them by other selectors too
var uname = $("input[name=senderName]").val(); 
var uemail = $("input[name=senderEmail]").val();
var msg = $("input[name=message]").val()
$.post('submit.php', {senderName:uname,senderEmail:uemail,message:msg,results:$('#resultKeeper').html(),subject:'Subject of your e-mail'},function(result){
  // result variable contains your response text
// I guess you trying to update your response 
// notice I have used html(result) as you have just used html()
$('#responseMessage').html(result);
});
});
});
</script>

UPDATED JAVASCRIPT

$(function(){
var jQuiz = {
    answers: { q1: 'c'},
    questionLenght: 1,
    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() + 300 + 'px');
        });
        $('.btnPrev').click(function(){
            $(this).parents('.questionContainer').fadeOut(500, function(){
                $(this).prev().fadeIn(500)
            });
            var el = $('#progress');
            el.width(el.width() - 300 + '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++){
                if (results[i] == true) trueCount++;
                resultSet += '<div id="questionanswrs"> Question ' + (i + 1) + ' is ' + results[i] + '</div>'

            }
            resultSet += '<div class="totalScoreok"></br>Your total score is ' + trueCount * 1 + ' / 20</div>'
            //$('#resultKeeper').html(resultSet).show(); 

                if (trueCount > 15) {
resultSet += '<div class="totalScore"></br>results goes here</div>'
            //$('#resultKeeper').html(resultSet).show();
                                }

                                  if (trueCount <= 15 && trueCount >10)  {
resultSet += '<div class="totalScore"></br>results goes here</div>'
            //$('#resultKeeper').html(resultSet).show();            
                    }   

                     if (trueCount <=10 && trueCount >5)  {
resultSet += '<div class="totalScore"></br>results goes here</div>'
            //$('#resultKeeper').html(resultSet).show();            
                    }   

                 if (trueCount <= 5) {
resultSet += '<div class="totalScore"></br>results gose here</div>'
            //$('#resultKeeper').html(resultSet).show();
                                }
    var uname = $("input[name=senderName]").val(); 
    var uemail = $("input[name=senderEmail]").val();
    var msg = $("input[name=message]").val()
    if ((uname != null && uname!="")&& (uemail!=null && uemail!="" && uemail.indexOf("@")!=-1) && (msg !=null && msg!="")){     
            console.log("msg'" + msg + "'");
    }else{
        resultSet="Error message. Please complete your form";
    }
        $('#resultKeeper').html(resultSet).show();              
        })
    }
};


jQuiz.init();
})