1

お問い合わせフォームを作っています。私はjqueryが初めてです。jquery 検証プラグインと ajax を読んだ後、次のコードを書きました。このコードは、最初にフォームを検証してから、ajax 経由でフォームを送信します。フォームを送信すると、フォームが2回送信されます。結果が2回来て、エラーを取得できません。

<script>
$(document).ready(function () {
    $('#contactForm').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            address: {
                required: true
            },
            message: {
                required: true
            },
            security: {
                required: true
            }
        },
        messages: {
            name: {
                required: '* Please Enter Your Name.'
            },
            email: {
                required: "* Please Enter Your E-mail  ",
                email: "* Please enter proper E-mail  "
            },
            address: {
                required: "* Please enter address."
            },
            message: {
                required: "* Please enter Enquiry"
            },
            security: {
                required: "* Please enter Security code"
            }
        },
        submitHandler: function (form) {
            // Ajax Submit here

            // alert($("#contactForm").serialize());

            $.ajax({
                type: "POST",
                url: "assets/sendmail.php",
                data: $("#contactForm").serialize(),
                success: function (result) {
                    if (result == 'Success') {
                        $("#contactForm").hide();
                        $("#contact_response").html('<div class="alert alert-success">Thank you for your feedback.</div>');
                    } else {
                        alert(result);
                    }
                    return false;
                }
            });
            return false;
        }

    });
});

htmlフォームは

 <form action="assets/sendmail.php" method="post" name="contactForm" id="contactForm" >
                    <!-- STEP-2 : GENERAL SETTINGS -->
                    <input type="hidden" name="success_page" value="../contact-us?res=thank-you" id="success_page" /><!-- PAGE TO REDIRECT AFTER SUBMIT -->
                    <input type="hidden" name="email_to" value="<?=get_settings('contact_email');?>" id="email_to" /><!-- EMAIL ADDRESS WHERE WE WANT TO RECEIVE EMAIL -->
                    <input type="hidden" name="email_subject" value="Query Recieved" id="email_subject" /><!-- SUBJECT OF THE EMAIL -->
                    <!-- STEP-2 : GENERAL SETTINGS -->

                    <label for="name" class="nameLabel">Name</label>
                      <input id="name" type="text" name="name"   />
                    <label class="control-label">Email address</label>
                        <div class="controls">
                          <input type="email" name="email" id="email" />
                          <p class="help-block"></p>
                        </div>
                    <label for="address">Address</label>
                      <input id="address" type="text" name="address"  />
                    <label for="message" class="messageLabel">Enquiry</label>
                      <textarea id="message" name="message"  /></textarea>
                    <label >Security Code</label> 
                        <img src="classes/CaptchaSecurityImages.php?width=100&amp;height=30&amp;characters=5" alt="captcha" style="vertical-align:bottom;"/>&nbsp;&nbsp;&nbsp;<input id="security" name="security" class="required" type="text" style="width:30%;vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;"/></br>
                    <button type="submit" id="submit" name="submit">Send</button>
                </form>
                    </script>
4

2 に答える 2

1

PHP コードに次のロジックを記述します。

if(!empty($email)){
  @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
}

これにより、値が空のメールが送信されるのを防ぐことができます。

于 2015-09-27T16:51:53.963 に答える
1

HTML と JavaScript コードが機能しています。

ただし、OP内では、jQueryとHTMLの両方を1セットの<script></script>タグで囲んだように見えます...

<script>JavaScript の先頭にタグがあります....

<script>
$(document).ready(function () {
    $('#contactForm').validate({
        rules: {
            ....

HTMLの最後に終了</script>タグがあります...

         ....
    </form>
</script>

これを行うことはできず、ページ全体が壊れる可能性があります。JavaScript をタグで囲むだけ<script></script>...

<script>
    $(document).ready(function () {

        $('#contactForm').validate({
            // rules, options, etc.
        });

    });
</script>

action="assets/sendmail.php"タグ内でも必要ありません<form>。jQuery Validation プラグインを使用して、.ajax()データを に送信する必要があります。assets/sendmail.phpsubmitHandler

私が気づいた他の2つの小さなHTMLの問題...

1) 終了</br>タグがあります。 そのようなものがないため、これは無効な HTML です。 BRは「空」または「無効」タグと見なされるため、単独で使用するか<br>、「自己クローズ」します<br />。(スラッシュの重要な位置に注意してください/)

2) あなたtextareaはこのように書かれています: <textarea /></textarea>. これは無効な HTML です。textarea既に終了タグ</textarea>. 次のように書くだけです <textarea></textarea>。

修正された HTML と機能する jQuery 検証を含むデモ: http://jsfiddle.net/a2xdg/

于 2013-09-02T21:35:54.227 に答える