1

こんにちは–このアドレスの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   = "myemail@gmail.com";
$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コード。ここで、追加した新しいフィールド「name」への参照を追加する必要があると思います。しかし、どこにあるのかわかりませんか？（また、そのフィールドを必須にするため）。あなたの助けをいただければ幸いです。どうもありがとう

// JavaScript Document
function validateEmail(email) {
                var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[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);
                                                        });
                                                }
                                        }
                                });
                        }
                });
        });
4

1 に答える 1

0

次のコードをこれに置き換えます。

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-02T18:37:42.443 に答える