Question

我有这个表格：

<form action="" method="post" name="my_form">
    <input type="text" name="my_input">
</form>

您可以按Enter键编写一些文本和提交。

我的问题：当您多次按Enter键时，它还会多次发送到我的服务器。

有这样的解决方案：

onsubmit="my_button=true;return true;"

但是这些解决方案需要一个提交按钮。

有没有一种方法，而无需添加（隐藏的）提交按钮？

Answer 1

例如，如果您要绝对确定，两次提交表单可能会造成严重的损害/导致恶意事情的发生，那么您需要检查此服务器端。 Web开发和一般开发的一个规则是永远不要信任您的最终用户，仅通过使用JavaScript阻止表单，就不能保证恶意用户不会通过遍历JavaScript来两次发送表单。

您可以执行以下操作：

重要提示：这只是一个概念证明示例，用于说明该想法，这不是100％的防弹解决方案。

表格

<?php
session_start();
$_SESSION['nonce'] = random_number();
?>
<html>
...
<form method="post" action="process.php">
<input type="hidden" name="nonce" value="<?php echo $_SESSION['nonce']; ?>" />
... other form elements ...
</form>
...

process.php

<?php
session_start();
$nonce = isset($_POST['nonce']) ? (int)$_POST['nonce'] : 0;
$session_nonce = $_SESSION['nonce'];

if ($_SESSION['nonce'] != $nonce) {
    die("Invalid nonce, double submission detected.");
}

$_SESSION['nonce'] += 1; // this will cause the previous check to fail on a second submission.

Answer 2

像这样的东西：

 <form onsubmit="send();" method="post" name="my_form">
    <input type="submit" name="my_input" id="sub">
 </form>

js代码：

function send(){
    $("#sub").attr('disabled', 'disabled');
    $.ajax({
        // data
        success: function(data){
            $("#sub").attr('disabled', false);
        }
});
}

Answer 3

喜欢这个（unestet）：

    var formSubmitted = false;
    document.getElementById('my-form').addEventListener('submit', function(){
    if(formSubmitted === false) {
        formSubmitted = true;
        return true;
    }
    return false;
});

Answer 4

您可以在设置按钮后禁用它，以使用户无法再次单击它

<form action="" method="post" name="my_form">
    <input type="text" name="my_input" <?php if(isset($_POST['my_input'])) { print 
    'disabled'; } ?>>
</form>

html表单：发送时防止重新提交

4 个答案: