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

我的表格形式：

   <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

你遗漏了几件事：

您没有将任何数据从PHP返回到JQUERY帖子
您的提交中没有$结果，因此您的php无需使用它
你的html中没有名为#responseMessage的div或其他项目，所以我创建了一个

以下代码应该有效

<?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;
?>

//请注意我注释了邮件，因为我没有配置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();
})

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

1 个答案: