聯繫表格代碼定製

嗨 - 我已經在我的網站上實現了一個基於這個地址tuto的聯繫表格http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/ 它工作正常，唯一的問題是我想在表單中添加一個字段「名稱」。聯繫表格代碼定製

所以我說這行代碼形式的html代碼：

<input id="name" class="txt" type="name" name="name" placeholder="name"/><br />

形式的代碼修改後：

<form id="contact" action="#" method="post" name="contact"> 
<label for="name">Your Name</label> 
<input id="name" class="txt" type="name" name="name" placeholder="name"/><br /> 
<label for="email">Your E-mail</label> 
<input id="email" class="txt" type="email" name="email" placeholder="e-mail address"/> 
<br /> 
<textarea id="msg" class="txtarea" name="msg" placeholder="Type your message here..."></textarea> 
<button id="send">Send E-mail</button> 
</form>

我也添加到了發送郵件的PHP文件：

$msg .= "<p><strong>From:</strong> ".$username."</p>\r\n";

發送郵件php文件的全碼：

?php 
$sendto = "[email protected]"; 
$usermail = $_POST['email']; 
$content = nl2br($_POST['msg']); 

$subject = "New Message frm"; 
$headers = "From: " . strip_tags($usermail) . "\r\n"; 
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html;charset=utf-8 \r\n"; 

$msg = "<html><body style='font-family:Arial,sans-serif;'>"; 
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>New message</h2>\r\n"; 
$msg .= "<p><strong>From:</strong> ".$username."</p>\r\n"; 
$msg .= "<p><strong>E-mail:</strong> ".$usermail."</p>\r\n"; 
$msg .= "<p><strong>Message:</strong> ".$content."</p>\r\n"; 
$msg .= "</body></html>"; 


if(@mail($sendto, $subject, $msg, $headers)) { 
     echo "true"; 
} else { 
     echo "false"; 
} 

?>

最後一部分：聯繫表格的javascript代碼。這是我想我需要添加對我添加的新字段「名稱」的引用。但不知道在哪裏？（並且使該字段成爲強制性的）。您的幫助將不勝感激。非常感謝

// JavaScript Document 
function validateEmail(email) { 
       var reg = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
       return reg.test(email); 
     } 

     $(document).ready(function() { 
       $(".modalbox").fancybox(); 
       $("#contact").submit(function() { return false; }); 


       $("#send").on("click", function(){ 
         var emailval = $("#email").val(); 
         var msgval = $("#msg").val(); 
         var msglen = msgval.length; 
         var mailvalid = validateEmail(emailval); 

         if(mailvalid == false) { 
           $("#email").addClass("error"); 
         } 
         else if(mailvalid == true){ 
           $("#email").removeClass("error"); 
         } 

         if(msglen < 4) { 
           $("#msg").addClass("error"); 
         } 
         else if(msglen >= 4){ 
           $("#msg").removeClass("error"); 
         } 

         if(mailvalid == true && msglen >= 4) { 
           // if both validate we attempt to send the e-mail 
           // first we hide the submit btn so the user doesnt click twice 
           $("#send").replaceWith("<em>sending...</em>"); 

           $.ajax({ 
             type: 'POST', 
             url: 'sendmessage.php', 
             data: $("#contact").serialize(), 
             success: function(data) { 
               if(data == "true") { 
                 $("#contact").fadeOut("fast", function(){ 
                   $(this).before("<p><strong>Success! Your message has been sent, thank you.</strong></p>"); 
                   setTimeout("$.fancybox.close()", 1000); 
                 }); 
               } 
             } 
           }); 
         } 
       }); 
     });

來源

2012-08-02 Greg

一樣的信息？ – 2012-08-02 18:30:31

我想是這樣，但不知道這是什麼部分... – Greg 2012-08-02 18:35:11

請參閱''click''處理函數它在哪裏訪問消息？它基於長度進行驗證。你可以爲名稱做同樣的事情 - 所以任何時候'msglen'都會顯示出來，你會想爲名字做類似的事情。（至少這是做到這一點的一種方式，而且你有什麼可以模仿它。） – 2012-08-02 18:37:09

這種替換下面的代碼：

var emailval = $("#email").val(); 
var msgval = $("#msg").val(); 
var msglen = msgval.length; 
var mailvalid = validateEmail(emailval); 
//Get our name 
var nameval = $("#name").val(); 
//Get our name length 
var namelen = nameval.length;

然後在

   if(msglen < 4) { 
         $("#msg").addClass("error"); 
       } 
       else if(msglen >= 4){ 
         $("#msg").removeClass("error"); 
       }

添加此

  if(namelen < 2) { 
      //name must be at least 2 characters 
        $("#name").addClass("error"); 
      } 
      else if(namelen >= 2){ 
        $("#name").removeClass("error"); 
      }

那JavaScript的完成了！

對於PHP部分搜索：

$usermail = $_POST['email'];

地址：

$username = $_POST['name'];

嘗試，我的朋友:)

來源

2012-08-02 18:37:42

代碼的作用類似'nameval'是一個長度，但它不是;這是價值。 – 2012-08-02 18:43:09

歡呼雀躍，現在更新 – 2012-08-02 18:47:39

感謝您的回答彼得。我嘗試過，但不幸的是它沒有工作。這是網站http://goo.gl/34oQ8的網址，代碼已更新 – Greg 2012-08-02 18:49:38

聯繫表格代碼定製

回答

相關問題