Passing a variable to a function bound to a form submission breaks preventDefault and return false

Question

I'm trying to execute a function that is bound to a form which stops the browser from submitting the form and checks that form for missing fields, and if there aren't any, it proceeds to submit the form via Ajax

The issue is, the page contains many very similar forms with identical fields, only with unique numbers after the ID for each form element. I want to pass that number to the function that is bound to the relevant form, however when I initialise any variable other than the 'event' variable, the form submits and ignores event.preventDefault(); AND/OR return false;

Here's a simple test:

http://jsfiddle.net/q3mae60g/

Here's the code:

JS:

$('#contact-form1').submit( submitForm("1") );

function submitForm(formId,event) {

    var contactForm = $(this);
        var forename = '#contact-forename' + formId;
        var surname = '#contact-surname' + formId;
        var email = '#contact-email' + formId;
        var tel = '#contact-tel' + formId;

    if ( !$(forename).val() || !$(surname).val() || !$(email).val() || !$(tel).val() ) {

        $('.form-status').removeClass("current-status");
        $('.contact-incomplete').addClass("current-status");

    } else {

        $('.form-status').removeClass("current-status");
        $('.contact-sending').addClass("current-status");

        $.ajax( {
            url: contactForm.attr( 'action' ) + "?ajax=true",
            type: contactForm.attr( 'method' ),
            data: contactForm.serialize(),
            success: submitFinished
        } );
    }
    return false;
}

It seems like the problem lies in the attempt to pass a variable to the function.

score 1 · Accepted Answer · edited Sep 30 '14 at 22:25

1

.submit() need a function reference. What you are doing is calling a function that return the value false. It is like doing :

$('#contact-form1').submit( false );

Which does nothing.

What you can do is to pass an anonymous function that call your function. Something like that :

$('#contact-form1').submit( function(e){
    e.preventDefault();
    submitForm.call(this, "1", e);
});

edited Sep 30 '14 at 22:25

danielvdspuy

5
2

answered Sep 30 '14 at 12:47

Karl-André Gagnon

33,662
5
50
75

But this works fine: `$('#contact-form1').submit( submitForm );` – danielvdspuy Sep 30 '14 at 13:35
@DanielvanderSpuy That's because you are passing a reference (as `.submit()` expect). When adding the `()`, you are calling it! That might help you : http://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load – Karl-André Gagnon Sep 30 '14 at 13:44
Okay I think I understand, but nevertheless, your suggestion for the more complex function/call still causes the form to be submitted in the traditional way. I don't understand what is causing the function to break. Thanks for your help thus far :) – danielvdspuy Sep 30 '14 at 13:56
@DanielvanderSpuy Did you pass the `e` in `.submit(function(**e**`? If you, did you use `e.preventDefault()` in the same function? Any error in the console? – Karl-André Gagnon Sep 30 '14 at 14:01
Yeah I did, and there's no chance to catch any errors as I get directed away from the page by the submission :/ – danielvdspuy Sep 30 '14 at 14:31
@DanielvanderSpuy move the `e.preventDefault()` above the function call. If it still submit, post you entire code in a pasteBin (HTML and JS only). If it doesn't submit, you'll be able to see if there is an error in your code. – Karl-André Gagnon Sep 30 '14 at 14:33
Moving the preventDefault in conjunction with your initial suggestion seemed to fix it. Although the 'formId' variable is being returned as [object Object] rather than 1 when I print it to the console. Any idea why that may be? – danielvdspuy Sep 30 '14 at 15:40
@DanielvanderSpuy That's wierd.... Are you using `submitForm.call()` or `submitForm()`? – Karl-André Gagnon Sep 30 '14 at 15:52
Function call: `submitForm.call(this, "1", e);` Function itself: `function submitForm(currentThis,formId,e) { ...` – danielvdspuy Sep 30 '14 at 15:58
Okay it works now with `function submitForm(formId,e) {`, so I guess the 'this' was to say what the form is being applied to, as opposed to a variable passed to the form? – danielvdspuy Sep 30 '14 at 16:02
@DanielvanderSpuy excatly, the first parameter in `.call()` will be the `this` in the function! – Karl-André Gagnon Sep 30 '14 at 17:28

Passing a variable to a function bound to a form submission breaks preventDefault and return false

1 Answers1