Question

I have a search form (you can see the form here) that uses some javascript to check that at least one field has been completed before allowing a search to take place.

I’m not great with Javascript so please bear with me. I’ve managed to get the validation working (with the help of brilliant Stack Overflow users), and get the submit button to be re-enabled once the form has passed validation using the following code:

    $(function(){
    $('#detailed-search-form').on('submit',function(e){
        e.preventDefault();
        var oneFilled = checkFields($(this));
        if(oneFilled) {
            $(this).unbind('submit').submit()
        } else {
            overlay();
        }
    });
});

The trouble is that the first click on the submit button doesn’t actually submit the form, it simply enables the button. This the needs another click before the form is submitted.

Hopefully there’s a way I can get the form to not only re-enable the button when it’s clicked, but also submit the form without the need for a second click?

Any help will be greatly appreciated!

Thanks in advance,

Tom

Answer 1

The submit handler you wrote should basically say “hey, if you didn’t provide at least one field, I’ll prompt you a nice green overlay, otherwise let’s move on with the search” – no need to unbind anything.

$(function(){
    $('#detailed-search-form').on('submit',function(e){

        if( !checkFields($(this)) ) {

            // if the form isn't valid, show overlay
            overlay();
            return false;

        } else {

           // else just continue with form action
           return true;

        }
    });
});