表单提交使用AJAX和Word preSS网站处理响应 [英] Form submission using AJAX and handling response in Wordpress Website
本文介绍了表单提交使用AJAX和Word preSS网站处理响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个词preSS网站。我做了一个接触的形式，它是由AJAX张贴。 这里的code：
＆LT;脚本类型=文/ JavaScript的＆GT;
jQuery的（文件）。就绪（函数（）{
$（＃error_box）隐藏（）。
$（'＃contact_form）。递交（函数（五）{
// prevent无法正常提交表单
即preventDefault（）;
变种NA = $（＃1）VAL（）。
。VAR email2 = $（＃2）VAL（）;
。变种subject2 = $（＃3）VAL（）;
。VAR消息2 = $（＃4）VAL（）;
VAR MYDATA =PN2 =+ NA +＆放大器;电子邮件=+ email2 +＆放大器;主题=+ subject2 +＆放大器;味精=+ MESSAGE2;
警报（MYDATA）;
$（＃contact_form）的CSS（{不透明：0.1}）;
$阿贾克斯（{
键入：POST，
网址：$（本）.attr.action，//相对路径做工精细
数据：MYDATA，
成功：函数（）{
$（＃contact_form）的CSS（{不透明性：1}）;
。$（'＃error_box）淡入（快）的CSS（{高度：自动}）;
}
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
当提交表单时，我想的错误框（#error_box）根据提交，例如数据显示一条消息，如果其中一个字段为空，它应该显示错误，或显示一个成功的消息，如果处理成功和形式已经寄出。有没有什么办法可以做到这一点？
[更新]
下面是我接触form.php的文件（动作）
＆LT; PHP的，如果（使用isset（$ _ POST ['PN2']）及和放大器;使用isset（$ _ POST [电子邮件]）及和放大器;使用isset（$ _ POST ['主题']）及和放大器;使用isset（$ _ POST ['味精']））
{
如果（空（$ _ POST ['PN2']）||空（$ _ POST [电子邮件]）||空（$ _ POST ['主题']）||空（$ _ POST ['味精']））{
回声空的错误;
}
其他
{
$名称= $ _ POST ['PN2'];
$电子邮件= $ _ POST [电子邮件];
$ SUBJ = $ _ POST ['主题'];
$味精= $ _ POST ['味精'];
$到=ankushverma61@gmail.com;
$ mail_cont =FROM：$ PERSON_NAME \ñ电子邮件：$电子邮件\ñ消息：。$味精;
回声成功;
邮件（$收件人，$ SUBJ，$ mail_cont）或死亡（无法发送!!!）;
}
}
？＆GT;
解决方案
表单提交使用Ajax调用 联系表
＆LT;形式的行动=＃ID =联系形式的方法=邮报＆GT;
＆LT;输入类=规定类型=文本占位符=名NAME =名字＆GT;
＆LT;跨度类=fieldError＆GT;＆LT; / SPAN＆GT;
＆LT;输入类=规定类型=文本占位符=姓NAME =姓＆GT;
＆LT;跨度类=fieldError＆GT;＆LT; / SPAN＆GT;
。
。
。
＆LT;输入类型=提交值=提交＆GT;
＆LT; /形式GT;
客户端验证与Ajax调用
的jQuery（'＃联系形式）提交（ajaxSubmit会）。
功能ajaxSubmit会（）{
VAR newContactForm = jQuery的（本）.serialize（）;
变种标志= 0;
jQuery的（'需要'，'#contactForm'）。每个（函数（）{
VAR inputVal = jQuery的（本）.VAL（）;
如果（jQuery.trim（inputVal）===）{
标志= 1;
jQuery的（本）。接下来（）HTML（不能为空）;
jQuery的（本）。接下来（）显示（）。
}
其他{
jQuery的（本）。接下来（）隐藏（）。
}
}）;
如果（旗）{
返回false;
}
jQuery.ajax（{
键入：POST，
网址：/wp-admin/admin-ajax.php?action=contactForm
数据：newContactForm，
成功：功能（数据）{
jQuery的（'：输入'，'＃联系形式）
。不是（'：按钮：提交：重置：隐藏）
.VAL（''）
.removeAttr（'检查'）
.removeAttr（'选择'）;
。jQuery的（＃反馈）HTML（数据）;
jQuery的（＃反馈）淡出（10000）。
}，
错误：函数（errorThrown）{
警报（errorThrown）;
}
}）;
返回false;
}
在db和发送邮件的存储的表单数据
添加以下code中的functions.php 的
wp_enqueue_script（'jQuery的'）;
add_action（'wp_ajax_addContactForm'，'addContactForm'）;
add_action（'wp_ajax_nopriv_addContactForm'，'addContactForm'）;
功能addContactForm（）{
全球WPDB $;
$ FIRST_NAME = $ _ POST ['的firstName']; $姓氏= $ _ POST ['lastName的'];
$电子邮件= $ _ POST [电子邮件];
。
。
。
如果（$ wpdb-＆GT;插入（TABLE_NAME，阵列（
FIRST_NAME'=＆GT; $ FIRST_NAME，
'姓氏'=＆GT; $姓氏，
电子邮件=＆GT; $电子邮件，
。
。
。
））=== FALSE）{
回声错误;
}
其他 {
$标题=发件人：XYZ＆LT; xyz@xyz.com>';
$主题=谢谢你;
$身体=＆LT; P＆GT;谢谢＆LT; / P＆GT;＆LT; P＆GT; .........＆LT; / P＆gt;中;
wp_mail（$电子邮件，$主题，$机构，$头）;
回声＆LT; DIV CLASS ='成功'＆GT;感谢您填写您的信息，我们将在不久的接触和LT; / DIV＆gt;中;
}
出口;
}
I have a wordpress website. I have made a contact form and it is POSTed by AJAX. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function(){
$("#error_box").hide();
$('#contact_form').submit(function(e){
// prevent the form from submitting normally
e.preventDefault();
var na=$("#1").val();
var email2=$("#2").val();
var subject2 = $("#3").val();
var message2 = $("#4").val();
var mydata = "pn2="+na+"&email="+email2+"&subject="+subject2+"&msg="+message2;
alert(mydata);
$("#contact_form").css({"opacity":"0.1"});
$.ajax ({
type: 'POST',
url: $(this).attr.action, // Relative paths work fine
data: mydata,
success: function(){
$("#contact_form").css({"opacity":"1"});
$('#error_box').fadeIn('fast').css({"height": "auto"});
}
});
});
});
</script>
When the form is submitted, I want the error box (#error_box) to display a message according to the data submitted, for example if one of the fields is empty it should display an error, or display a success message if the processing is successful and the form has been mailed. Is there any way I can do this?
[UPDATE]
Here's my contact-form.php file(the action)
<?php if(isset($_POST['pn2']) && isset($_POST['email']) && isset($_POST['subject']) && isset($_POST['msg']))
{
if(empty($_POST['pn2']) || empty($_POST['email']) || empty($_POST['subject']) || empty($_POST['msg'])){
echo 'EMPTY ERROR';
}
else
{
$name = $_POST['pn2'];
$email = $_POST['email'];
$subj = $_POST['subject'];
$msg = $_POST['msg'];
$to = "ankushverma61@gmail.com";
$mail_cont = "FROM: $person_name. \n Email: $email. \n Msg: $msg";
echo "success";
mail($recipient, $subj, $mail_cont) or die("UNABLE TO SEND!!!");
}
}
?>
解决方案
Form submission using Ajax call Contact Form
<form action="#" id="contactForm" method="post">
<input class="require" type="text" placeholder="First Name" name="firstName">
<span class="fieldError"></span>
<input class="require" type="text" placeholder="Last Name" name="lastName">
<span class="fieldError"></span>
.
.
.
<input type="submit" value="Submit">
</form>
client side validation with ajax call
jQuery('#contactForm').submit(ajaxSubmit);
function ajaxSubmit(){
var newContactForm = jQuery(this).serialize();
var flag = 0;
jQuery('.require', '#contactForm').each(function(){
var inputVal = jQuery(this).val();
if(jQuery.trim(inputVal) === ""){
flag = 1;
jQuery(this).next().html("Can't be blank");
jQuery(this).next().show();
}
else{
jQuery(this).next().hide();
}
});
if(flag){
return false;
}
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php?action=contactForm",
data: newContactForm,
success:function(data){
jQuery(':input','#contactForm')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
jQuery("#feedback").html(data);
jQuery("#feedback").fadeOut(10000);
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
}
store form data in db and send mail
add the following code in functions.php
wp_enqueue_script('jquery');
add_action('wp_ajax_addContactForm', 'addContactForm');
add_action('wp_ajax_nopriv_addContactForm', 'addContactForm');
function addContactForm(){
global $wpdb;
$first_name = $_POST['firstName']; $last_name = $_POST['lastName'];
$email = $_POST['email'];
.
.
.
if($wpdb->insert('table_name',array(
'first_name' => $first_name,
'last_name' => $last_name,
'email' => $email,
.
.
.
))===FALSE){
echo "Error";
}
else {
$headers = 'From: xyz <xyz@xyz.com>';
$subject = "Thank you";
$body = "<p>Thank you</p><p>.........</p>";
wp_mail( $email, $subject, $body, $headers);
echo "<div class='success'>Thank you for filling out your information, we will be in contact shortly.</div>";
}
exit;
}
这篇关于表单提交使用AJAX和Word preSS网站处理响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
