Why is my form submitting twice? (Unusual implementation)

Question

So I've since learned this is not the best way to submit a form, but I'm still wondering why it's getting sent twice, even when the console.logs are only triggering once, and my ajax .php file attempts to set a $_SESSION variable to true, and check if its true, before sending emails (less important though -- why is it even calling the php file twice to begin with?)

html

<form id="SAR_FORM">
//elements
<a href="javascript:void(0)" id="form_SUBMIT" tabindex="8">Submit</a>
</form>

js

$('#form_SUBMIT').click(function(){
    console.log('ok');
    formErrors = false;
    //error Checking

    if (!formErrors){
        var serialized = $("#SAR_FORM").serialize();
        $.post( "ajax/landing/landingForm_ajax.php", serialized, function( data ) {
            console.log('loop');
            $( "#sec4_errorRow" ).html( data );
            if ($("#sec4_errorRow").html() == '.'){
                $( "#sec4_errorRow" ).html( '<span style="color:#1eb252; font-weight:400;">Thank you for contacting us! We will be in touch shortly.</span>' );
                $( "#form_submit_holder" ).html( '<div id="thanks">Thank You!</div>' );
            }
        });
    }
});

You really shouldn't be using an `` tag with JavaScript to submit your form. Use a normal `` element, and bind to your form's `onsubmit` event instead. — user229044, May 29 '14 at 20:38
What is the reason for not using an ``? I understand it's bad practice, and that it might be why this is submitting twice, but I still don't understand why? — HC_, May 29 '14 at 20:41
You're not preventing the default action of the anchor tag. You would also need to prevent the default action of a submit or button. — Jay Blanchard, May 29 '14 at 20:42
Your `` tag isn't a submit button. Semantically, it has nothing to do with submitting the form. Many browsers will not allow you to submit the form by pressing the enter key within a text field if there isn't a submit button associated with the form, and people using screen readers or alternative input devices will have a hard time submitting your forms. — user229044, May 29 '14 at 20:46

o3d · Answer 1 · 2014-05-29T20:54:35.310

0

Pass the event in the callback function parameter, and call preventDefault() as below:

...
$('#form_SUBMIT').click(function(e){
  e.preventDefault();
  ...
  ...
  ...
});
...

UPDATED: based on meagar's response below

edited May 29 '14 at 20:54

answered May 29 '14 at 20:39

o3d

40
3

3

You don't need a belt and suspenders when one or the other will do. – Jay Blanchard May 29 '14 at 20:43
1

To put it more directly... Don't both `preventDefault` and `return false`. Learn what the [effect of each one is](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false), and choose the more appropriate one with full understanding of *why* you're doing it, rather than doing both by rote. – user229044 May 29 '14 at 20:48
Something else might be causing this issue, this jsfiddle seems to be working ok based off your code - [link](http://jsfiddle.net/39S9J/) – o3d May 29 '14 at 20:52
maybe you need to do this $('#form_SUBMIT').off('click').click(function(e){ e.preventDefault();}); – Alexander Ceballos May 29 '14 at 21:27

Why is my form submitting twice? (Unusual implementation)

1 Answers1