Question

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

Answer 1

Taking a bit of a guess, but perhaps data.length is always true?

I’d try returning a boolean or just a bit.

then:

if(data) {
  confirm();
} else {
  $('#form-id').submit();
}

Hope that helps 🙂

EDIT: Mis-read question

What may be happening is when the submit button is clicked, the form submits after the click. In other words, you may have to have a form.submit event caught:

$('form').submit(function() {
    var submitForm = true;
    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){
            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) {
        return false;                
    }
});