Javascript 防止表格重复提交

为了使这张表格正常工作，我真是束手无策。基本上，当你点击submit时，它会在进入感谢页面前暂停大约5秒钟，用户通常认为他们没有点击正确，并尝试再点击submit至少3次。在这之后，当我只想要一份意见书时，我就得到了4份意见书。我知道这个问题被问了很多，但是我发现没有一个解决方案是有效的，因为这个“表单”中似乎没有表单标签，只有输入

这个登录页是一位以前的网页设计师的作品，我假设他刚刚使用了一个来自上帝知道的地方的模板，我的任务是用我有限的知识/经验让它正常工作。我喜欢它的外观和功能，但有前面提到的问题

以下是HTML：

<div class="col-sm-4" id="join-us-form">
    <div class="form-bg">
      <div class="form-arrow"></div>
      <h3>title</h3>
      <div id="join-us-results"></div>
      <!-- Form -->
      <form method="POST" action="join_us.php">
        <div class="form-group">
          <input type="text" name="first_name" id="first_name" class="form-control f-input input-field" placeholder="First Name" />
        </div>
        <div class="form-group">
          <input type="text" name="last_name" id="last_name" class="form-control f-input input-field" placeholder="Last Name" />
        </div>
        <div class="form-group">
          <input type="text" name="company" id="company" class="form-control f-input input-field" placeholder="Company" />
        </div>
        <div class="form-group">
          <input type="text" name="email" class="form-control f-input input-field" placeholder="Email" />
        </div>
      <div class="form-group">
          <input type="text" name="phone" maxlength="15"  class="form-control f-input input-field" placeholder="Phone" />
        </div>
        <input type="submit" class="submit-btn" value="Submit" id="submit_btn" onsubmit="document.getElementById('submit_btn').disabled=true; document.getElementById('submit_btn').value='Submitting, please wait...';" />
        </form>
    </div>
  </div>

标题

下面是Javascript：

/* ==========================
   JOIN-US FORM
=============================*/

$('#submit_btn').on('click', function() { 
    var proceed = true;
    //simple validation at client's end
    //loop through each field and we simply change border color to red for invalid fields       
    $("#join-us-form input[required=true]").each(function(){
        $(this).css('border-color',''); 
        if(!$.trim($(this).val())){ //if this field is empty 
            $(this).css('border','solid 1px red'); //change border color to red   
            proceed = false; //set do not proceed flag
        }
        //check invalid email
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
            $(this).css('border','solid 1px red'); //change border color to red   
            proceed = false; //set do not proceed flag              
        }
    });
    if(proceed) //everything looks good! proceed...
    {
        //get input field values data to be sent to server
        var post_data = {
            'first_name'    : $('input[name=first_name]').val(),
            'last_name'     : $('input[name=last_name]').val(),             
            'user_email'    : $('input[name=email]').val(), 
            'phone_number'  : $('input[name=phone]').val(), 
            'company'       : $('input[name=company]').val()
        };
        //Ajax post data to server
        $.post('join_us.php', post_data, function(response){ 
            if(response.type == 'error'){ //load json data from server and output message     
                var output = '<div class="error">'+response.text+'</div>';
            }else{
                window.location.href = "http://url.com/landing/thank-you.html";
                //output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $("#join-us-form  input[required=true]").val(''); 
            }
            $("#join-us-results").hide().html(output).slideDown();
        }, 'json');
    }
});

/*==========================
加入美国表格
=============================*/
$（'submit_btn'）。在（'click'，function（）{
var=true；
//客户端的简单验证
//循环遍历每个字段，我们只需将无效字段的边框颜色更改为红色
$（“#加入我们表单输入[required=true]”）。每个（函数（）{
$（this.css（'border-color'，''）；
if（！$.trim（$（this.val（））{//如果此字段为空
$（this.css（'border'，'solid 1px red'）；//将边框颜色更改为红色
继续=false；//设置不继续标志
}
//检查无效电子邮件
var email\u reg=/^（[\w-\.]+@（[\w-]+\.）+[\w-]{2,4}）？$/；
if（$（this.attr（“type”）==“email”&&！email注册测试（$.trim（$（this.val（）））{
$（this.css（'border'，'solid 1px red'）；//将边框颜色更改为红色
继续=false；//设置不继续标志
}
});
如果（继续）//一切看起来都很好！继续。。。
{
//获取要发送到服务器的输入字段值数据
var post_数据={
'first_name'：$（'input[name=first_name]'）。val（），
'last_name'：$（'input[name=last_name]'）。val（），
'user_email'：$（'input[name=email]'）。val（），
'phone_number'：$（'input[name=phone]'）。val（），
'company'：$（'input[name=company]'）。val（）
};
//Ajax将数据发布到服务器
$.post（'join_us.php'，post_数据，函数（响应）{
if（response.type=='error'）{//从服务器加载json数据并输出消息
变量输出=''+响应.文本+''；
}否则{
window.location.href=”http://url.com/landing/thank-you.html";
//输出=''+响应。文本+''；
//重置所有输入字段中的值
$（“#加入我们表单输入[required=true]”）。val（“”）；
}
$（“#加入我们结果”）.hide（）.html（输出）.slideDown（）；
}“json”）；
}
});

下面是PHP：

<?php
if($_POST)
{
$to_email       = "lead@url.com"; //Recipient email, Replace with your own email.

//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    $output = json_encode(array( //create JSON data
        'type'=>'error', 
        'text' => 'Sorry Request must be Ajax POST'
    ));
    die($output); //exit script outputting json data
} 

//Sanitize input data using PHP filter_var().
$first_name     = filter_var($_POST["first_name"], FILTER_SANITIZE_STRING);
$last_name      = filter_var($_POST["last_name"], FILTER_SANITIZE_STRING);
$user_email     = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
$phone_number   = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT);
$company        = filter_var($_POST["company"], FILTER_SANITIZE_STRING);
$subject        = "Lead / url.com";

//additional php validation
if(strlen($first_name)<4){ // If length is less than 4 it will output JSON error.
    $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
    die($output);
}
if(strlen($last_name)<4){ // If length is less than 4 it will output JSON error.
    $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
    die($output);
}
if(strlen($company)<3){ //check emtpy company
    $output = json_encode(array('type'=>'error', 'text' => 'Please enter a Company Name.'));
    die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
    $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
    die($output);
}
if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
    $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
    die($output);
}

//email body
$message_body = "From : ".$first_name."\r\nEmail : ".$user_email."\r\nPhone Number : (".$phone_number.")". $phone_number."\r\nCompany: ".$company ;

//proceed with PHP email.
$headers = 'From: '.$first_name.'' . "\r\n" .
'Reply-To: '.$user_email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

$send_mail = mail($to_email, $subject, $message_body, $headers);
//header('Location: thank-you.html');

if(!$send_mail)
{
    //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
    $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
    die($output);
}else{
    $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$first_name .' ! Look to hear from us soon!'));
    die($output);
}

---

Hi just
在提交表单时禁用
您的
提交按钮

$("form").submit(function() {
    $(this).find('input[type="submit"]').prop("disabled", true);
})

嗨，提交表单时，只需禁用
您的
提交按钮

$("form").submit(function() {
    $(this).find('input[type="submit"]').prop("disabled", true);
})

正如您所说，您可以根据用户的操作和服务的响应来启用和禁用按钮

您可以这样更改您的请求部分

if(proceed) //everything looks good! proceed...
    {

        $('#submit_btn').prop('disabled', true);
        /* Disable button on request start */

        //get input field values data to be sent to server
        var post_data = {
            'first_name'    : $('input[name=first_name]').val(),
            'last_name'     : $('input[name=last_name]').val(),             
            'user_email'    : $('input[name=email]').val(), 
            'phone_number'  : $('input[name=phone]').val(), 
            'company'       : $('input[name=company]').val()
        };
        //Ajax post data to server
        $.post('join_us.php', post_data, function(response){ 
            if(response.type == 'error'){ //load json data from server and output message     
                var output = '<div class="error">'+response.text+'</div>';
            }else{
                window.location.href = "http://url.com/landing/thank-you.html";
                //output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $("#join-us-form  input[required=true]").val(''); 
            }

            $('#submit_btn').prop('disabled', false);
            /* Enable button again on request end */

            $("#join-us-results").hide().html(output).slideDown();
        }, 'json');
    }

