On Click alert if $.get returns a value, if not, submit the form

Posted by bradenkeith on Stack Overflow See other posts from Stack Overflow or by bradenkeith
Published on 2010-05-06T14:12:15Z Indexed on 2010/05/07 17:18 UTC
Read the original article Hit count: 238

Filed under:
|

If the submit button is clicked, prevent the default action and see if the field 'account_name' is already in use. If the $.get() returns a result, alert the user of the results. If it doesn't, submit form with id="add_account_form".

My problem is that my else{} statement is not submitting the form. I get no response when submit is clicked & there is no value returned.

Also I would like to change my code where it goes $("#add_account_form").submit(..) instead of .click() however, would that cause a problem when trying to submit the form later in the script?

    <script type="text/javascript">
        $(document).ready( function () { 

            $("#submit").click( function () { 
                 var account_name = $("input[name=account_name]").val();
                    $.get(
                        "'.url::site("ajax/check_account_name").'", 
                    {account_name: account_name}, 
                    function(data){ 
                        if(data.length > 0){            
                                    confirm( "The account name you entered looks like the following:\n"
                                                        +data+
                                            "Press cancel if this account already exists or ok to create it."
                                                ); 
                        }else{
                            $("#add_account_form").submit();
                        }                   
                    });
                    return false;                
                });
            });
    </script>
                                                    <p>
                                                        <input type="submit" id="submit" class="submit small" name="submit" value="Submit" />
                                                    </p>
                                                </form> 

Thanks for your help.

EDIT

So anyone who runs into my problems, it's that $.get() is asynchronous, so it will always return false, or true depending on what submitForm is defined as. $.ajax() however, allows async to be set as false, which allows the function to finish before moving on. See what I mean:

        $(document).ready( function () {                                
            $("#add_account_form").submit( function () { 
                var submitForm = true;
                 var account_name = $("input[name=account_name]").val();
                    $.ajax({
                        type: "GET",
                        async: false,
                        url: "'.url::site("ajax/check_account_name").'", 
                        data: ({account_name: account_name}), 
                        success:
                    function(data){ 
                        if(data.length > 0){            
                                    if(!confirm( "The account name you entered looks like the following:\n"
                                                        +data+
                                                        "Press cancel if this account already exists or ok to create it."
                                                )){ 
                                                submitForm = false;
                                            }
                        }   
                    }
                    });

                        if (submitForm == false ) {
                    return false;     
                        }

                });
            });

Thanks for your help @Dan

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about form-submit