Question

I have a login form with a username and password.
I make a post to a web service with the user and pass as parameters and I get back an ID for that user.

What I am trying to achieve is that on form submit, the ajax call is made which in turn populates the ID field (which I need) and then submits the form using $('#form1').post();.

To prevent default behavior, I have a return false; at the beginning of the .submit() event.

$('#form1').submit(function() {         
        $('#sajax-loader').show();        
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: '{user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"}',
            url: "URL.asmx/validate",
            dataType: "json",
            success: function (data) {
                $('#id').val(data.d);                
                $('#sajax-loader').hide();                                             
                $('#form1').post();
                $('#login-notification').show();                                
            },
            error: function (err) {
                $('#login-notification').html("An Error Occured " + err);
            }
        });
        return false; 
    });

Obviously this is the wrong approach since I am not getting any response when submitting.

Can anybody guide me in the right direction? Give some advice on how to tweak this submit function I have here, or maybe an entirely different more practical approach?

Answer 1

Beginning return false will stop the execution of submit() function at that point from where you return and rest of the code is not executing. So, place your return false at the end.

In other way, using .preventDefault() will stop default form submission behavior.

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

        // instead of return false
        // use e.preventDefault()           

        e.preventDefault();
        $('#sajax-loader').show();        
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: '{user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"}',
            url: "URL.asmx/validate",
            dataType: "json",
            success: function (data) {
                $('#id').val(data.d);                
                $('#sajax-loader').hide();                                             
                $('#form1').post();
                $('#login-notification').show();                                
            },
            error: function (err) {
                $('#login-notification').html("An Error Occured " + err);
            }
        });
    });

And one thing

Instead of

data: '{user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"}',

you can use:

data: {user: $("#user").val() ,pass: $("#pass").val() },