【发布时间】：2016-01-02 02:50:24
【问题描述】：
附：编辑删除不必要的代码
你能告诉我我在这里做错了什么吗？ 错误日志没有显示任何内容。
这是我的 html、js 和 php。
sample.js
// this is to prevent page refresh, right?
stepsForm.prototype.options = {
onSubmit : function() { return false; }
};
// submits the form, but i add some js in sample.html, so this one will not work.
stepsForm.prototype._submit = function() {
this.options.onSubmit( this.el );
}sample.html
<div class="container">
<section>
<form id="theForm" class="simform" autocomplete="off" action="form-process.php">
<div class="simform-inner">
<ol class="questions">
<li>
<span><label for="q1">What's your name / full name?</label></span>
<input id="q1" name="q1" type="text" />
</li>
<li>
<span><label for="q2">What's your email address?</label></span>
<input id="q2" name="q2" type="text" data-validate="email" />
</li>
<li>
<span><label for="q3">What's your phone number?</label></span>
<input id="q3" name="q3" type="text" data-validate="phone" />
</li>
<li>
<span><label for="q4">Type your question below?</label></span>
<input id="q4" name="q4" type="text" />
</li>
</ol>
<!-- /questions -->
<button class="submit" type="submit">Send answers</button>
<div class="controls">
<button class="next"></button>
<div class="progress"></div>
<span class="number">
<span class="number-current"></span>
<span class="number-total"></span>
</span>
<span class="error-message"></span>
</div>
<!-- / controls -->
</div>
<!-- /simform-inner -->
<span class="final-message"></span>
</form>
<!-- /simform -->
</section>
</div>
<!-- /container -->
<script src="js/classie.js"></script>
<script src="js/stepsForm.js"></script>
<!-- this is the script that will replace the one in the sample.js -->
<script>
var theForm = document.getElementById('theForm');
new stepsForm(theForm, {
onSubmit: function(form) {
classie.addClass(theForm.querySelector('.simform-inner'), 'hide');
var name = $("#q1").val();
var email = $("#q2").val();
var number = $("#q3").val();
var message = $("#q4").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "form-process.php",
data: JSON.stringify({
name: name,
email: email,
number: number,
message: message
}),
success: function(response) {
var data = response.d;
var messageEl = theForm.querySelector('.final-message');
messageEl.innerHTML = 'Thank you! We\'ll be in touch.';
classie.addClass(messageEl, 'show');
}
});
}
});
</script>sample.php
$EmailTo = "mail@mail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone Number: ";
$Body .= $number;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page所以这个过程的步骤是从 html 获取输入，用 ajax (js) 处理，然后发送到 sample.php 以邮寄，对吗？ 但我似乎无法通过 ajax 进程或 sample.php。我的代码导致空白页并且没有外发电子邮件。
由于我是 php 和 js 的新手，我主要对源代码进行逆向工程以使其适合我。这次我取了codrops的“极简表单界面”。
这也是我在 SO 中的第一篇文章，所以请温柔:)
【问题讨论】：
-
我认为你不能再粘贴代码了......你能不能试着指出至少到什么时候这才有效？
-
"向我解释 ajax 表单的概念" 这不是要求解释概念的地方。了解您想要做什么，如果您发现您的代码有特定问题，请回来询问。
-
what the code means and do (per line).- 您已经发布了 500 行您称之为“我的代码”的内容，并且想要逐行解释？祝你好运朋友 -
哦，天哪，我没有阅读底部部分，我被大量的脚本压得喘不过气来。您不太可能让志愿者评论每一行以告诉您它的作用.....
-
欢迎来到 Stack Overflow。我已经解决了您的帖子的一些大写问题。请注意，本论坛不是询问概念。您可以尝试其他论坛了解有关 ajax 的说明。
标签： javascript php jquery html ajax