CODEWITHSUNDEEP
javascriptjquery
Jacobian
Jacobian

Reputation: 10802

Unable to submit a form on the first click event

Well, I spent hours on this problem and scanned the whole stackoverflow, but still do not know what to do. But what really gets me nuts is that such a trivial and the simplest in the world thing is not working. So, what I have now is a form with inputs and a button:

<form id="frm" action="/accent/login/enter/">
    {% csrf_token %}
    <div draggable="true" id="panel" class="panel" title="">
        <input id="login" name="login" type="text" placeholder="" class="required" /> <br/>
        <input id="pswd" name="pswd" type="password" placeholder="" class="required"  /> <br/>
        <button id="btn" value="">ENTER</button>            
    </div>
</form>

And I have this code which is supposed to send the form:

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            $('#frm').submit(function(e){ //submitted on the second click. why???
                ...prepare parameters for ajax call
                $.ajax({
                    type:'POST',
                    ...general stuff
                });
                e.preventDefault();
            })
        }
    });
});

The problem is, when a user clicks on submit button for the first time, then the form is not submitted, if, however, he or she clicks it for the second time, then it is submitted ok. I can't understand the logic behind such behaviour implemented in jquery. Besides, I should say, that I have tried many other tricks, like:

form.submit(...
$('#frm')[0].submit(...

But they work not as expected, as if there is no callback function - I'm redirected to the url, but do not stay on the same page - just what I expect from e.preventDefault. I guess there is some sacred method or magic properties in jquery that I should use to make it work (like method one which prevents terrible multiple submits). But at this moment I do not know them.

EDIT

I also tried this trick:

jQuery('#frm').submit(...

but it works exactly like the first method - $('#frm').submit(...

EDIT

I found the third method which works like the previous one:

$('form').submit(...

To sum up, I have three different methods, but all of them work only when a user clicks on the button for the second time. And I have two methods that work in a standard manner and do not make it possible to use a callback function.

Upvotes: 2

Views: 3762

Answers (2)

Prashanth Pamidi
Prashanth Pamidi

Reputation: 266

The problem is, you are registering for form submit after the form validation.

so,
1) On first click of button validation, the submit event is registered to a handler.
2) On second click of the button, the registered handler will be called. that is why it get submitted on second click. But note that you are registering again for the submit event. which means, on third click the form will be submitted twice, on fourth click the form will be submitted thrice..... and so on...

Solution
1) remove the $("#frm").submit() code from the submitHandler and put it outside.
2) use e.preventDefault(); in $("#frm").submit() so the default action is prevented and page doesn't get reloaded.
3) put the AJAX code directly in submitHandler 

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            ...prepare parameters for ajax call
            $.ajax({
                type:'POST',
                ...general stuff
            });
        }
    });
});

$('#frm').submit(function (e) {

    e.preventDefault();
});

Upvotes: 5

Narcotics
Narcotics

Reputation: 313

I guess you are using the jqueryvalidation plugin. If it's true, then your using of $().validate() may be wrong.

The $().validate() function is to initialize the validation, it tells the script how to validate the form value and what to do if the validation is passed(the submitHandler property).

So maybe you should edit your code like this:

<form id='frm'>
...
</form>

$('#frm').validate({
    //...general stuff: rules, messages, etc
    submitHandler: function (form) {
        //blahblah before doing the submitting...
        form.submit();
    }
});

$('#btn').one('click', function (){
    $('#frm').submit();
});

But, actually there's still a problem with your $btn.one() event handler: if you click the button while the form values doesn't meet your validation rules, the one chance to fire the handler is consumed and even if you re-input the right value, the button will never response your clicking unless refreshing the page.

So maybe you should check your business logic again and redesign the form submitting flow, but that's not what this question is discussing, good luck ;)

Upvotes: 0

Related Questions