Why is this function not returning false?

[Haitashi]

I have a form that calls a function using the onClick event in the submit button. I would like this function to return false if the username is taken. The the original function, which I've tested, returns the correct info when the "checkUname" button is clicked. However, it always returns false. I want to return false ONLY if the username is taken.
Original:

        $("#checkUname").click(function(){
        var datastring= $('form#newUserForm').serialize();
        $.ajax({
            type: "POST",
            url: "index.cfm?event=user.checkUname&requestFormat=ajax",
            data: datastring,
            success: function(response){
                var resp = jQuery.trim(response);
                if (resp == 'FALSE'){
                    $('.toggleSuccess').show();
                    $('.toggleFailure').hide();
                }else{
                    $('.toggleFailure').show();
                    $('.toggleSuccess').hide();
                }
            }
        });// .ajax()
 
        return false;
        }); // .submit()

I would like to run the same code, from the submit button and return true if the value of "resp" is false. This is what I've done:
Field I wish to validate:

<input class="text required" name="uname" type="text" />

Submit button:

<input name="submit" type="submit" onclick="checkuname()" />

checkuname function:

    function checkuname(){
 
        var datastring = document.getElementById('uname');
 
        $.ajax({
            type: "POST",
            url: "index.cfm?event=user.checkUname&requestFormat=ajax",
            data: datastring,
            success: function(response){
                var resp = jQuery.trim(response);
                if (resp == 'FALSE'){
                    return true;
                }else{
                    $('.toggleFailure').show();
                    $('.toggleSuccess').hide();
                    return false;
 
                }
            }
        });// .ajax()
 
    };

So, if the checkuname function returns false then the form won't submit and it also shows this div that has the class of "toggleFailure". Right now it's only returning false if I leave the field blank. As soon as I put any values in there, the form submits regardless of the checkuname function.

I should note (in case it might be relevant) that before this function in the JS file, I have a call to the JQuery validate plugin which I call like so:

$('form#newUserForm').validate();

Also, the name and ID of the form are: "newUserForm".

[gits]

the problem is that an ajax-call is async. so you should always return false and not submit the form the 'traditional' way (currently your form is submitted while the validation request is running) ...but then use the javascript submit() method in case of validation success ...

kind regards

[Haitashi]

Hi there! Long time, no see. Thank you for the response. I changed from using an AJAX call to using traditional html. So, now I have the following

        $("form#newUserForm").submit(function(){
        var datastring = $('form#newUserForm').serialize();    
        $.post("index.cfm?event=user.checkUname", datastring, 
                function(datastring){
                    var resp = jQuery.trim(response);
                    if (resp == 'FALSE'){
                        return true;
                    }else{
                        $('.toggleFailure').show();
                        $('.toggleSuccess').hide();
                        return false;
                    }
                });
        });

When the form is submitted this code is run. From looking at the request in Firebug I can see that "datastring" name/value pairs are being passed in correctly. However, there isn't a response back from the server. The original version, posted in the first posts, still works a-ok.

[gits]

in your callback function you should receive response ... currently you do not :)

function(datastring) {

should be:

function(response) {

otherwise resp in your function is always undefined.

kind regards

[Haitashi]

Oops! Fixed that but still no-go.

This works:

$("#checkUname").click(function(){
        var datastring = $('form#myForm').serialize();    
        $.ajax({
            type: "POST",
            url: "index.cfm?event=checkusername",
            data: datastring,
            success: function(response){
                var resp = jQuery.trim(response);
                if (resp == 'FALSE'){
                    $('.toggleSuccess').show();
                    $('.toggleFailure').hide();
                }else{
                    $('.toggleFailure').show();
                    $('.toggleSuccess').hide();
 
                }
            }
        });// .ajax()
 
        return false;
        });

When I click the button the divs hide/show as they should. This doesn't work:

<input name="submit" type="submit" onclick="validateUser();" />
 
    //form submit validation
    function validateUser(){
    var datastring = $('form#myForm').serialize();
    $.ajax({
        type: "POST",
        url: "index.cfm?event=checkusername",
        data: datastring,
        success: function(response){
            var resp = jQuery.trim(response);
            if (resp == 'FALSE'){
                $('#myForm').submit();
            }else{
                $('.toggleFailure').show();
                $('.toggleSuccess').hide();
 
            }
        }
    });// .ajax()
    return false;
    };//.post EOF
 

How can I get the form to submit if resp == false?

[gits]

try:

onclick="return validateUser();"

the code itself looks good to me, but i guess the form was submitted onclick in any case? so the above hint should work? ... or just use a input-type "button" instead of submit ....

kind regards

btw: what didn't work with the fixed solution above? ... the form is submitted (posted) in any case and then the callback should be executed ... and just returned true or some toggling and false in that case? it couldn't have the submit avoided, but the serverside could have taken care of the validation and send something back that could be processed by the callback ...?

[Haitashi]

Oke. Made some modifications. It works! Only 1 small issue. When the user enters a valid username, he has to click on the submit button twice. Odd.

$(function(){
    var validusername = false;
 
    $("#myForm").submit(function(){
        return validusername;
    });
 
    $('#username').blur(function(){
        var datastring = $('#myForm').serialize();
        $.post(
            "index.cfm?event=checkusername",
            datastring,
            function(response){
                var resp = jQuery.trim(response);
                if (resp == 'TRUE'){
                    validusername = true;
                }
                else{
                    $('.failure').show();
                }
            }
        );
    });
});

[gits]

nope ... i think that the first time the variable is false and the second time the validation was ok and therefor it works the second time click. basicly i just could repeat my suggestion to submit the form on validation success ... i think something like:

<input name="submit" type="button" onclick="validateUser();" />
 
//form submit validation
function validateUser(){
    var datastring = $('form#myForm').serialize();
 
    $.ajax({
        type: "POST",
        url: "index.cfm?event=checkusername",
        data: datastring,
        success: function(response){
            var resp = jQuery.trim(response);
 
            if (resp == 'TRUE'){
                $('#myForm').submit();
            } else {
                $('.toggleFailure').show();
                $('.toggleSuccess').hide();
            }
        }
    });
};
 

should work ... i changed the button type and the submit-condition. when using ajax you don't really need a 'real' submit button.

kind regards