Duplicate form submission whtn button clicked?

Question

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 clear the form and then close hide the div. It works great apart from when I check the database it seems to submit twice? I have looked and cant see where the problem lies?

The button is :

<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>

and the new JS code that duplicates entry is :

    $(function() {
    $('form').on('submit', function(e) { 
      e.preventDefault();
      $('.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!');
            form[0].reset();
            $('#5box').hide();
          } else {
            $('.output_message').text('Error Sending email!');
          }
        }
      });
    });
  });

and the old js(without clearing form and hiding div but does not duplicate entry) is :

 $(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. 
        return false;   
    });
});

is it your serverside code thats the problem? What does the DB entry file look like? — Brian McCall, Mar 14 '17 at 16:21
only 1 entry, and it worked fine before it was edited. I shall add old code before it sort of sort fixed. — Jules, Mar 14 '17 at 16:24
I have edited the original post to include code that does not duplicate — Jules, Mar 14 '17 at 16:28

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

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

edited May 23 '17 at 12:09

Community

1
1

answered Mar 14 '17 at 16:12

qw3n

6,236
6
33
62

Vishnu Suresh · Answer 2 · 2017-03-14T17:01:27.967

0

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

edited Mar 14 '17 at 17:01

answered Mar 14 '17 at 16:46

Vishnu Suresh

51
1
3

Can you provide code for that as is not that clear? So what do I change "submit" to as I surely cannot put normal??? – Jules Mar 14 '17 at 16:48
just remove it completely – Brian McCall Mar 14 '17 at 17:03
No just remove the attribute type from the button. Final button syntax will be as follows
– Vishnu Suresh Mar 14 '17 at 17:06
You have already registered the onclick functionality of the button in document load right? – Vishnu Suresh Mar 14 '17 at 17:09
Thats using my old method which already work 100%, it just didnt clear the form and hide the div, sorry I think we have got wires crossed here. – Jules Mar 14 '17 at 17:13

Make amendments in this area in your old code.

success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');
                    form.reset();
                    //write your div id or class to hide
                    $("your div").hide();
                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }

– Vishnu Suresh Mar 14 '17 at 17:27

I have tried that before and now again, the form works but doesnt clear it and doesnt hide the div, the newer code does it but sends it twice!!! – Jules Mar 14 '17 at 18:05

Duplicate form submission whtn button clicked?

2 Answers2

Linked

Related