2

I created this contact form, inserting jQuery fadeLabel and validationEngine to beautify the form the file index.php / .html (I have not yet figured out which of the two versions put it) scripts are

index:

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

however this is the part of the form's code

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

This is the contact.php where it receives the data and sends 2 emails (one for me with the data and a thank you to those who contacted me) 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;

?>

this is the contact form 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

The jQuery seem to work very well, I wanted to make sure that the page is not of the form updated or go to another page (the only thing that works for now) compensation reflected in the following problems:

  1. I always leave the alert of contactform.js
  2. Does not send any mail, it to me to recipient
  3. I can not do the work properly. delay () .fadeOut / fadeIn and. SlideUp (). FadeOut () so that the sending of this email appears for 3 seconds "$ (" # form_send "). addClass ('hide')" before you do anything else then the form disappears up using some second type slideUp "$ (" # form_box "). addClass ('hide')" by displaying just the "$ (" # form_success "). removeClass ('hide')"
  4. in the address bar also appears the form data (e.g. ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)
4

1 回答 1

0

首先，您应该为您的表单标签指定action和：method

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

其次，您永远不会阻止表单提交失败。如果要在客户端处理表单，则需要返回falsejavascript 以防止提交：

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