Form being submitted twice (AJAX)

Question

For some reason every time I submit my form the AJAX function is called twice in the network tab. I have no idea why this is happening I have another ajax function on my site that doesn't do this so I must have gone wrong somewhere. I see that many other have asked this question on here but none of their solutions help me.

Here's my full JS/AJAX code;

// submit form function
jQuery('#form').on('submit', function(e){
    e.preventDefault();

    var $ = jQuery; 
    var filter = $('#form');
    var form_data = $('#form').serializeArray();
    $('#load_more').data('page', 1);

    $.ajax({
        url: ajax_url,
        type: 'post',
        data: form_data,
        dataType: 'json',
        error : function(response){
            console.log(response);
        },
        success : function(response){
            $('#loop').empty();

            for( var i = 0; i < response.post_cont.length; i++ ){
                var html =''+
                    '<div class="col-4">'+
                        '<a href="'+ response.post_cont[i].permalink +'">'+
                            '<div class="card" style="width: 100%;">'+
                                '<div class="post_image" style="background-image: url('+ response.post_cont[i].image +');"></div>'+

                                '<div class="card-body">'+
                                    '<h5 class="card-title">'+ response.post_cont[i].title +'</h5>'+
                                '</div>'+
                            '</div>'+
                        '</a>'+
                    '</div>';

                $('#loop').append(html);
            }

            if( jQuery('#loop .card').length < response.max_posts[0].no_of_posts){
                $('#load_more').show();
            }else{
                $('#load_more').hide();
            }
        }
    });
});

// button function for form filters
jQuery('#form .option').click(function(){
    var $ = jQuery;
    $('#form .option').removeClass('active');

    var elem = $(this);
    var input = elem.children('input');
    input.click();
    elem.addClass('active');

    $('#form').submit();
});

And here's my html;

<div class="container">
    <form action="" method="POST" id="form">

        <div id="filters">
            <div class="option">
                <p>Assisted Needs/Residential</p>
                <input type="checkbox" name="type[]" value="Assisted Needs/Residential">
            </div>

            <div class="option">
                <p>Commercial</p>
                <input type="checkbox" name="type[]" value="Commercial">
            </div>

            <div class="option">
                <p>Private Housing</p>
                <input type="checkbox" name="type[]" value="Private Housing">
            </div>

            <div class="option">
                <p>Social Housing</p>
                <input type="checkbox" name="type[]" value="Social Housing">
            </div>
        </div>

        <input type="hidden" name="action" value="filter">
    </form>

    <div id="loop" class="row">

    </div>

    <div class="row justify-content-center">
        <div class="col-auto">  
            <a id="load_more" href="javascript:;" data-page="1"><p>More</p></a>
        </div>
    </div>
</div>

Answer 1

The problem is due to your input.click() call. This raises a click event on every checkbox, which is caught and in turn submits the form again. Just remove that line.

Also note that you can alias the jQuery variable by using the first argument in the document.ready handler, so you can remove the repeated unnecessary var $ = jQuery line.

 jQuery(function($) { $('#form').on('submit', function(e) { e.preventDefault(); var filter = $('#form'); var form_data = $('#form').serializeArray(); $('#load_more').data('page', 1); // your ajax call here... console.log('making an AJAX request...'); }); // button function for form filters $('#form .option').click(function() { $('#form .option').removeClass('active'); $(this).addClass('active'); $('#form').submit(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <form action="" method="POST" id="form"> <div id="filters"> <div class="option"> <p>Assisted Needs/Residential</p> <input type="checkbox" name="type[]" value="Assisted Needs/Residential"> </div> <div class="option"> <p>Commercial</p> <input type="checkbox" name="type[]" value="Commercial"> </div> <div class="option"> <p>Private Housing</p> <input type="checkbox" name="type[]" value="Private Housing"> </div> <div class="option"> <p>Social Housing</p> <input type="checkbox" name="type[]" value="Social Housing"> </div> </div> <input type="hidden" name="action" value="filter"> </form> <div id="loop" class="row"></div> <div class="row justify-content-center"> <div class="col-auto"> <a id="load_more" href="javascript:;" data-page="1"> <p>More</p> </a> </div> </div> </div>