2

このお問い合わせフォームを作成し、jQuery fadeLabel と validationEngine を挿入して、ファイル index.php / .html のフォームを美しくしました (2 つのバージョンのどちらに配置したかはまだわかりません)。

索引：

<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 つのメールを送信します (1 通はデータを含む私宛て、私に連絡してくれた人には感謝します) 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 は非常にうまく機能しているようです。ページが更新された形式ではないことを確認するか、別のページに移動することを確認したかったのです (現在のところ機能する唯一のもの) 補償は、次の問題に反映されています。

  1. contactform.js のアラートを常に残す
  2. メールを送信せず、受信者に送信します
  3. 仕事がまともにできない。delay() .fadeOut/fadeIn と。上にスライドします （）。このメールの送信が 3 秒間表示されるように FadeOut () すると、他の操作を行う前に "$ (" # form_send "). addClass ('hide')" が表示され、2 番目のタイプの slideUp "$ (" # を使用してフォームが消えます。 form_box "). addClass ('hide')" で、"$ (" # form_success "). removeClass ('hide')" のみを表示します。
  4. アドレスバーにはフォームデータも表示されます (例: ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)
4

1 に答える 1

0

まず、フォームタグにactionandを指定する必要があります。method

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

第二に、失敗時にフォームの送信を停止することはありません。falseクライアント側でフォームを処理する場合は、JavaScript で送信を妨げないようにする必要があります。

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

あなたの$.ajax()提出物dataは正しく設定されていません。以下をせよ：

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

これが始まりです。

于 2012-12-02T23:01:38.727 に答える