仅在表单填写提交时才显示隐藏的div

Question

我试图实现这一点已经过了一个星期，但我没有设法使其工作。 。 。

我有一个结果包含在div中，当我们提交表单时显示用户的信息。

我已经将结果与联系表单“链接”，通过电子邮件发送所有信息。

我想显示这个div（结果，这是调用resultKeeper），只有在提交填充后，因为此刻用户可以单击提交，结果立即出现，即使表单不是填。 。 。但我只有在填写完所有内容后才能通过电子邮件收到信息。

这里是我的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(); 
}); 
}); 

我的PHP提交：

<?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 protected]"; 
    $subject = "subject"; 
    $mailheader = "From: $email \r\n"; 
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
    echo ""; 
    ?> 

我的表格的HTML：

<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" > 

感谢大家的帮助= ）

Answer 1

你有一对夫妇的事情，你已经离开了：

1. 你是不是从你的PHP将jQuery返回任何数据发布
2. 有没有$结果在您提交的，所以没有必要为您的PHP的使用它
3. 有在你的HTML命名#responseMessage不派息或其他项目，所以我创建了一个

下面的代码应工作

<?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 protected]"; 
$subject = "subject"; 
$mailheader = "From: $email \r\n"; 
//mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
print $formcontent; 
?> 

//注意我注释掉的邮件，因为我还没有配置SMTP所以我不希望它 “死”

为HTML代码和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> 

修订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(); 
})