Submit form after preventDefault and unbind

Question

I used preventDefault on my form and I am trying to use this to automatically submit when a statement is true.

function codeCheck(){
        $("#code-form").submit(function(e){
            e.preventDefault();
        });
        var code = $("#code").val();
        $.ajax({
            url: "index.php",
            type: "POST",
            data: { codeCheck: 1, ajaxCode: code }
        }).done(function(check) {
            if(check == 2){
                $("#used").css("display", "block");
            }
            else if(check == 1){
                $("#code").css('background', "url('../img/check.png') no-repeat scroll 170px 2px");
                $("#submit").css('display', 'block');
                $("#submit").on("click", function(){
                    $( "#container" ).fadeOut( "slow", function() {
                        $("#code-form")[0].submit();
                    });
                });

                $("#used").css("display", "none");
            }
            else{
                $("#code").css('background', "none");
                $("#used").css("display", "none");
                //$("#code-form").unbind('submit');
            }
        }); 
}

The unbind does work I can use the submit button when I unbind it. But the $("#form").submit() part doesn't work it doesn't submit the form automatically after fading out.

Here is a fiddle: http://jsfiddle.net/90wmpw7x/1/

All I want is that it continues the form after the fade.

EDIT: For more clarity I just added the full function.

The `.unbind()` method is for removing an event handler; it doesn't *invoke* the event handler. — Pointy, Nov 12 '14 at 14:34
If you put `alert('Here');` inside the unbind callback do you see it? — PeterKA, Nov 12 '14 at 14:42
No I just tested it and the unbind doesn't work like that indeed. But I saw it somewhere on stackoverflow and it seemed to work but I tested it wrong. — Sinan Samet, Nov 12 '14 at 14:44
Quite likely, you have not bound any handler to the submit event; therefore there's nothing to unbind. — PeterKA, Nov 12 '14 at 14:47
I stated before the code that I used `preventDefault` but I should have included it in my code instead. My mistake sorry. — Sinan Samet, Nov 12 '14 at 14:52

PeterKA · Accepted Answer · 2017-07-11T12:06:17.477

4

You want to use the following, since, you say submit event is already prevented. This will submit the form in the default manner:

$("#form")[0].submit();

Instead of:

$("#form").unbind('submit', function(){
    $("#form").submit();    
});

Special Note:

For this to work, ensure you do not have any form field with name="submit".

UPDATE

Given the updated code, here is my recommendation:

$("#form").submit(function(e){
    e.preventDefault();

    $( "#container" ).fadeOut( "slow", function() {
        $("#form")[0].submit();    
    });
});

The fadeOut code should be moved to inside the submit handler

DEMO

edited Jul 11 '17 at 12:06

answered Nov 12 '14 at 14:40

PeterKA

24,158
5
26
48

I just tried this but it doesn't work it actually even gives me an error. `$(...)[0].submit is not a function` – Sinan Samet Nov 12 '14 at 14:42
2

The error is because you have a form control with `name="submit"`; change that to something like `name="mysubmit"` and it should work. – PeterKA Nov 12 '14 at 14:44
Actually I dont have a name attribute in it. – Sinan Samet Nov 12 '14 at 14:49
Please provide the relevant HTML and JS code in your question. And take a look at this: http://stackoverflow.com/questions/833032/submit-is-not-a-function-in-javascript – PeterKA Nov 12 '14 at 14:51
Thanks for providing more JS. Can you provide the HTML also? And the jsfiddle that you're referring to. – PeterKA Nov 12 '14 at 15:00
I added a fiddle but the thing is that the fadeOut function is in an ajax callback and the preventDefault is used before that. But I can't add the ajax code to the fiddle because it wouldn't work. I added the full function to my code for more clarity. (btw I am not the one who downvoted this) – Sinan Samet Nov 12 '14 at 15:02
Can you change the id of your submit button and use `[0].submit()` ... It feels like we're forcing you to provide info you're not willing to.... http://jsfiddle.net/fiddleyetu/90wmpw7x/2/ – PeterKA Nov 12 '14 at 15:07
I'm sorry I am just trying to not post sloppy code where the problem would be hard to find in. It worked thank you very much! When I viewed your fiddle I noticed I didnt change the js selector of mysubmit too sorry for that. – Sinan Samet Nov 12 '14 at 15:12
And just so you know, the ajax call that you're talking about does correctly belong in the `submit` callback. You do need to bind a `click` handler to the `submit` button ... **let the submit button do it's job --- trigger the `form` `submit` event** then do all you have to do in the `submit` handler. – PeterKA Nov 12 '14 at 15:14
Once you change the id, you also have to update your code an in my example `id="mysubmit"` ..... `$("#mysubmit").on(....` – PeterKA Nov 12 '14 at 15:16
Yes, thank you it works like a charm, you're a genius! Is it possible to get a little information on why [0] does work? Is it because you call the form in a different name? – Sinan Samet Nov 12 '14 at 15:18
1

Sure I'll explain; it's pretty straight-forward if you consider what each does. `$('form').submit()`, shorthand of `$('form').trigger('submit')`, triggers the submit event which fires up any `submit` handlers; if none of the handlers prevents it, the form will be submitted too. On the other hand `$('form')[0].submit()` does not trigger the `submit` event but instead submits the form via default form submission. Please let me know if I should clarify further. – PeterKA Nov 13 '14 at 17:51

Amit Joki · Answer 2 · 2014-11-12T14:43:48.157

1

You don't need to unbind() as the page is refreshed and all event handlers will be destroyed.

$("#container").fadeOut("slow", function() {
    $("#form").submit();
});

But, if you've event handler attached and you do posting through ajax and want to unbind that event, then you can use chaining

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

edited Nov 12 '14 at 14:43

answered Nov 12 '14 at 14:37

Amit Joki

58,320
7
77
95

Why do we need to unbind anyway? – Huangism Nov 12 '14 at 14:41
The thing is I used `preventDefault` before this so the `submit()` is not working. Is there any way to reset the `preventDefault` so I can use submit again? (that would be my actual problem). – Sinan Samet Nov 12 '14 at 14:47

Submit form after preventDefault and unbind

2 Answers2