如果（继续）//一切看起来都很好！继续
{
$（'submit_btn'）.prop（'disabled'，true）；
/*请求启动时禁用按钮*/
//获取要发送到服务器的输入字段值数据
var post_数据={
'first_name'：$（'input[name=first_name]'）。val（），
'last_name'：$（'input[name=last_name]'）。val（），
'user_email'：$（'input[name=email]'）。val（），
'phone_number'：$（'input[name=phone]'）。val（），
'company'：$（'input[name=company]'）。val（）
};
//Ajax将数据发布到服务器
$.post（'join_us.php'，post_数据，函数（响应）{
if（response.type=='error'）{//从服务器加载json数据并输出消息
变量输出=''+响应.文本+''；
}否则{
window.location.href=”http://url.com/landing/thank-you.html";
//输出=''+响应。文本+''；
//重置所有输入字段中的值
$（“#加入我们表单输入[required=true]”）。val（“”）；
}
$（'submit_btn'）.prop（'disabled'，false）；
/*在请求结束时再次启用按钮*/
$（“#加入我们结果”）.hide（）.html（输出）.slideDown（）；
}“json”）；
}
正如您所说，您可以根据用户操作和服务响应启用和禁用按钮

您可以这样更改您的请求部分

if(proceed) //everything looks good! proceed...
    {

        $('#submit_btn').prop('disabled', true);
        /* Disable button on request start */

        //get input field values data to be sent to server
        var post_data = {
            'first_name'    : $('input[name=first_name]').val(),
            'last_name'     : $('input[name=last_name]').val(),             
            'user_email'    : $('input[name=email]').val(), 
            'phone_number'  : $('input[name=phone]').val(), 
            'company'       : $('input[name=company]').val()
        };
        //Ajax post data to server
        $.post('join_us.php', post_data, function(response){ 
            if(response.type == 'error'){ //load json data from server and output message     
                var output = '<div class="error">'+response.text+'</div>';
            }else{
                window.location.href = "http://url.com/landing/thank-you.html";
                //output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $("#join-us-form  input[required=true]").val(''); 
            }

            $('#submit_btn').prop('disabled', false);
            /* Enable button again on request end */

            $("#join-us-results").hide().html(output).slideDown();
        }, 'json');
    }

如果（继续）//一切看起来都很好！继续
{
$（'submit_btn'）.prop（'disabled'，true）；
/*请求启动时禁用按钮*/
//获取要发送到服务器的输入字段值数据
var post_数据={
'first_name'：$（'input[name=first_name]'）。val（），
'last_name'：$（'input[name=last_name]'）。val（），
'user_email'：$（'input[name=email]'）。val（），
'phone_number'：$（'input[name=phone]'）。val（），
'company'：$（'input[name=company]'）。val（）
};
//Ajax将数据发布到服务器
$.post（'join_us.php'，post_数据，函数（响应）{
if（response.type=='error'）{//从服务器加载json数据并输出消息
变量输出=''+响应.文本+''；
}否则{
window.location.href=”http://url.com/landing/thank-you.html";
//输出=''+响应。文本+''；
//再
onsubmit="myButton.disabled

jQuery(document).ready(function($) {
    $('#join-us-form').find('form').on('submit', function(e) {
        e.preventDefault();
        if (!$(this).find('input[type="submit"]').prop('disabled')) {
            $.ajax({
                url: '/path/to/foo.php',
                method: 'POST',
                dataType: 'json', // doesn't have to be, just an example
                data: {
                    first_name: $(this).find('#first_name').val(),
                    last_name: $(this).find('#last_name').val(),
                    company: $(this).find('#company').val(),
                    email: $(this).find('#email').val(),
                    phone: $(this).find('#phone').val()
                },
                beforeSend: function() {
                    $(this).find('input[type="submit"]').prop('disabled', true);
                },
                success: function(response) {
                    if (typeof response.error !== 'undefined') { // assuming you're returning something like this
                        console.log('It works!');
                    }
                    else console.log('Houston, we have a problem ...');
                },
                error: function () {
                    console.log('oops!');
                },
                complete: function() {
                    $(this).find('input[type="submit"]').prop('disabled', false);
                }
            });
        }
    });
});