Question

首先，我知道过去已经讨论过这个话题，但我没有得出结论，所以任何帮助都非常感激。我知道一些HTML，但我不是程序员，我有人为我建立一个网站，但网页表格经常发送重复（甚至3或4次）的电子邮件。我相信（假设）它与人们不止一次刷新或点击提交按钮有关。我试图禁用'提交'，但我没有设法。在这个阶段任何修复都会有所帮助。只要我停止接收来自发件人的多封电子邮件。我会尽量给你尽可能多的信息。这是表单的html代码：

<div class="form-input">
                        <div class="form-title">NAME</div>
                        <input id="form-name" type="text"></input>
                    </div>

                    <div class="form-input">
                        <div class="form-title">EMAIL</div>
                        <input id="form-email" type="text"></input>
                    </div>

                    <div class="form-input">
                        <div class="form-title">MESSAGE</div>
                        <textarea id="form-msg" type="text"></textarea>
                    </div>

                    <div class="form-input">
                        <div class="form-title">&nbsp;</div>
                        <input id="form-send" type="submit" value="SEND"></input>
                    </div>

                </div><!--end of form holder-->

                <div id="details-error">Please comlete all fields and include a valid email</div>
                <div id="form-sent">Thankyou for your enquiry - We will be in touch shortly!</div>
            </div>
        </div>
    </div>

</div>

以下是我的脚本：

// Contact Form Code

    $('#form-send').click(function(){

        var name = $('#form-name').val();
        var email = $('#form-email').val();
        var message = $('#form-msg').val();
        var option = $('#form-select').val();
        var error = 0;

        if(name === '' || email === '' || message === ''){
            error = 1;
            $('#details-error').fadeIn(200);
        }else{
            $('#details-error').fadeOut(200);
        }

        if (!(/(.+)@(.+){2,}\.(.+){2,}/.test(email))) {
            $('#details-error').fadeIn(200);
            error = 1;
        }

         var dataString = '&option=' + option +'&name=' + name + '&email=' + email + '&text=' + message;

            if (error === 0) {
                $.ajax({
                    type: "POST",
                    url: "mail.php",
                    data: dataString,
                    success: function () {
                        $('#details-error').fadeOut(1000);
                        $('#form-sent').fadeIn(1000);
                    }
                });
                return false;
            }

    });

});

最后，mail.php：

    <?php
if ($_POST) {
    $name  = $_POST['name'];
    $email = $_POST['email'];
    $text  = $_POST['text'];
    $option = $_POST['option'];
    $headers = $option . "\r\n" . $name . "\r\n" . $email;


    //send email   
    mail("xxx@email.net", "Mail Enquiry", $text, $headers);
}

?>

Answer 1

您应该将输入更改为按钮：

<input id="form-send" type="submit" value="SEND"></input>

到

<button id="form-send" type="button">SEND</button>

因为否则表单将通过ajax提交一次，然后再通过表单提交/页面刷新

提交

Answer 2

        if (error === 0) {
            $.ajax({
                type: "POST",
                url: "mail.php",
                data: dataString,
                success: function () {
                    $('#details-error').fadeOut(1000);
                    $('#form-sent').fadeIn(1000);
                }
            });

＃form-send click功能中的这部分代码是提交成功后要执行的操作，如果您觉得用户在提交表单后单击提交，则可以修改提交按钮以禁用进一步的单击。 / p>

$('#form-send').attr('disabled','disabled'); // only disable the #form-send and not other forms that may need to still be submitted.

Answer 3

如果多次按下提交按钮，则可能会有效。

尝试在$('#form-send').click(function(){

之后添加以下代码行

$('#form-send').attr('disabled', 'disabled');

这将在单击一次后禁用提交按钮。如果用户重新加载页面，则会启用该页面。

注意：此代码尚未经过测试。

Web表单发送重复的电子邮件

3 个答案: