如何制作Ajax联系表格 [英] How to make an Ajax Contact Form
问题描述
P.S.编辑以删除不必要的代码
P.S. edited to remove unnecessary code
您能告诉我我在做什么错吗?错误日志未显示任何内容.
Can you tell me what I'm doing wrong here? The error log doesn't show a thing.
这是我的html，js和php.
Here's my html, js, and 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.我的代码导致空白页，没有外发电子邮件.
so the step for this process is get the input from html, process it with ajax (js), then send it to sample.php to mail it, right? but I cant seem to pass the ajax process or sample.php. my code result in blank page and no outgoing email.
由于我是php和js的新手，所以我主要对源进行反向工程以使其适合我.这次，我采用了codrops的简约形式界面".
Since I'm new to php and js, I mostly reverse engineer the source to make it suitable for me. This time I have taken the "minimalist form interface" from codrops.
这也是我在SO上的第一篇文章，所以请保持温柔:)
and this is also my first post in SO, so please be gentle :)
推荐答案
您选择了一个非常复杂的示例.这是要学习的更简单的AJAX联系表.
You chose a very complicated example. Here is a MUCH simpler AJAX contact form to learn from.
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的基本知识:
Regarding AJAX, here are some good posts for getting the basics of AJAX:
NB:请注意，PHP AJAX处理器代码不能属于您从中调用它的同一PHP文件(例如index.php)(否则它将无法正常工作，并且整个过程都将无效)页面将作为"ajax响应"回显给您)
NB: Note that the PHP AJAX processor code cannot be part of the same PHP file (e.g. index.php) that you are calling it from (or else it won't work and the entire page will be echoed back to you as the "ajax response")
这篇关于如何制作Ajax联系表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
