Problem with duplicate form submission

Navigation
1

I'm having a duplicate form submission problem.

It occurs as follows. I have an html form, when the user gives 2 quick clicks or clicks fast on the enter it sends the form 2 times.

I tried to solve the problem as follows.

I made the form like this: 

<form name='form'  onsubmit='envia_tranca();'>

And I put this javascript at the top of the page: 

<script>
        function envia_tranca() {
            document.forms['form'].submit();
            document.forms['form'].elements['envia'].disabled = true;
        }
</script>

Well this works in chrome and safari, but in IE the bug continues, can anyone help me solve the problem?

    
asked by anonymous 19.02.2016 / 11:51

2 answers

3

Method 1: "unobtrusive"

Use an unobtrusive code to disable submitting the form after it has already been submitted. Here is an example using jQuery . 

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Method 2: validation obsubmit()

There are also other ways to perform this validation, for example: 

<form onsubmit="return validacao()">
  Input teste: <input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var foiEnviado = false;    
    function validacao(){
      if(!foiEnviado) {
        foiEnviado = true;
        return ;
      }
      return false;
    }    
</script>

Method 3: jQuery plugin

Using a plugin called Safeform , the secret is to use the data() method to validate whether the form was sent or not. So, you do not have to stay validating buttons, in which Internet Explorer commands very badly. 

jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });
  return this;
};

Use more or less like this: 

$('form').preventDoubleSubmission();

Read more about jQuery Safeform

    
19.02.2016 / 13:08
0

I've seen something similar using JQuery: 

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

There is also a plugin called jquery-safeform that solves this problem.

    
19.02.2016 / 12:13
How to use the Git command without sudo? How to create an object and methods in PHP