Duplicate Form Submission Whtn Button Clicked?

I had a problem earlier that seemed to be solved but on closer inspection it is not fully fixed. I have a button that when clicked activates a javascript to send form data, then cl

Solution 1:

Try adding return false to the end of your event handler. How to prevent form from being submitted?

Solution 2:

remove button "type =submit" and

then use your old code below.

$(document).ready(function() {
   $('#btn-finish').on('click', function() {

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Processing...'); 

        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');

                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
    });
});