附注编辑删除不必要的代码
你能告诉我我在这里做错了什么吗？ 错误日志没有显示任何内容。
这是我的 html、js 和 php。
示例.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>示例.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 联系表单，可供学习。
index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<!-- Whatever code you have above the contact form -->
<!-- A very simple contact form -->
<div id="frmContact">
Name: <input id="name" type="text" />
Email: <input id="email" type="text" />
Comment: <textarea id="comment" rows="4" cols="40"></textarea>
<button id="mybutt">Send</button>
</div>
index.js
$(document).ready(function(){
$('#mybutt').click(function(){
var na = $('#name').val();
var em = $('#email').val();
var cm = $('#comment').val();
if (na=='' || em=='' || cm==''){
alert("Please complete all fields");
return false;
}
$.ajax({
type: 'post',
url: 'your_php_ajax_file.php',
data: 'na='+na+'&em='+em+'&cm='+cm,
success: function(d){
if (d.length) alert(d);
}
}); //END ajax
}); //END #mybutt.click
});
your_php_ajax_file.php
<?php
function sanitize($data) {
return htmlentities(strip_tags(mysql_real_escape_string($data)));
}
// sanitize your inputs
$na = sanitize($_POST['na']);
$em = sanitize($_POST['em']);
$cm = sanitize($_POST['cm']);
$dt = date('Y-M-d H:i:s');
$body = '
<div style="width:100%;text-align:center;margin:0 0 30px 0;font-family:Arial;font-size:30px;font-weight:bold;">Website Contact Form</div>
<div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$dt.'</div>
<div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$na.'</div>
<div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$em.'</div>
<hr style="color:#cccccc;">
<div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$cm.'</div>
';
$headers = "";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
$headers .= "From: website@example.com\n";
$headers .= "Organization: example.com\n";
$headers .= "X-Priority: 3\n";
$headers .= "X-Mailer: PHP". phpversion() ."\n" . PHP_EOL;
$msg = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';
$msg .= $body;
mail($to, $subject, $msg, $headers);
mail('youremail@hotmail.com', 'Contat form', $msg, $headers);
echo 'Contact form sent';
关于 AJAX，这里有一些了解 AJAX 基础知识的好帖子:
Populate dropdown 2 based on selection in dropdown 1
注意:请注意，PHP AJAX 处理器 代码不能是您调用它的同一 PHP 文件(例如 index.php)的一部分(否则它将无法工作，并且整个页面将作为“ajax 响应”回显给您)
关于javascript - 如何制作 Ajax 联系表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34562127/