Dancia
Dancia

Reputation: 812

Prevent from submiting form several times by clicking fast in laravel

So I ran into issue, that If i click fast enough subnmit button, my form is submited several times. How can I prevent this? Token is added automatically, but it doesnt help at all I guess. Form example:

  <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>

My NewsController store method:

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

Upvotes: 2

Views: 9174

Answers (4)

Tanvir Rahman Prince
Tanvir Rahman Prince

Reputation: 41

Step 1: write a class name in the form tag Exp: "from-prevent-multiple-submits"

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

Step 2: write a class in button section

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

Step 3: write this script code

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

Upvotes: 1

Manpreet
Manpreet

Reputation: 2620

Want to submit value of button as well and prevent double form submit?

If you are using button of type submit and want to submit value of button as well, which will not happen if the button is disabled, you can set a form data attribute and test afterwards.

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

Upvotes: 0

snow_FFFFFF
snow_FFFFFF

Reputation: 3301

One approach is to use a click handler for the button where it first disables the button, then submits the form.

<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);" />

Upvotes: 8

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

Use PHP sessions to set a session variable (for example $_SESSION['posttimer']) to the current timestamp on post. Before actually processing the form in PHP, check if the $_SESSION['posttimer'] variable exists and check for a certain timestamp difference (IE: 2 seconds). This way, you can easily filter out multiple submits.

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

Original POST

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

Upvotes: 0

Related Questions