Ajax表单提交两次

Question

My Ajax form is submitting twice for some reason even using preventDefault() and return false .

<script type="text/javascript">
    $("#form_codes").submit(function(e) {
        e.preventDefault();
        $.ajax({
            data: $('#form_codes').serialize(),
            type: 'POST',
            url: '{{url('save_code')}}',
            success: function(msg) {
                         $('#product_codes > tbody:last-child').append('<tr><td>' + $('#code').val() + '</td><td>' + $('#description').val() + '</td></tr>');
                         $('#code').val('');
                         $('#description').val('');
                     },
            error: function(msg) {

                   }
        });         
        return false;
    });
</script>

Answer 1

Try adding e.stopImmediatePropagation() to the submit event, as it prevents every other event from executing so this may stop the second form submit.

<script type="text/javascript">
                $("#form_codes").submit(function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    $.ajax({
                        data: $('#form_codes').serialize(),
                        type: 'POST',
                        url: '{{url('save_code')}}',
                        success: function(msg) {
                            $('#product_codes > tbody:last-child').append('<tr><td>' + $('#code').val() + '</td><td>' + $('#description').val() + '</td></tr>');
                            $('#code').val('');
                            $('#description').val('');
                        },
                        error: function(msg) {

                        }
                    });

                    return false;
                });
</script>

Answer 2

Turns out in my blade template engine i was yielding my script twice (effectively including it twice.)

The function works fine and only submits once now.