Question

我试着让这个表格正常工作，我的智慧结束了。基本上，当你点击提交时，它会在转到感谢页面之前停止约5秒钟，并且用户通常认为他们没有点击右键并且尝试点击提交至少3次。当我想要一个时，我最终得到4个提交。我知道这个问题已经被问了很多，但是我找到的解决方案似乎都没有用，因为这个＆＃34;形式＆＃34;似乎没有表格标签，只是输入。

这个登陆页面是以前的网页设计师的作品，我假设刚从上帝那里使用了一个模板知道我在哪里和我的任务是让我的知识/经验非常有限。我喜欢它的外观和功能，但有上述问题。

这是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');
    }
});

这就是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);
}

} ？＆GT;

唯一有效的方法是在提交输入中添加一个onclick，使其无法再次提交，但如果验证失败则会卡住，用户无法提交而无需刷新页面。

我对这一切都很陌生，所以非常感谢帮助和耐心。

提前致谢。

Answer 1

您提交表单后，只需disable submit button

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

Answer 2

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

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

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');
    }

Answer 3

您可以使用ajax

禁用提交按钮

beforeSend: function(msg){
    $(".button").button("disable");
  }

并在成功后启用。

Answer 4

您可以指定一个变量true，当它变为true时阻止重新提交就像那样简单。

Answer 5

你可以直接添加到你的JS：

form.myButton.disabled = true;
    return true;

然后在表单标记中添加：

onsubmit="myButton.disabled

要使用myButton，您还需要添加到name="myButton"表单中，然后换行if isset($_POST['myButton'])) { // code }

Answer 6

Dunno，就像设置一个残疾人道具可能会有效。

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);
                }
            });
        }
    });
});

Answer 7

首先，不要信任用户。当您使用JavaScript作为唯一的安全措施时，您就会信任该用户。

话虽如此：您的onsubmit函数无法返回false，因此即使所有安全措施都失败，表单也会以标准html方式提交。请参阅Prevent form redirect OR refresh on submit?和https://stackoverflow.com/a/38491643/4275413

修复之后，你可以在ajax.call之后禁用按钮和东西（这是异步的，所以在＆＃34;成功＆＃34;东西之外做，但只有在继续时）。你的javascript - 我相信 - 会在元素上覆盖html中的onsubmit。那就是另一个。

也许还有更多的东西在继续，但你应该尝试这两种方法。

防止双重提交表格

7 个答案: