Question

我创建了这个联系表单，插入了jQuery fadeLabel和validationEngine来美化表单文件index.php / .html（我还没弄明白两个版本中的哪个版本）脚本是

指数：

<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>

这是contact.php，它接收数据并发送2封电子邮件（一封给我发送数据，谢谢那些与我联系的人） contact.php：

<?php
//include variables
$my_email = "adrygese@gmail.com";
$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似乎运行得很好，我想确保页面不是更新的表单或转到另一个页面（现在唯一有用的东西）补偿反映在以下问题中：

我总是留下contactform.js的警告
不向我发送任何邮件给收件人
我无法正常工作。 delay（）.fadeOut / fadeIn和。向上滑动（）。淡出（）这样发送此电子邮件的时间为3秒＆＃34; $（＆＃34;＃form_send＆＃34;）。 addClass（＆＃39; hide＆＃39;）＆＃34;在你做任何其他事情之前，表格会消失，使用第二种类型的slideUp＆＃34; $（＆＃34;＃form_box＆＃34;）。 addClass（＆＃39; hide＆＃39;）＆＃34;只显示＆＃34; $（＆＃34;＃form_success＆＃34;）。 removeClass（＆＃39; hide＆＃39;）＆＃34;
在地址栏中也会出现表格数据（例如../ index.php？name = test＆amp; email = example％40mail.com＆amp; website =＆amp; message = helloworld）

Answer 1

首先，您应为表单标记指定action和method：

<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()

这是一个开始。

联系表单+ jQuery validationengine

1 个答案: