通过在laravel中快速点击防止多次提交表单

Question

所以我遇到了问题，如果我点击足够快的 subnmit 按钮，我的表单会被提交多次。我怎样才能防止这种情况？令牌是自动添加的，但我猜它根本没有帮助。 表单示例：

  <div class="row padding-10">
    {!! Form::open(array('class' => 'form-horizontal margin-top-10')) !!}
    <div class="form-group">
      {!! Form::label('title', 'Title', ['class' => 'col-md-1 control-label padding-right-10']) !!}
      <div class="col-md-offset-0 col-md-11">
      {!! Form::text('title', null, ['class' => 'form-control']) !!}
      </div>
    </div>
    <div class="form-group">
      {!! Form::label('body', 'Body', ['class' => 'col-md-1 control-label padding-right-10']) !!}
      <div class="col-md-offset-0 col-md-11">
      {!! Form::textarea('body', null, ['class' => 'form-control']) !!}
      </div>
    </div>
    <div class="col-md-offset-5 col-md-3">
      {!! Form::submit('Submit News', ['class' => 'btn btn-primary form-control']) !!}
    </div>
    {!! Form::close() !!}
  </div>

我的 NewsController 存储方法：

    public function store()
{
$validator = Validator::make($data = Input::all(), array(
  'title' => 'required|min:8',
  'body' => 'required|min:8',
));

if ($validator->fails())
{
  return Redirect::back()->withErrors($validator)->withInput();
}

News::create($data);

return Redirect::to('/news');
}

Answer 1

第一步：在表单标签中写一个类名 Exp: "from-prevent-multiple-submits"

<form class="pt-4 from-prevent-multiple-submits" action="{{ route('messages.store') }}" method="POST">
 @csrf

第二步：在按钮部分写一个类

<button type="submit" id="submit" class="btn btn-primary from-prevent-multiple-submits">{{ translate('Send') }}</button>

第 3 步：编写此脚本代码

(function(){
$('.from-prevent-multiple-submits').on('submit', function(){
    $('.from-prevent-multiple-submits').attr('disabled','true');
})
})();

Answer 2

想要同时提交按钮的值并防止双重表单提交？

如果你使用的是submit类型的按钮，并且想提交按钮的值，如果按钮被禁用就不会发生这种情况，你可以设置一个表单数据属性，然后测试。

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

Answer 3

一种方法是对按钮使用单击处理程序，它首先禁用按钮，然后提交表单。

<script>
    function submitForm(btn) {
        // disable the button
        btn.disabled = true;
        // submit the form    
        btn.form.submit();
    }
</script>

<input id="submitButton" type="button" value="Submit" onclick="submitForm(this);" />

Answer 4

使用PHP sessions 将会话变量（例如$_SESSION['posttimer']）设置为发布时的当前时间戳。在 PHP 中实际处理表单之前，检查 $_SESSION['posttimer'] 变量是否存在并检查是否存在一定的时间戳差异（IE：2 秒）。这样，您可以轻松过滤掉多个提交。

// form.html
<form action="foo.php" method="post">
    <input type="text" name="bar" />
    <input type="submit" value="Save">
</form>


// foo.php
if (isset($_POST) && !empty($_POST)) 
{
    if (isset($_SESSION['posttimer']))
    {
        if ( (time() - $_SESSION['posttimer']) <= 2)
        {
            // less then 2 seconds since last post
        }
        else
        {
            // more than 2 seconds since last post
        }
    }
    $_SESSION['posttimer'] = time();
}

原帖

How to prevent multiple inserts when submitting a form in PHP?