2012-12-02 64 views
2

我创建了这个联系表单,插入jQuery fadeLabel和validationEngine来美化表格 文件index.php/.html(我还没弄清楚两个版本中哪一个放了它) 脚本是Contact Form + jQuery validationengine

指数:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="/js/backtop.js"></script> 
<script src="/js/fadeLabel.js"></script> 
<script> 
$(document).ready(function() { 
$('form .fadeLabel').fadeLabel(); 
}); 
</script> 
<script src="/js/validationEngine-it.js"></script> 
<script src="/js/validationEngine.js"></script> 
<script> 
$(document).ready(function(){ 
$("#form_box").validationEngine({ 
ajaxSubmit: true, 
ajaxSubmitFile: "contact.php", 
ajaxSubmitMessage: "Thank you, We will contact you soon !", 
success : false, 
    failure : function() {} 
    }) 
    }); 
</script> 
<script src="/js/contactform.js"></script> 

然而,这是形式的代码的一部分

<p id="form_success" class="success hide"><strong>Grazie!</strong> Il tuo messaggio è stato inviato con successo.</p> 
    <form id="form_box"> 
    <fieldset> 
    <p><label for="name">Nome*</label><input type="text" id="name" name="name" class="validate[required] fadeLabel" value=""/></p> 
    <p><label for="email">E-mail*</label><input type="email" id="email" name="email" class="validate[required,custom[email]] fadeLabel" value=""/></p> 
    <p><label for="website">Sito web</label><input type="url" id="website" name="website" class="fadeLabel" value=""/></p> 
    <p><label for="message">Messaggio*</label><textarea id="message" name="message" class="validate[required] fadeLabel" cols="30" rows="10" value=""></textarea></p> 
    </fieldset> 
    <p id="form_submit" class="submit"><button class="send">Invia</button> *Campi obbligatori</p> 
    <p id="form_send" class="send hide">Invio in corso&hellip;</p> 
    <p id="form_error" class="submit error hide"><button class="send">Invia</button> Si prega di correggere l'errore e re-inviarlo.</p> 
    </form> 

这是它接收数据并发送2封电子邮件(为我一个人的数据,并感谢您谁与我联系) contact.php在contact.php:

<?php 
//include variables 
$my_email = "[email protected]"; 
$my_site = "adrianogenovese.com"; 

    session_start(); 

    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $website = $_POST['website']; 
    $message = $_POST['message']; 
    $ip = $_SERVER['REMOTE_ADDR']; 

//beginning to email me 
$to = $my_email; 
$sbj = "Richiesta Informazioni - $my_site"; 
$msg = " 
<html> 
... 
//the body of the email to me 
... 
</html> 
"; 

$from  = $email; 
$headers = 'MIME-Version: 1.0' . "\n"; 
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n"; 
$headers .= "From: $from"; 

mail($to,$sbj,$msg,$headers); //email sent to me 

//beginning of the email recipient 
$toClient = $email; 
$msgClient = " 
<html> 
... 
//the body of the email recipient 
... 
</html> 
"; 
$fromClient  = $my_email; 
$sbjClient  = "Grazie $name per aver contattato $my_site "; 
$headersClient = 'MIME-Version: 1.0' . "\r\n"; 
$headersClient .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; 
$headersClient .= "From: $fromClient"; 

mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente 

//order confirmation email 

//Reset error 

session_destroy(); 

exit; 

?> 

这是接触形式的JScript contactform.js:

$(document).ready(function() { 

$(".send").click(function(){ 

$("#form_send").removeClass('hide'); 
$("#form_submit").addClass('hide'); 
$("#form_error").addClass('hide'); 

var name = $("#name").val(); 
var email = $("#email").val(); 
var website = $("#website").val(); 
var message = $("#message").val(); 

if (name == "" || email == "") { 
    $("#form_send").addClass('hide'); 
    $("#form_error").removeClass('hide'); 
} 

else { 
    $.ajax({ 
    type: "POST", 
    url: "contatti/contact.php", 

    data: "name=" + name + "&email=" + email + "&message=" + message + "&website=" + website, 
    dataType: "html", 

    success: function(msg) { 
     $("#form_send").addClass('hide').delay(3000).fadeOut(3000); 
     $("#form_success").removeClass('hide'); 
     $("#form_box").addClass('hide').slideUp(2000).fadeOut(); 
    }, 

    error: function() { 

    alert("An unexpected error occurred..."); 
    } 

    }); 

} 

}); //end form 

});//end Dom 

jQuery的似乎运作得非常好,我希望确保该页面是更新形式的不还是去另一页 补偿(即对现在工作的唯一的事情)体现在以下问题上:

  1. 我总是留下contactform.js
  2. 的警报不会将任何邮件,将其发送给我的收件人
  3. 我不能做正常工作。延迟().fadeOut/fadeIn和。向上滑动 ()。 FadeOut() ,这样在你做任何事情之前,这个电子邮件的发送出现3秒“$(”#form_send“)。addClass('hide')”,然后表单使用某种第二种类型的slideUp“消失” ('hide')“
  4. 在地址栏中也会出现表单数据(例如../index ?.PHP名称=测试&电子邮件=例子%40mail.com &网站= &消息=的HelloWorld)
+1

为了得到一个答案,我认真地建议缩小你的问题。而不是你的整个控制器/视图集合,只是张贴不提供所需结果的部分。祝你好运! –

+0

你好王尔德, 非常感谢你的回答,好心向你解释比我不明白你的意思? – BigMad

回答

0

首先,你应该为你的表单标签指定actionmethod

<form id="form_box" method="post" action="contatti/contact.php"> 

其次,您永远不会停止表单提交失败。你需要从提交防止你的JavaScript返回false如果要处理在客户端的形式:

if (name == "" || email == "") { 
    $("#form_send").addClass('hide'); 
    $("#form_error").removeClass('hide'); 
    return false; 
} 

在你$.ajax()提交data设置不正确。请执行以下操作:

data: $('#form_box').serialize() 

这是一个开始。

+0

你好3dgoo, 同时,谢谢你的回答。 随着你建议的更改,我收到电子邮件,但 - jQuery validationEngine不再起作用 - 当我点击发送按钮时总是弹出警报 - 我被重定向到页面(...联系人/ contact.php)带空白页 – BigMad

+0

@BigMad - 我无法帮助你解决一个我看不到的问题。如果您希望我提供帮助,请分享正在运行的代码版本。 – 3dgoo

+0

您可以在[本页](http://www.adrianogenovese.com/contatti/)上找到原始联系表格 我添加了以前的编辑。 – BigMad